无障碍使残疾人群体能够感知、理解、浏览网络、并与之产生交互。想象这个世界所有的研发人员都知道关于无障碍的知识：你负责设计，他们负责开发...简直完美，在这个世界上，只有设计本身会给残障人士使用产品时为他们制造麻烦~~

这些指南将包含你所需要知道的要点，并使你的产品“已设计好”来满足“Section 508 ”（1973年美国劳工复健法改进版）和“Web内容无障碍指南2.0”的最低标准。还有一部分会给后期开发和质量测试带来帮助。

无障碍不是创新的障碍

无障碍不会强迫你制造一个丑陋、无聊或混乱的产品。它使你把一系列的约束条件融入你的设计。这些设计约束使你探索新想法，并为你所有的用户设计出更好的产品。

当你读到这些指南时，要知道我们并不是在为设计同行而设计：

这太棒了！我等不及要在Medium上把它写出来了

要为那些将与你产品进行互动的各种用户进行设计：

要为所有人而设计

这可以包括那些失明、色盲或视力低下的人，或有耳聋和有听力障碍的人，那些暂时或永久行动不便的人。设计对象可以是年轻人，老人，标准用户，休闲用户，和那些只为享受一个优质体验的人。像接受其他设计约束那样接受这些无障碍指南吧，这是创造伟大产品的一部分。

不要使用颜色作为唯一传达信息的手段

这有益于那些无法或很难区分两种颜色的用户，这包括有色盲的人（12分之一的男性，200分之一的女性），低视力者（每30个人就有一个），或是盲人（每188人就有1个），使用颜色来突出显示或补充已区分开的信息。

在这个黑白图片中，你能指出几处错误状态？

有多少区域有警告？

 大多数人的答案是一个————“验证码”区域。这是因为感叹号里面的三角形表示出了问题

现在看看这个相同图片的彩色版，有几个区域提示警告？

颜色的改变导致完全不同的结果

有了颜色，答案就变成“所有四个”，有很多可选的方式可以使这种视觉形式变得无障碍。你可以把红色三角形图标放在所有的错误区域中；你可以使用文本来指示和解释为什么这一区域出错；你可以使用工具提示，粗边框，粗体，斜体，下划线等等。但唯一的规则就是不要只使用颜色，你会如何设计这个注册表格，来使颜色不是显示警告的唯一的视觉手段呢？

更正：事实证明，上述PayPal无障碍问题的例子是我的浏览器插件LastPass造成的。感谢PayPal的Tony amide（@评论区）为我指出这个问题。作为设计，三角形图标总是应该出现在警告状态。

确保文本和背景之间有足够的对比度

根据WCAG(Web内容无障碍指南)，文本和文本背景之间的对比率至少应该是4.5比1。如果你的字体是24PX，19PX像素或以上时，这个比例就变为3:1.这本指南可以帮助到那些低视力，色盲，视力恶化的用户，或者在屏幕上看文章的你。这意味着，当文本是24像素、19像素或更大的，可以在白色背景上使用的最浅灰色是# 959595。

白色文本背景上的959595

对于较小的文本，可以在白色背景上使用的最浅灰色是# 767676，如果你有一个灰色的背景，文本需要更暗。

白色文本背景上的#767676

有一些很棒的工具可以帮助你的设计使用无障碍颜色调色板，例如Color Safe。Webaim的颜色对比检查也很好用，它可以让你测试选中的颜色，标识或元素目前不在这一标准的约束范围内，例如无效按钮或菜单项。但占位符和文本仍有标准约束。举例来说，某流行的博客网站的文本对比度低于标准。只有左边巨大的字母“M”符合标准的对比。

只有字母“M”符合标准的对比

英国广播公司的例子显示了一个通过颜色组合的用户界面。你可以告诉他们正努力寻找的，能通过对比率的最轻的灰色是： # 767676

通过颜色对比度使用的一个例子：

我很自豪能与Salesforce系统设计团队工作，他们在Salesforce1的移动应用中使用了对比色彩指南。

在Salesforce1中通过的颜色

