前言
许多人不知道，在日常的网页开发当中，还需要考虑到一些特殊的用户群体，比如视力障碍、听力障碍、运动障碍等需要特殊对待的人群。为了让网页适配这些用户，W3C 在 HTML5 规范中引入了 ARIA 属性，使得网页能够更好地适应需要特殊对待的人群。
本文将通过实际案例来详细讲解 HTML5 规范中使用 ARIA 属性的方法。
HTML5 规范介绍
HTML5 规范于 2014 年公开发布，针对现代化的 Web 应用程序，扩展了 HTML4 的功能，增强了表单控件，引入了 Canvas 元素，更加多样且优雅地支持多媒体等等。另外，HTML5 还在规范里加入了 ARIA 属性来支持无障碍给予设备和软件。
HTML5 规范中的 ARIA 规范定义了一些属性，具有以下几大特点：
- 增强了易于访问特殊用户
- 改善了一般用户的易用性
- 简化了 Web 应用程序开发
- 简化了可维护性
ARIA 规范
ARIA 规范定义了一组能够让开发者定义语义结构以及元素角色和状态的属性。这些属性提供给开发者一个更好地了解无障碍用户所使用的设备与软件的其它元素。它允许开发者根据这些元素的角色和状态快速构建改进的无障碍体验。
以下是一些主流的 ARIA 规范属性：
role
role 属性允许开发者描述一个元素的角色，主要有以下几种类型：
- tab：标签页。
- alert：警告。
- button：按钮。
- combobox：下拉框。
- link：链接。
- checkbox：复选框。
一般来说，可以使用常规的 HTML 元素去表示这些角色，但对于一些自定义元素，role 属性能够明确定义它的角色。
例如，想要实现一个自定义的下拉框，可以这样做：
<div role="combobox" aria-expanded="false" aria-controls="mylist" tabindex="0">选择一个选项</div> <ul id="mylist" style="display: none;"> <li>选项 1</li> <li>选项 2</li> <li>选项 3</li> </ul>
这段代码中，我们定义了一个 role 为 combobox 的 div 元素，aria-expanded 属性为 false，表示下拉框不展开，用户需要点击才能展开。跟着这个元素，我们在下方又定义了一些选项，利用列表 ul 元素并设置 aria-controls 属性与上述 div 元素 id 一致，以确定相关联，利用 CSS 控制样式。
aria-label
aria-label 属性提供了一个元素的文本描述，给那些无法使用标签或上下文的辅助技术用户使用。设置 aria-label 属性可使辅助技术使用者获取内容。
例如，想要实现一个自定义的搜索框，可以这样做：
<div role="searchbox"> <input type="search" aria-label="search"> <button>搜索</button> </div>
这段代码中，我们定义了一个 role 为 searchbox 的 div 元素，它包含一个搜索输入框和一个搜索按钮，并给搜索输入框设置了 aria-label 属性，使屏幕阅读器能够读出“search”文字。
aria-hidden
aria-hidden 属性用于指定一个元素是否对屏幕阅读器不可见。它的取值为 true 或 false。
例如，想要实现一个弹出窗口：
// javascriptcn.com 代码示例
<div id="mymodal" role="dialog" aria-hidden="true">
<header>
<h3>通知</h3>
</header>
<div>这是一条消息。</div>
<footer>
<button>关闭</button>
</footer>
</div>这段代码中，我们定义了一个 role 为 dialog 的 div 元素，表示这是一个弹出窗口，并在外面使用了 aria-hidden="true" 隐藏了这个元素。当弹出窗口需要显示时，我们通过 JavaScript 设置 aria-hidden="false" 即可展现出弹出窗口。
总结
以上是无障碍 W3C HTML5 规范及 ARIA 规范学习指南，希望通过代码实例的方式，让开发者学到如何使用规范和属性，从而让 Web 应用程序更加无障碍友好。
对于无障碍性，前端开发者需要时刻注意。我们不要只考虑一般用户的需求，更应该考虑那些有特殊需要的用户群体。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65336b517d4982a6eb6f33e0