网络是为所有人服务的。这包括建立在网络架构上的网络应用。如果你在过去几年中没有听到 "可访问性 "这个词被提及，你可能一直生活在岩石下。构建支持残疾用户的无障碍、包容性的网络应用，正在成为标准协议。你最近更新过Slack吗？那些颜色的变化不仅仅是UI的视觉更新；它们是整个应用程序有意识地转向无障碍的一部分。
对于许多UI和UX团队来说，为无障碍设计是一个不必要的限制。它对他们使用微妙的色调和色彩的技巧构成了威胁。他们想象一个由高对比度的文字、花哨的轮廓和无聊的按钮颜色决定的产品。但这并不是现实。只有缺乏想象力的设计师才会害怕约束。
解决方案是渐进式增强。多年来，开发人员利用这种方法来确保他们的代码能够在多个浏览器和操作系统上运行。这个想法是从最底层开始：确保应用程序的核心功能能够在最古老的浏览器上运行，然后为那些拥有较新的、能力更强的浏览器的用户提供细微的支持。当为无障碍设计时，我们可以采取同样的方法。首先从可及性要求开始，然后再向上增强。
那么，渐进式增强在用户界面中到底是什么样子的？我很高兴你这么问。让我们来看看几个例子
解决方案
色盲和对比度是影响网络应用程序视觉设计的两个最大限制。虽然其他的可及性问题也很重要，但其中许多是由应用程序的构建方式来处理的--而不是它的外观。既然我们在讨论设计，我们就把例子限制在这两个考虑因素上。
内容
为可访问性而设计时的首要目标是内容（你知道的，就是那些文字）。无论你的应用程序服务于什么产品，它都依赖于文字来吸引用户，并向他们传播信息。如果你用大量的浅灰色文字来设计你的应用程序，因为它看起来很好，那么你有可能让一些用户费力地去看它。
这可以通过建立一个安全但灵活的调色板来避免，然后坚持下去。从选择你的背景颜色开始。你的应用程序是一个浅色主题？深色主题？两者都有？首先选择这些颜色，因为它们将直接影响你对文本颜色的选择。
在你选择了背景颜色之后，使用最深的颜色（或者最浅的颜色，如果你是为深色主题设计的话），并找到一种前景颜色，它的对比度刚好可以通过WCAG AA标准。
恭喜你，你已经找到了你的基准线你可以在应用程序的任何地方安全地使用这种颜色。现在，使用渐进式增强，你可以建立你的颜色方案的其余部分，使其更加复杂。任何比基线颜色更深的颜色都可以用于文本/内容，任何更浅的颜色都应该是严格的装饰性的（同样，如果使用深色的用户界面，则正好相反）。
对你想在调色板中使用的每一种色调继续采用这种方法--灰色、蓝色、红色等，直到你有一个完全健全的色彩方案，可以适应应用中的任何需要。P.S. 如果你的应用程序同时使用浅色和深色的用户界面，你最好在两个调色板之间共享颜色，以提高一致性。
交互式元素
互动元素应该是你的下一个关注点。按钮、输入框、菜单--如果没有这些，你的应用程序是否能被认为是有功能的是值得怀疑的。那么，你如何为这些元素设计可访问性？幸运的是，你已经有了一个成熟的调色板来指导你。
从你的内容安全色之一开始，只设计使一个对象看起来有互动性的最低限度的东西。也许那是一种背景颜色，也许是一个边框，也许只是带有图标的文字。
然后使用其他装饰性的颜色、轮廓、阴影、甚至图标来增强用户的体验并增加视觉风格。
焦点状态
为那些交互式元素设计焦点状态绝不应该是事后的想法。如果你依赖浏览器的默认值，当用户点击每个元素时，你精心设计的用户界面将充满离奇的边框和盒状阴影。
无障碍标准要求一个元素的焦点状态在视觉上要有区别。你可能会想，"也许我只要把颜色改一下就可以了......"错了!因为你要考虑到色盲问题，这意味着你不能只是改变边框或背景颜色。相反，为每个组件设计一个特定的焦点状态，与它的风格相辅相成，而不是仅仅在它上面涂抹。试着改变边框的厚度，增加边框，颠倒颜色，或者其他任何对元素有补充作用的方法。
想知道这种方法的一个更好的例子吗？这正是我们设计Dojo Widgets的方法P.S. 现代的Dojo还有很多其他的好东西发生。
指示器
在线，离线。是的，不是。简单，中等，困难。待定，批准。网络应用充满了状态的视觉指标。作为一个设计师，很容易在这里使用一个绿框，在那里使用一个小红点，然后称之为完成。但是有红/绿颜色混淆的人怎么办？由于考虑到色盲是无障碍性的一部分，仅仅依靠颜色是不够的。
为了表示状态，要想出一个独立于颜色的清晰的视觉指标。它是一个图标吗？一个词或标签？也许只有一个字母就够了。这就是你的基线。然后简单地添加颜色，以增强其他人的体验。
还想用一个小点来代替吗？你也可以不依靠颜色来做到这一点。只要看看Slack是如何处理他们的状态指示器的。他们没有把它们当作简单的彩色小点，而是把这些小点对象化，使之像一个图标一样运作，而颜色--你猜对了--增强了体验。
把它放在一起
可访问性只有在项目结束时才是一个问题。通过在设计时预先考虑到可访问性的限制，并使用渐进式增强技术来简单地补充用户的体验，你最终可以得到一个充满了微妙和工艺的用户界面。不要害怕这些限制 -拥抱它们吧
额外的资源
不管是你的行业的法律要求，还是你只是想让你的产品对每个人都能使用，为无障碍设计是正确的事情。如果你对这个想法感到陌生，这里有一些额外的资源可以帮助你开始。
- 无障碍设计的案例：全面了解为什么你应该关心无障碍标准。
- 无障碍设计的介绍了：解你应该为哪些残疾进行设计，以及如何开始的基本知识。
- WCAG指南符：合无障碍标准的文件和规范。
- 色彩对比度检查器：检查你的前景和背景颜色是否符合WCAG标准。
- 模拟道尔顿症：色盲模拟器。
- A11Y项目：一个致力于使网络更加无障碍的社区。
准备好解决无障碍问题了吗？
无障碍环境对SitePen来说并不陌生。多年来，我们一直在建立无障碍应用程序和倡导无障碍。也许你想得到一些指导，了解如何将无障碍性纳入你的产品路线图。也许你需要帮助开发一个考虑到无障碍性的基础应用程序。无论你正在建造什么，我们都有足够的团队和资源来帮助你达到启动日期。让我们来谈谈你的下一个项目!
