@Angelaaa （公众号：漫声细语）：之前整理「色彩对比度」相关内容时，连带学习了「无障碍设计」的知识，这次一起整理分享出来。一共分视觉、听觉、行动、认知四个方面来阐述。
编者按：《超全面！色彩无障碍设计之「对比度」的探索》
一. 什么是「无障碍设计」，为什么它这么重要？
在这个多样化的世界上，并不是所有人都能毫无障碍、顺利地使用各种产品。
优秀的无障碍设计，不仅能让残疾人用户正常地与产品交互；还会为普通人提供更好的使用体验。
举个例子，住宅楼入口设置的坡道，本是方便使用轮椅的用户出入。但实际使用中，多数老人、推自行车的人，甚至正常人都更愿意走坡道而非楼梯，因为走坡道更省力。
所以坡道的设计，不仅解决了残疾人出入的问题，也为正常人提供了更好的体验。
△ 住宅楼入口坡道
二. 无障碍设计不是创新的阻碍
无障碍设计并不会强迫设计师把设计变丑，变无聊，变杂乱。相反，若能在考虑各种设计限制时，也同时考虑「无障碍设计规范」，会通过一些限定激发出新想法，促使设计师做出为所有人所用的更好产品。
我们要努力为所有人设计——包括盲人，色盲患者，视力低下患者；听觉失聪或有听觉障碍的人；有认知障碍的患者；为年长、年幼的人设计；为有明确目的的人、只是闲逛的人、单纯只为享受好的用户体验的人而设计。
△ Design for everyone.
做无障碍设计时，主要考虑以下 4 个主要方面：
- 视觉无障碍设计（visual）
- 听觉无障碍设计（hearing）
- 行动无障碍设计（mobility）
- 认知无障碍设计（cognition）
三. 视觉无障碍设计
「视觉障碍」包括：从难以区分颜色到完全失明。
设计要点：
- 确保文字、可交互控件和背景的对比度（contrast ratio threshold），满足最低标准。
- 别只用颜色传达信息（using solely color） ，让文字字号可调（ resizable）。
- 确保界面上所有的控件都可借助辅助技术（assistive technologies）使用，如屏幕阅读器，放大镜和盲文显示器（screen readers, magnifiers and braille displays）。 这就意味着必须让 accessibility APIs 可以通过程序确定每个控件的角色、状态、价值、标题。
详细阐述关键点：
1. ?确保文字和背景的颜色有足够高的对比度
根据According to the WCAG?标准，文字和背景色的对比度至少是4.5:1；如果是大于等于24 px/ 19 px bold 的文字，对比度至少是3:1 。这项规范可以帮助视力障碍用户更好地使用互联网产品。
△ Recommended contrast for web applications.
这是一个满足对比度标准的好案例：
△ Passing colors in Salesforce1.
Input 是常被人忽略的一个方面。下图7个 input 的例子，只有「Search Twitter」的对比度足够高，满足「无障碍设计标准」让人看得清。
△ Only the “Search Twitter” placeholder has the minimum required contrast level.
我在另一篇文章《色彩无障碍设计（Color Accessibility）之「对比度」的探索》中有详细阐述关于对比度方面的知识，包括概念介绍、实施方法、推荐工具。
2. 别只依靠颜色传达信息
不能单单只依靠颜色传达诸如「 状态指示、区分视觉控件、实时响应」等信息。如果只用颜色区分，可能会让一些用户不方便、甚至不能分辨2中颜色的区别。这些用户包括色盲患者（1/12 的男性，1/200 的女性）、视力低下患者（1/30 的人）、甚至盲人（1/188 的人）。
△ 不同视觉障碍患者看到的画面
推荐的做法是：同时使用多种视觉线索传达重要信息；只使用颜色强调或补充已经能看明白的信息。
举个例子，下面的 input 中，视力正常用户能轻易分清 Email 是错误状态，但色盲用户就完全看不出。
△ 左：正常用户所见；右：色盲用户所见
解决办法有很多种，比如：同时使用「颜色区分+标签+说明」，来表明哪个是错误状态。
△ 同时用颜色、标签、辅助说明来区分
办法是无尽的，原则是唯一的：别只用颜色区分。
Facebook 的 input 是个很好的例子：
△ facebook 的表单界面
同时使用了 3 种视觉线索区分错误状态：
- 红色边框。
- 叹号 icon。
- tooltip 提示，解释为什么出现错误。
3. 注意表单的设计
近几年，表单输入框的形式有了不小转变。现代风格的表单设计倾向于往极简主义发展，抛弃了传统表单的一些基本属性，比如清晰的边框，明显的标签——这大大降低了使用体验。
下图是传统输入框样式，界限明晰，标签清楚。中间可填充颜色也可不填充。
△ 一个合理的输入框
清晰的表单边框对于有认知障碍、视力低下的用户非常重要。清晰的视觉线索，会让他们很容易弄清楚输入框在哪，面积有多大。
下图是一个很流行的笔记app的输入框。
△ 如果我想搜索，我该点哪？用于强调位置的光标都被移除了。
上面这个界面中，点击「searching your notebooks」的任意一处，都可以开始搜索。
下面这个界面中，有 2 个 input field， 如果我想 「 tell your story」，我该点哪？
△ Where does one click to tell their story?
答案是只有点击蓝框框里，才能输入文字。点击蓝框以外的区域，没任何反应。
△ If you click outside of the blue box, nothing will happen.
下图这个笔记输入界面的例子，也没有传统的输入框。但标题是限定在2条水平线内的，并且用户可以点击下面的任意处开始输入笔记内容。
△ Non-standard, but still with enough cues for users with disabilities
4. 没标签的输入框
Text label 能告诉用户输入框的目的，placeholder 没这么大作用。
不推荐 placeholder 代替 text label 的输入框，输入内容时placeholder消失，会让用户忘记输入目的。
△ 不推荐的形式
推荐把 lable 拿到输入框外侧，时刻提醒用户自己输入的是什么。
△ 改进方式：Compound fields with visible labels
5. 可以用屏幕阅读器顺利使用你的 UI 控件吗？
这这主要针对：使用 Dragon NaturallySpeaking 等语音识别工具的视觉障碍用户。（有数据显示大概 1–2% 的用户会使用 屏幕阅读器（screen reader）
举个例子，如果你的「menu」只呈现一个图像icon，像这样：
△ menu
为了说明这是一个「菜单按钮」，它需要一个「文字替代方案」，比如「menu」来传达和图像相同的信息。可以使用 aria-label attribute, aria-labelledby attribute，或者直接写上「菜单」。 WebAIM Quick Reference 里提供了一些 general technical tips。
（aria-label 是一