什么是「无障碍设计」，为什么它这么重要？

之前整理「色彩对比度」相关内容时，连带学习了「无障碍设计」的知识，这次一起整理分享出来。一共分视觉、听觉、行动、认知四个方面来阐述。

一. 什么是「无障碍设计」，为什么它这么重要？

在这个多样化的世界上，并不是所有人都能毫无障碍、顺利地使用各种产品。

优秀的无障碍设计，不仅能让残疾人用户正常地与产品交互；还**为普通人提供更好的使用体验。

举个例子，住宅楼入口设置的坡道，本是方便使用轮椅的用户出入。但实际使用中，多数老人、推自行车的人，甚至正常人都更愿意走坡道而非楼梯，因为走坡道更省力。

所以坡道的设计，不仅解决了残疾人出入的问题，也为正常人提供了更好的体验。

△ 住宅楼入口坡道

二. 无障碍设计不是创新的阻碍

无障碍设计并不**强迫设计师把设计变丑，变无聊，变杂乱。相反，若能在考虑各种设计限制时，也同时考虑「无障碍设计规范」，**通过一些限定激发出新想法，促使设计师做出为所有人所用的更好产品。

我们要努力为所有人设计——包括盲人，色盲患者，视力低下患者；听觉失聪或有听觉障碍的人；有认知障碍的患者；为年长、年幼的人设计；为有明确目的的人、只是闲逛的人、单纯只为享受好的用户体验的人而设计。

△ 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 是一個 HTML attribute，用來告訴讀屏軟件某個元素是什麼，提升 Web Accessibility）

任何图像形式的 UI 控件，都需要为图像提供一个「文字替代方案」。

6. 别让用户到处 hover 才能找到答案

这主要针对：

• 使用 Dragon NaturallySpeaking 等语音识别工具的视觉障碍用户。
• 有行动障碍的用户，包括视力正常的 keyboard-only user。

键**用户和诸如 Dragon 这样的辅助技术，依靠的是屏幕上可见的交互组件。如果一个链接或按钮在屏幕上不可见，则不可能口头告知「clidked」。如果一个 keyboard-only user 在一个页面上看不到按钮，怎么才能通过一个空白区域导航去想去的地方？

下图是使用 Dragon Naturally Speaking 的 Gmail 截图，叠了一层有数字编号的**链接。用户可以说出数字，并与相应的链接交互。如果一个链接默认不显示，只有 hover 时才显示，那可能就只能在空白处显示一个数字。

△ Dragon Naturally Speaking 的 Gmail

这种「hover 后才显示」的可操作控件的做法很受欢迎。它可以作为计算机科学家艾伦·凯（Alan Kay）所提出的成熟的可用性启发法（well-established usability heuristic）的解决方案。

Simple things should be simple, complex things should be possible. ——Alan Kay

这种启发法（heuristic）说得对，但所谓的复杂性应该对所有用户（包括残疾人）都是可能的。

不幸的是，对于无障碍设计，许多人都认为应该符合如下说法（这不是 Alan Kay 说的）：

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

尽量在设计中采用更有包容性的做法，比如：

• 将辅助操作（secondary action）放置在菜单内，或非模态对话框 (non-modal dialog) 内，而不是只有 hover 才能触发。
• 适当减轻次要图标（secondary icon）的对比度，并在 hover 时加强对比度。
• 在 hover 时，采用更加明显的、或比 normal 尺寸更大的形状显示。
• 一个意义明确的图标（info icon）是比一**空白（ white space） 更好的触发「填写内容」的 hover 方式。

案例1：Linkedin 「我的」个人主页

下面是Linkedin的一个例子。 以下是作者的个人资料页面中的屏幕截图。

△ Jesse’s LinkedIn profile banner

下面是鼠标 hover 时的效果：

△ His LinkedIn profile banner with hover states revealed

立刻出现了一些视觉提示，告诉我可以分别编辑这张card上的许多信息，包括姓名、职位、之前工作、教育经历、个人头像照**。

当我在某一项上 hover 时，那一项就变成蓝色，告诉我它准备好被点击了。

△ Title turns blue on hover.

这种做法不太符合「无障碍设计」原则。

下面，是为满足「无障碍设计」做的一个改进方案。我在每一项后面都放上更小的铅笔图标，他们一直显示。

△ One solution. Show smaller, gray pencils always for in-line editable fields.

当我在某一项上 hover 时，整条项目变蓝。

△ Show the same blue row on hover and keyboard focus.

也许，多数设计师看到我的修改方案时，都**问：这**不**太重了啊？（“That’s kind of heavy, isn’t it?”）

也许是的。但这只是这个问题的其中一种解决办法。

更进一步说，这只存在于我自己的 porfile page。一个人**花多少时间看自己的 LinkedIn profile？这种所谓的「感觉重」，和是全局的无障碍设计是同等重要的吗？如果我们不喜欢加铅笔图标这种解决办法，我们还可以想出其他什么解决方案呢？

案例2：Evernote 笔记列表

下面是另一个例子，Evernote。这是笔记列表。只有 hover 时，才**显示 4 个操作图标。