尝试利用高对比度颜色组合，那些经历过这次训练的设计师们通常会感到惊讶的是，他们竟是如此喜欢高对比度的设计，我相信你也会发现使用指定范围的对比度来显示文字将丝毫不会影响你的产品。

也可以用“不说谎投影机”和“无障碍界面设计”来检查颜色对比度

为使用键盘的用户提供视觉焦点指示

让我们花一点时间来表达对reset CSS的感谢，它惠及了所有现代设计师。没有reset CSS，将很难在不同的设备和浏览器中建立出一致的体验。

现在让我们花一点时间来责骂reset CSS，责怪它在互联网上常见有关无障碍的错误中扮演的角色。

:focus {outline: 0;}

这一行的CSS使得一个聪明的用户只用键盘来浏览网站几乎是不可能的。幸运的是，自从最初的CSS reset被开放，现在许多流行的新版本，如Eric Meyer’s已移除了这种focus伪类。

Unstyle（某种浏览器）的设计意图是很高尚的：希望设计师和开发者抛弃默认模式的热门风格，而使用清晰，与他们网页匹配的风格。我们不喜欢灰色虚线边框围绕着的IE和Firefox，或是Chrome的蓝色光环。

Chrome和Firefox的默认视觉聚焦状态

问题是，大多数网站没有创建自己的聚焦风格。这些聚焦是网络用户自己的习惯成果，在网站上基本上不存在。可以做一个快速检验网站是否提供视觉聚焦的实验，打开一个标签，并访问某公司的网站，重复按Tab键导航浏览页面。当你浏览时，你会看到一个聚焦选框吗？也许你在页面上看到一些有选框，一些没有？考虑下这对一个只使用键盘与网络互动的人造成的影响。

如果你使用的是苹果电脑，你可能需要在系统预置选项>键盘>快捷键下启用全键盘访问，这些设置在屏幕的底部。

如果你移除了默认聚焦形式，请用一些比浏览器提供的更好的选择来代替它，在下面的例子中，英国广播公司使用了一个颜色条来显示哪个链接被选中

Twitter结合使用了一个默认聚焦和一个工具提示来显示键盘聚焦。图标也从灰色变成绿色，这使用了三个独立的视觉指示来为使用键盘的用户聚焦。

当你提供了你自己的聚焦风格时，一定要清除默认状态，这样你才不会得到像下面这个例子一样的状况，Chrome的蓝色矩形重叠了这个菜单上的蓝色方块。

这丑哭了，但这可不是由无障碍“造成”的

注意表单

近几年来，我们在表单的形式方面经历了进化。现代设计已经放弃了已知的传统识别属性，用一种更简练的方法来支持互动，如今的形式缺乏两种对无障碍非常重要的具体项：明确界定的边界和明显的标签。

无边界表单

下面是一个传统文本输入的例子。这是一个带有确定边界的矩形。它可以填充颜色但不一定要填写。还有一个明显的标签，在这个例子左边区域的位置。

一个传统的文本输入字段

明确界定区域边界对于那些行动不便和有认知障碍的用户是非常重要的。在用户使用标准或适应性定点设备（鼠标，键盘等）时，了解点击目标的位置和大小很重要。有认知障碍的用户可能很难与缺少常见视觉线索的区域产生交互，甚至很难发现这些区域。

下面是一个搜索区域的例子，这是一个很流行的记事应用程序。 

如果我想输入搜索词，我应该点击哪里呢？为了突出显示效果，光标也被移除了。

这个屏幕上只有一个输入区域。你能猜到哪里是这一区域的边框吗？答案是只要你点击“search notes”的任何字母，它就会把你的拉进输入区域。

这是另一个关于无边界区域的例子 ——— 一个流行博客平台。下面是这一页面上的两个输入字段。在显示屏幕上，我要点击哪里才能进入“ Tell your story……”文字区域呢？

 在哪儿点击“tell their story”呢？

下面是添加了一个蓝色的矩形到显示的文本区域边框的同个界面。如果你点击该区域以下的任何地方，不会有任何反应。 

如果你点击蓝色框的外面，也不会有反应

