可能是最全面的「无障碍设计」学习指南

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

在这个多样化世界上，并不是所有都能毫障碍、利地使用各品。

优的无障碍设计，不仅能让残疾人用户正常地与产品互；还为普通人提供更的使用验。

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

所以坡道的设，不仅解决了残疾人出入的问题，也常人提供了好的体验。

△ 住宅入口坡道

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

无障碍设并不会强迫设师把设变丑，变无聊，变杂乱。相反，若能考虑各种设限制时，也同时考虑「无障碍设规范」，会通过一些限激发出新法，促使设师出所人所用的好产品。

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

△ 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.

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 个操作图标。

△ Evernote list

在个案例中，我希望 4 个图标常驻显示在每条笔 card 上。也许图标以是绿，hover 时反。

△ One solution to the hovers used in Evernote

这解决方案也许还会被价「太重了」！

但请记住，并不只为计而计，是为各种各的、有着不同需求、不同条件、不同脑使用方式的用户而做计的。

7. 移动、闪烁的内容是否是可停止的？

界面上一直移动、滚动、闪烁超过5秒的内容，都应该可以被暂停、停止，或隐藏。

一般的，对于闪烁容，每秒闪烁次数宜超过3次。

8. 盲人户如何使只聊天的机器人（Chatbot）

这篇章探讨了这一问题：We need to talk about Accessibility on Chatbots，by：Caio Calado（2017.6.30）作者是一名 UX & Chatbot 设计师。

文章首先提出问题：How would a blind person use a chatbot? How would he or she interact wit it?

亲身测验Google’s Allo、 Slack、 Facebook、 VoiceOver 等产品在 iOS 上的 chatbot，效果并不尽人意。

提出：

If we want chatbots to be used by billions of people around the world, we need to make them accessible for everyone.

As an UX designer, I need to design in order to solve people’s needs and pains, not only and just for users’ goals.

如今，尤其像 Facebook 、 Google 、Twitter 等这样用户遍布全球公司，越来越关注障碍设计，Caio Calado相信这切在不久将来终将会被改善，他说：

I don’t know how, but if anything… I am here to help as well.

四. 听觉无障碍设计

「听觉障碍」包括：听清/听到到界面发的声音。

设计要：

• 本容容易被解，适当使「字替代」（ text alternatives ）。
• 确保界上所有空，在没有声音时（without sound），仍可正常使用。

五. 行动无障碍设计

「行动障碍」包括：不能操作鼠标、键盘、或触屏。

设计要点：

• 确保所有界面控件交互都可只通过键盘完成（ functionally accessible from a keyboard ）或者只使用鼠标；
• 确保界面控件被辅助技术（assistive technologies）正确标记；这些户可会使诸如语音控制软件（voice control software）和物切换控制（physical switch controls）等技术，这些技术一般使与屏幕阅读器（screen reader）等他辅助技术相同的API。

1. 提供可用键盘控制的「获得焦点」显示状态

些用户使用web 产品时，不方便使用鼠标，如果 web 产品可以仅通过键盘操作，会其好的使用体验。

计可以计一种符本网站风格、同能提供显视觉线索的「获得焦点」状指示，而不是仅仅使用浏览器的默认式。

Focus highlighting 应该只被于页面中的可交互元素，如输入框、按钮等。

△ Default visual focus states for Chrome and Firefox

问题是许多网站并没有自己设计「获取焦」状态视觉样，这于以使用键盘为主要浏览用户来说，体验很不好。主要为效太丑，而不满足「障碍设计规范」。

△ While ugly, this isn’t “caused” by accessibility.

下面例子是 BBC 的，用「blue bar」指示哪一个tab是当前的「获取焦点」状态。

△ BBC 的「获取焦点」状态

下面 Twitter 的例子，采用了3中方式结合的办法，显示「获取焦点」状态：

• 默认蓝框框。
• icon由灰变绿。
• tooltip。

提供了充足的视觉指示。

△ Twitter 的「获取焦点」状态

2. 弹窗

使用弹窗时注意，焦点元素弹窗内，非弹窗背后。

左错误法：用户法与弹窗交互；

右边正确做法：焦点落在2个按钮上，用户可选择相应操作，或者关闭弹窗。

3. hover 的焦点状

如果一个素需要hover 才能显示更多操作，那当键盘控制焦点落在该素上，要显示出hover 触发的更多操作。(可以和前文 「1.6 别让用户 hover 才能找答案」结着)

好范例：facebook。

△ Facebook 的「获取焦点」状态

keyboard only users 把焦落在 「like」上时，会显示出 hover 时展示更多表情。

反例：Product Hunt。焦点落在「share」「save」控件上时，不显示任何hover触的更操。

△ Product Hunt 的「获取焦点」状态，没展示出更操

下面误两种法的比较：

左错误法：Focus states 完全忽视 hover actions，直接跳到下一 focus element。

右边正确做法：Focus states 允许用户hover 触发的动作交互。

还有一个较好的例子是 Gmail：

△ Gmail 的「获取焦点」状态，显示更多操作

个条目在「焦状态」时：

• 都有特定的、明显的状态区分（左侧的 blue bar）。
• hover 时更多操作，在「焦状态」时自动显示。
• 只有操控件有「焦点状态」。

4. 快捷直达容的操作

对于仅键盘的户，如果每次都他们依次中每个控件才到达容，使起来是很痛苦的。

比如这个blogging 平台：

△ Medium 早期首页

