详细可参考 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?