不得不知：关于无障碍设计的七件事
每个产品都有自己的目标用户，但这并不意味着残障人士就应从任何群体中被剥除。Jesse Hausler提出了针对无障碍设计的七条大纲，能够帮助我们认识到其重要性并了解如何在我们的产品中实践它。
不得不知：关于无障碍设计的七件事
原作者：Jesse Hausler
译者：励定洲
无障碍意味着残障人士能够理解这个互联网视界，并在其中实现导航和进一步的操作。想象一下这个世界上所有程序员都熟知无障碍，而作为设计师的你只需尽管设计，会有人帮你构建一切...听起来很完美。但在这个世界上，设计本身往往才是导致残障人士使用你的产品时遇到麻烦的源头。
这个大纲主要包含你需要知道的一些关于如何让你的产品设计能满足Section 508 和 the Web Content Accessibility Guidelines 2.0的知识。还有一些内容会对你的产品开发和质量测试有帮助。
1. 无障碍不是创新的负担
无障碍设计并不意味着强迫你去让你的产品变丑。相反，它只是在你思考设计的过程中融合进一系列的限制。这些限制往往会给你一些灵感，帮助你探索如何让你的产品适用于所有用户。
当你阅读这些大纲时，请记住我们并不是为我们的设计同行在设计。
为那些会与你的产品产生互动的所有群体设计。
这可能包含那些眼盲-弱视、耳聋-听力困难、那些永久或暂时性行动困难、或者那些有认知缺陷的人。当然也包括老人、儿童和那些只是单纯为了感受好的体验的人。
这些大纲将会是创造最优秀产品的一个契机，同时也是一个挑战。
2. 不要只用颜色作为唯一的视觉途径去传达信息
这帮助那些无法/难于识别颜色的人，包括色盲（十二位男性中有一例，两百位女性中有一例）、弱视（三十个人中有一例），或者全盲（一百八十八人中就有一例）。
使用颜色去高亮或者补充那些本身就可见的内容
在下面这个黑白的例子里，你能看出有多少表单表达了错误的状态？
大多数看到这个黑白表单的人的答案会是一个，也就是那个“human verification”验证码的框。这是因为其中有一个三角形的感叹号标志。
现在来看看一个同样的例子，只是加了颜色。这下有多少表单你认为显示了错误的状态？
当有颜色后，这个答案变成了“所有四个”。
有很多不同的办法可以让这个表单从视觉部分做到“无障碍”。你可以在所有显示错误的框里放置一个红色的三角图标在；你可以使用文字去说明和解释为什么一个框是错误的；你可以使用工具条、粗线、粗体字、下划线、斜线等等。这类的选择是无限的，但唯一的规则就是不要单单使用颜色。
如果是你，又会如何设计这个注册表单呢？
更新：上述这个paypal的注册表单出现无障碍缺陷的原因貌似是因为我的浏览器里有一个叫做LastPss的插件造成的。感谢来自Paypal的Amidei(@subface)指出这个问题。在原本的设计中，这个三角图标在错误状态下应该总是出现。
3. 确保文字和背景之间足够的对比
根据WCAG，文字和背景之间的对比度比例应该至少是4.5:1。如果你的字体24PX以上或者19PX粗度，那么这个比例就可以缩小到3：1.
这个大纲能帮助那些弱视和色盲的用户识别和阅读屏幕上的文字。
这意味着当文字是24Px以上,19px粗时，你能用在一个白色背景上的最浅灰度颜色是#959595。
对于更小的字体，背景的灰度要进一步降低到#767676。同样，如果你使用了一个灰色的背景，那么字体的颜色需要更深。
推荐两个可以帮助你找到无障碍颜色配对的工具：Color Safe，WebAIM’s Color Contrast Checker,后者还能让你对已经选择的颜色进行测试。
logo或者那些不可点击的元素是一个例外，比如处在非活跃状态的按键。
下面是使用了低于标准对比度比例文字的例子。只有最左边那个巨大的”M”符合了标准。
下面这个BBC的例子显示了有颜色的UI界面。你可以看到它的最低灰度是#767676，遵守了对比值比例的规范。
我很荣幸能和Salesforce Design System的团队一起工作，他们在Salesforce的移动应用里很好地遵守了颜色对比度大纲。
4. 为键盘用户提供视觉聚焦指示
感谢那些reset CSS和它带给现代网页设计师的一系列功能。如果没有它们，在不同设备和浏览器里想要创建统一的互联网体验会变得异常困难。
但我们也不得不正视这类reset CSS在互联网上广泛传播的无障碍缺陷。
这一行CSS成为了那些只用键盘导航和浏览网站的用户的噩梦。幸运的是，现在一些流行的改进版本，比如Eric Meyer‘s 已经把这一段代码给去掉了。
设计师和程序员可以用一些同时兼具可视性并符合他们网页风格的设计去替换这类边框。
问题是，大多数网站没有创建他们自己的聚焦形式。而这些聚焦对于键盘用户来说是必须的，这不能不说是当前互联网的一大缺失。
想看看一个网站是不是提供了这个功能吗？打开一个新标签，访问随便一个网站，比如你的手机生产商的网站。不断按Tab键在整个页面进行导航，在这个过程中你哟没有注意到一些聚焦的选框出现？也许你可以看到有些链接有，但并不是全部？考虑一下这对于一个只用键盘来操作网站的人的影响。
如果你正在使用一台mac，你可能需要开启全键盘接入（在系统偏好设置>键盘>快捷键里，在最底下你可以找到它）。
你也可以去掉默认的聚焦形式，替换成一个比浏览器默认更好的选择。
在下面的例子里，BBC使用了一个有颜色的横条来显示哪个链接被选中了。
Twitter使用了默认聚焦和工具条结合的方式去显示键盘聚焦。这个图标同时也从灰色变成了绿色。这给键盘用户带来了三种不同的视觉方法来聚焦。
如果你选择了自定的聚焦风格，请确保去掉默认的，这样你才不会像下面这个例子一样搞笑。Chrome的蓝色方框盖住了菜单项自己的蓝色。
5. 小心表单
最近几年我们经历了无数次表单的消除演化。现代设计已经颠覆了传统的交互启示和识别属性，取而代之的是一个更极简的方法。然而当下的表单缺少两个对无障碍非常关键的元素：清晰的边框定义和可见标签。
没有边框的表单
下面是一个传统的文字输入框的例子。它由一个矩形和一个既定的边框组成，还有无关紧要的填充颜色。同时你还可以看到左边有一个可见标签。
清晰的表单边框对于有行动和认知困难的用户来说非常重要。有认知障碍的用户可能在寻找和操作一些没有视觉线索的表单时产生困难，比如他们无法知道这个表单的位置和大小。
下面是一个搜索表单的例子：
在这个屏幕上只有一个可以输入的地方，你能猜到是哪里吗？事实是点击“Search Notes”的任何一处都可以让你进行输入。
下面是另个一个没有边框的例子，实际上有两个可以输入的地方。在屏幕上我该点击哪里才可以在“tell your story….”的文本框进行输入呢？
下面是一个同样的截屏，我只是在外面多加了一个蓝色矩形边框。这个框代表这输入作用范围，如果你点击这个区域以下的地方，那么什么也不会发生。
下面是另一个例子。它同样没有采用传统的边框设计，但是提供给有残障的用户更多的信息。标题在两条水平线之间，而用户可以点击最下面的两条线之间开始写作。
你能给这些设计师们想到邪恶其他的注意吗？如果是你，你会怎么设计一个笔记或者博客发布应用？
没有标签的表单
标签告诉用户这个表单的目的，无论是党光标聚焦在表单内还是完成输入时，标签要始终保持有效性。对于视觉标签来说，占位符文字是一个很糟糕的替代品。
他们是一个典型的低对比例子。下面的七个例子中，只有一个拥有足够的对比，满足我们的4.5:1的比例。
占位字符消失的话，比如下面这个例子里，我该输入什么东西？在JetBlue的这个例子里，我应该输入我的用户名、电子邮箱，还是我的TrueBlue号码？在Caveiar的这个例子中，我应该输入我最喜欢的食物、偏好的餐馆，还是我的地址来“Get Started”？
针对上面这个价格表单，还有一个更优雅的解决方案，可以保证即便在输入内容后也能看到标和最多最少的信息：
6. 避免组成识别危机
问：什么时候一个菜单不再是一个菜单？
答： 当它是一个非模态对话框的时候。
这个是当今互联网最大的无障碍问题的核心问题。为了让你们理解得更全面，可以看一下这篇文章：W3C’s Authoring Practices for Design Patterns。这里包含了针对很多今天常见无障碍问题的解决方案，包括菜单、模态、自动填充等。
每个规则都有一个特定的HTML语义、键盘行为和ARIA属性用量。这些ARIA属性指示屏幕的阅读者使用键盘的时候如何与一个控件产生互动。同时它们在用户与控件产生交互时提供状态更新。例如，他们指导人们在交互一个菜单时，使用方向箭头来向上和向下移动列表。
加了图标后：
这些本质上都是一样的UI规则。用户在一个输入框里输入时，一个包含所有可能结果的列表显示在下面。用户可以使用方向键或者鼠标去定位和选择列表里的某个项目。
下面的例子是一个自动填充，存在着一个识别危机。用户不仅可以在列表中过滤和选择一个项目，他们还可以通过点击铅笔或者回收站图标选择编辑或者删除某个列表项。额外的这两个按键正是给予了自动填充识别危机的原因。
造成了无障碍的原因是因为它打破了自动填充标准键盘的交互模型。对于这种困惑的组件状态，辅助技术显然不能总是识别和操作，因为W3C的WAI没有定义一个针对这类型UI的交互方式。
这个规则同样对菜单适用。在下面这个来自Virgin America的例子中，虽然视觉上看起来很相似，只有右边的下拉框是确实的“菜单”，而左边的是一个非模态对话框。
菜单是一个插件，提供用户一个列表的项供选择。如果我们在每一项上还能进行多种操作，就像左边这个例子一样，我们面对的就不再只是一个菜单。这改变了键盘交互模型，从使用方向键，变成了使用tab按键。它改变了键盘聚焦的方式和当下拉框被关闭后的去向。
不像上面的自动填充例子，非模态对话框可以很幸运地做到无障碍设计。了解他们之间在用户体验上的区别和影响。了解细小的设计改变可以如何导致用户的交互模型，会让你选择合适于你项目的规则。
7. 不要让人们悬浮去找东西
这通常针对那些有运动相关残障的人士，包括只能使用键盘的用户，和那些使用语音识别工具来与网页互动的人。键盘用户和语音辅助的工具完全仰赖屏幕上的可操作项。如果一个链接或者一个按键不能被语音识别系统监测到，那么所谓的“请按下XX”就成了空话。如果一个只能使用键盘的用户连可以点击的按键都看不到，我们又如何期待他们去进行操作？
下面是一个使用Dragon Naturally Speaking系统的Gmail截图，我们可以看到所有超链接都被标识了一个数字。用户现在可以说出一个数字然后激活对应的链接。如果一个链接不悬浮上去就看不到呢？我们会用数字去标识一个空白的空间。
我理解这种把东西藏起来并用悬浮去显示的理论为什么会流行。它确实为遵从等级制度的易用性问题提供了一个比较好的解决方案，这一点是计算机学家Alan Kay指出的。
“Simple things should be simple, complex things should be possible.” -Alan Kay
我是这个等级制度理论的鉴定信仰者。但是这个理论应该让复杂的东西对所有的用户都至少做到“可能”，包括哪些残障人士。不幸的是对于无障碍设计来说，很多人显然曲解了这条定理。
“Primary things should be visible, secondary things should be shown on hover.”
与其把操作和信息藏在悬浮状态里，不如探索更多的可能性：
1 把次要的操作放在菜单里，或者非模态对话框里，而不是用悬浮状态来隐藏触发机制。
2 降低次要图标的对比度，在悬浮时再增加对比度。
3 为触发机制使用明确的样式。一个涵盖信息的图标比空白作为触发机制要好得多。
下面是一个LInkedin上的例子。我把我的个人主页做了个截图。
这是当我移动光标到我的个人卡片上时：
突然之间就有了一些视觉标识，我可以单独编辑这个页面上的很多选项，比如我的姓名、职称、上一份工作、教育，甚至我的照片。继续看下去，当我悬浮鼠标到每一项上时，文字变成了蓝色：
下面是一个无障碍解决方案，解决可能给部分人群带来的设计问题。我在每一个可以编辑的项目旁边使用了很小的铅笔图标。是的，它们总是在那。
当我悬浮鼠标到某一项上时，蓝色出现。
当展示这种解决方案时，设计师们往往会被质疑：
这看起来有点“重”，不是吗？
也许是的，但是这是这个问题的一个可能的解决方案。另外，它只会在我的个人主页出现。一个人会花多少时间盯着自己的LinkedIn主页去看呢？这种“重”对于整体的无障碍性是否是平衡的考量？如果我们不喜欢这里的铅笔图标的话，还能有什么其它的改进？
这里是另一个来自Evernot的例子。这里显示了一溜的笔记。当用户的鼠标悬浮在某一行上时，四个可操作图标出现了。在这个案例中，我会询问设计师去探索是否有可能常驻这四个图标。一个可能的解决方案是永远显示这些图标。比如绿色的图标和白色的背景，在悬浮时反相就好。
这种解决方案也可能会被认为“太重了”，但是记住我们不是在为设计师们设计。我们的目标用户是更为广泛的人群，他们拥有不同的需求和不一样的计算机使用水平。
在表面上看来，在你排布设计元素、悬浮状态和视觉设计上设置这些限制或多或少会限制你的创意。若你希望你的视觉设计能让更多的人满意，这些无障碍大纲会推动你的创意。