下面是标注设计的另一个例子。它也没有使用传统输入的视觉效果，但为残障用户提供了更多的信息。事件标题在两条水平线之间，并且用户可以点击下方两根线之间的任何区域来输入他们的事件。

这不是限制标准，但我们仍要为用户提供足够的指示线索，你能为这些设计师想出一些其他的选择吗？你将如何设计一个记事本或博客发布的应用程序？

无标签表单

标签可以告诉用户这个表单的目的。无论光标放在区域内或在完成输入后，标签都会保持其有效性。占位符文本是视觉标签一个糟糕的替代品。

这是典型低对比度的例子，在下面的七个例子中，只有一个的对比度满足了我们的所需要的4.5:1。

只有“Search Twitter”占位符具有所需的最小对比度

占位符文本被移除时，如下面这个例子中，我应该输入什么到文本中？在JetBlue的例子中，我应该输入我的用户名，电子邮件地址，还是我的TrueBlue号码？在Caviar的例子中，我应该“ Get Started”（开始）于我最喜欢的食物，喜欢的餐厅，还是我的地址呢？价格领域是最小值和最大值，还是超过和小于呢？

没有标签，用户可能很难知道应该输入什么类型的语句

这里有一个更容易的方法来完成显示以上价格综合区域的设计，即使在我们填写完之后，我们也能看到最小值和最大值标签。

可视标签

避免造成识别冲突

Q: 什么时候菜单不再是菜单？

A: 当它是一个非模态对话框的时候

这个问题是当今网络无障碍问题的核心。为了更充分的理解，可以看下W3C的创作实践的设计模式。这是指导如何建立一个当今许多常见的设计模式，包括菜单、模态、自动填充，和其他。

这些模式都有一套特定的HTML语义，键盘的用户和ARIA属性。这些ARIA属性指示阅读屏幕的用户在使用键盘时如何与组件产生交互作用。当用户与组件产生交互时，他们还提供状态更新。例如，他们教会人们使用箭头键上下移动表单来与一个菜单产生交互。

一个简单的自动填充的typeahead（一种HTML组件）

这是一个同样的typeahead, 但是在每个列表项旁边都有图标

在这个例子中 ,图标用于清晰指示对象

这些基本上是相同的用户界面模式，用户进入了输入模式时，包含所有可能结果的选框出现在下方。用户可以使用箭头键或鼠标定位从列表中选择一个项目。

下面的例子是有识别冲突的自动填充。用户不仅可以筛选并从列表中选择一个项目，他们还可以通过点击铅笔或垃圾桶图标来选择编辑或删除每个列表项。这两个按钮的加入让这个自动填充有了识别冲突。

一个隐藏的功能设置，无法通过标准技术与辅助技术自动填充

这正是无障碍问题中的一部分，因为它打破了自动填充的标准键盘交互模型。辅助技术无法每次都识别身份，操作，和组件状态，因为W3C的WAI没有定义这类用户界面的交流方式。

同样的规则也适用于菜单。在下面Virgin America的例子中，虽然它们有非常相似的视觉元素，只是右边下拉框是真实的“菜单”。左边的这是一个是非模式对话框。

“From”下拉菜单是菜单。“Guests”下拉列表是一个由W3C定义的非模态对话框，每个菜单都是一个插件，为用户提供了一个选择列表。一旦我们每行提供多个选择，就如左边的例子一样，它就不再是菜单。这改变了使用键盘交互模式，从使用箭头键变成使用Tab键。它改变了键盘聚焦的处理方式，和下拉框关闭后聚焦的去向。

不同于上面的例子中的自动填充，非模态对话框可以幸运的做到无障碍。要了解它们之间的区别和对用户体验的影响。要知道设计小小变更可能导致用户交互模式的改变。这将确保你为你的产品选择合适的模式。

不要迫使人们寻找东西

这些原则主要为残障人士提供服务。这包括只用键盘的用户，和那些使用语音识别工具（Dragon NaturallySpeaking）来与网页产生交互的用户。键盘用户和语音辅助技术（如Dragon）完全依赖于屏幕上可操作项目。如果一个链接或按钮不能看到或被语音检测到，那么请按下“clicked”就变成空话。如果一个只使用键盘的用户看不到一个页面按钮，我们怎么期望把他们导航到新的页面？

