这篇文章的审校工作是由Mallory van Achterberg完成的。谢谢所有SitePointer的审校者，因为你们，SitePointer才能提供如此优质的内容。
在 上一篇文章 中，我演示了如何创建一个有多选功能的Web组件。读者在评论区域提到了Web组件无障碍这个重要的话题。毋庸置疑地，如今Web无障碍非常重要。所以，让我们来看看无障碍的含义，以及如何提高Web组件的可访问性（通过一个真实的例子）。
本文中的代码示例将基于上一篇文章中的代码。你可以从 GitHub仓库 复制一份，也可以查看本文结尾的 例子 。
提高Web组件可访问性的必要条件
组件的可访问性通常涉及以下方面：
标签语义化 键盘支持 视觉无障碍让我们更深入地了解各个方面。
标签语义化
你应该听说过屏幕阅读器。屏幕阅读器通过大声播放屏幕上展示的内容，帮助盲人或弱视群体使用应用。现在有很多屏幕阅读器，例如Windows的 NVDA 和 JAWS ，Chrome的 ChromeVox ，以及OS X的 VoiceOver 。
当元素获得焦点时，屏幕阅读器会将该元素的相关信息朗读给用户听。因此，当浏览器的焦点落到 时，用户能通过视频阅读器了解到他们正在应对一个文本输入框（可以输入内容的东东）。但如果焦点落到了一个空的 <div> 上，那么屏幕阅读器不会报道任何信息。
为了解决这个问题，我们可以参考 WAI-ARIA （Web无障碍标准计划 - 无障碍富互联网应用），通过添加特殊的ARIA属性提高组件标签的语义化。这些额外语法能帮助阅读器分辨界面上的属性、关系和状态。ARIA的详细使用说明可以在 WAI-ARIA开发实践 找到。
键盘支持
我们对键盘支持的目标是可以完全通过键盘使用组件。WAI-ARIA为 许多UI控件 定义了行为和键盘交互方式。如果想知道组件应支持什么按键，可在文档中寻找并参考类似组件。例如，多选组件与 组合框 类似。
除了支持键盘操作，我们还应主动提示用户如何使用按键操作组件（例如，在应用中提供指引）。
视觉无障碍
这里会介绍组件的视觉无障碍问题。请保证你能对以下问题回答“是”：
所有元素和文字都足够大，能被看清楚吗？ 组件在高对比模式下是否能清晰传达信息？ 若组件没有颜色，是否能被正常使用？记住，并不是所有有视力障碍的用户都 完全看不见 。有相当一部分用户是弱视或色盲。
提高多选Web组件的可访问性
现在，我们将通过前面提到的方法，提高多选组件的可访问性。以下是具体的步骤：
扩展标签语义 添加键盘支持 验证视觉可访问性别忘了，你可以在文章的底部查看组件示例，或者通过 GitHub仓库 下载代码。
所有的代码片段都可以通过 multiselect.html 获取扩展标签语法
经验表明，我们最好优先使用原生HTML元素，而不是自定义组件。如果你可以使用内置无障碍功能的原生HTML控件，那么就尽量使用它。万不得已时，再自定义组件并使用ARIA属性。 在HTML页面中使用WAI-AIRA避免冗余 中有更详细的说明。
在这个例子中，多选组件是一个自定义组件，因此，我们需要使用ARIA属性。首先，让我们在 ARIA文档 中找到类似的组件。貌似多选组件与复合框组件比较相似。那么，根据 复合框描述 ，看看我们需要添加哪些ARIA属性。
根据指引，我们需要添加以下角色：
role="combobox" 组件的根元素 role="listbox" 选项列表 role="option" 下拉列表中的每一项需要添加的ARIA状态属性：
aria-expanded="true/false" 为根元素添加该状态，以表明组件是打开还是关闭状态 aria-selected="true/false" 为下拉列表的每一项添加该状态，以表明选项是否被选中我们可以直接将 combobox 和 listbox 角色添加到组件的标签中：
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114990