比的做法是在最开始，提供一个捷径，让焦点直接跳转至内容。

比如 AirBnB 这样：

△ Airbnb 首页

左边：获得焦点之前的普通状。

右边：激「获得焦点」在最开始供一个项，直接跳转至容，无需依次路过每一个tab菜单。

5. 重获得焦点的场景（re-focus）

当一个控件从界面上被删除后，焦点应该显示在「周围与被删除相」的控件上。

不好做法是删除个元素后，让焦从前元素消失，回到页顶部。这样话，用户新走遍 focus 从顶部移动到前位过程。

左边误做法：删除「1」后，焦消失。

右边正确做法：删除「1」，焦点显示在「2」上。

6. 持使用的一致

是「无障碍设计」中一个很重要的问题。

详细可参考 W3C’s Authoring Practices for Design Patterns详细解释。这关于如何创建许多常见设组件的「无障碍设」指南，包括单、对话框、自动完内、树形结构。每种组件模式都一套相应的 HTML 语言、键盘操作， ARIA 属性。 ARIA 属性明了用户如何使用键盘与屏幕的组件交互。

动完成输入模式（autocomplete）：用户在输入框输入一些内容，下面动显示一列经过筛选的相关结果。用户可以用上下箭头或者鼠标定位或选择列表中的一个项目。

面看「自成输入」的例子：

△ A simple autocomplete typeahead

下这是前加了 icon 自动完成输入显示列表：

△ icon 被用来强调区

下面是个混乱的自动完成模式案例：用户不仅以从滤的列表中选择一个项目，还以通点击「铅笔」或「垃圾桶」图标来编辑或删除每个列表项。 两个按钮的添加让「自动完成」输模式变得混乱。

△ An autocomplete with a hidden feature set that cannot be communicated to assistive technology through standard techniques.

问题主因：打乱了自动完输入模式的键盘使用行。「选择」+「操作」的重操作易造使用混淆，也不便于键盘控制。

相似的规则也适用于menu。

面的2个例子中，右边的才是真正的 menu，左边的实是个 non-modal dialog（非模态对话框）。（根据 W3C’s WAI）

Menu 是一种 为户供一列择的 widget。如果我们为每一行进多重操作（像左边例子），那它就再是 menu 了。这会改变键盘的操作行为，从单纯使 arrow key，到 还需使 tab key；同时会改变键盘获取焦点的处方式，如当 dropdown 收起后，键盘获取焦点的显示位置就同。

若能弄两者区，以及用户体验影响，模态话框也可以做到满足「障碍设计」标准。理解个微小设计变化，如何改变用户交互模，会帮助你为自己品选择合适交互模。

六. 认知无障碍设计

「认知障碍」意味着用户可能需要辅助技术（assistive technologies）来帮助他们阅读文本，此文本替代案（ text alternatives）存在常必要。

设计要点：

• 避免复或闪烁显示，为这可能会为认知障碍用户造成使用不便（issues）。
• 给用户留出充的时间操（ repetitive ）。

七. 「无障碍设计」自查清单

Is your UI component accessible?

• Visual：界面上的控件、文字的对比度是否满 WCAG 最低标准？界面去掉颜是否以正常使用？ 确你的 UI 组件以被不能辨识颜的用户使用。 一个叫 SEE 的 Chrome 扩展程序以模拟盲用户看到的界面，Daltonize extension 也有类似功能。
• Visual：界面组件可以「高对比度模式」下作吗？时下常用的操作系统都支持高对比度模式。「High Contrast」一 Chrome extension ，可以模拟测试。
• Visual：可以用「屏幕阅读器」使用所有 UI 控件吗？是否提供了所有可见文本息的 文本替代方案（text alternatives ）？你用 ARIA 增加了语义息吗？（ semantic information）
• Hearing：你的户界面组件可无声地工作吗？ 闭扬声器全工程使测试。
• Motion：所有 UI 控件，是否可以过键盘操作？是否能避免用户陷入「焦陷阱」（focus traps）？能否键盘操作做出合适响应？

最后

Web 的一大作用就是更好地实现了人人之间的交流作，「无障碍计」在其中扮演着重要的角色。

许你觉得在你的设计中要考虑这些种种规则，限制了你的创。

如这些规范限制将你创造力极限，你很有可能会做出既美观，时能满足更广泛群使用设计。如关注正确，你会发现在任何挑战前，都可以去寻找系列解决办法，去满足主管、销团队、Dribbble followers、等所有用户括残疾需求。

“Do the hard work so our users don’t have to”, 是 Gov.UK platform 最初的设计原则之一。

「英雄所见略同」的还这段话：

Doing the hard work to make a service work well for everyone will make your service better   for everyone. ——Tom Loosemore, Group Director of Digital Services, The Co-Op

也许目足够的时间预算「无障碍设」，但只把「无障碍设」当日常作考虑的标准的一部分，就会惊喜发，其实能够满足很多无障碍设标准。

将问题解为可实施的任，可以一步步近终极目标。比如，使用「对比度测工」测你的色板，进而选用对比度更科学的颜色；写容易理解的文字；使用容易清的字体；把内容规划得清清楚楚，让不同模块之间一致贯；尽量减少计中的杂乱等散注力的西；写有用的说文案……

改善有你改善的，影响团队中的他人，很快，你就会感觉到你的产越来越好。要低估自己做的改变。

Doing something is always better than doing nothing, every small change simply means your product is better optimised, with more people able to have a good experience with it. ——Ian Hamilton, Accessibility Specialist