下面是Dragon Naturally Speaking （一个数字识别链接系统）Gmail的屏幕截图，所有的链接都被识别为数字。用户可以大声说出一个数字来激活一个链接。如果一个区域只有悬浮起来才能看见链接怎么办呢？我们会用数字标识在空白处。

Dragon 数字识别链接，大声说数字点击一个链接

我理解悬浮状态下隐藏可操作项目的做法为什么流行起来。它作为一个解决方案，行之有效的完善了产品的可用性，这点是由计算机科学家艾伦凯指出的。

“Simple things should be simple, complex things should be possible.” -Alan Kay

“ 简单的事情就应该是简单的，复杂的事情也应当是可能的。”

我坚定地相信这一理论，但它至少应该能使所有用户，包括那些有残障的用户，使复杂也成为“可能”。不幸的是，许多人都没有真正理解无障碍的真正含义，扭曲了Alan Kay的话。

“Primary things should be visible, secondary things should be shown on hover.”

“主要的事情应该是可见的，次要的事情应该在悬浮状态显示。”

不要将行为和信息隐藏在悬浮状态，而是要探索更具包容性的选择：

-放置次要行为在菜单中（或非模态对话框），不要使用悬浮状态来隐藏触发机制。

-减轻次要图标的对比度，悬浮时再增加对比度。

-为明显的物品展示触发机制。一个信息图标比空白更适合做触发机制

这是一个LinkedIn的例子. 下面是我的个人资料页的截图

    我LinkedIn的简介banner

   下面是我的鼠标停在个人资料卡上之后的状态

我LinkedIn的简介banner的悬停状态显示

突然出现了一些视觉标识，我可以单独编辑本页的许多区域，包括我的名字，标题，以前的工作，教育，甚至我的个人资料照片。当我把鼠标移到我的标题时：文本会变成蓝色，表示我可以点击了：

 文本变蓝

下面是一个无障碍的解决问题方法，这个设计可能会解决某些用户群的问题。我放置了小小的铅笔在附近区域。他们总在那儿。

一个解决方案：对于在线可编辑字段显示出小的灰色铅笔，当我悬停在一个区域时，它会变成蓝色的。

在悬浮和键盘聚焦上显示蓝色区域

当呈现这类的解决方案时，设计师会被质疑：

 “那真是太重了，不是吗？”

也许是这样，但这只是解决办法的一种可能。此外，它只出现在我自己的个人资料页。大家会花在自己的LinkedIn个人资料上花多少时间？这种“重”对于通用无障碍性是否是公平考量？如果用户不喜欢这种用铅笔标识我们能提供什么别的选择呢？

这是来自Evernote的另一个例子。这是一列的笔记。当用户的鼠标悬停在某一行，四个可操作的图标就会出现。

在这个案例中，我会要求设计师尝试索始终显示这四个图标。一个可能的解决方案就是始终显示这些图标。他们可以是白色背景上绿色的标识，悬浮时则反向

Evernote的一个悬浮解决方案

这个解决方案也可能被认为有点“重”，但请记住，我们不是为设计师而设计的。我们是为一组有不同的需求和不同的电脑技术的用户群体而设计。

在表面看来，这些会限制您的使用组件，悬停状态，和视觉设计，并限制您的创造力。但实际上，当你的视觉设计能使更广泛的用户群体感到愉悦时，你会发现这些准则推动你走向创造力的极限。

合理的使用聚焦形式，你会发现，任何的设计挑战都可以找到相应的解决方法，满足你的经理，营销团队，在Dribbble上的追随者和你所有的用户，包括那些残障人士的需要。

Jesse Hausler 在无障碍设计领域有12年的经验，他已经在Salesforce工作四年了，并且是那里的首席无障碍设计师。

关于无障碍设计，设计师应该知道的7件事，第二部分后续更新~~小伙伴们持续关注哦

本文由设计夹（www.sezign.com）翻译整理，转载请注明出处哦