ARIA 实践指南（1）

编者按：本文作者：安佳，360 搜索事业部的前端开发工程师，W3C CSS 工作组成员。

ARIA

ARIA，Accessible Rich Internet Applications，可访问的富 Internet 应用程序。

ARIA 属于可访问性语义的范畴。从功能上来说，ARIA 的 roles、states 和 properties 类似于辅助技术的 CSS。对屏幕阅读器而言，ARIA 控制着它们的非视觉体验的渲染。

举个例子：这段 HTML 代码

<button>保存</button>

屏幕阅读器会读成：

如果按钮是用<span>标签模拟的，即：

<span>保存</span>

此时，屏幕阅读器就不认识它了。若想告诉屏幕阅读器这个 HTML 元素也是一个“按钮”，则需要指定元素的 ARIA role。如下：

<span tabindex="0"

      role="button">保存</span>

此时，屏幕阅读器也会读成：

我们注意到，HTML 代码里还有一个属性tabindex="0"，它表示该元素是可聚焦的，是可以通过键盘访问到的（更多内容请查阅 tabindex）。

与此相比，<button>保存</button>没写tabindex="0"却可以被键盘访问到，也可以被屏幕阅读器识别，这是因为 HTML 内置了这些功能。自带键盘可访问性的标签有<a>、<button>、<label>以及表单元素。键盘可访问包括按 tab 键能让页面中的元素获得焦点、按 Return/Enter 键能激活该元素、表单元素<select>在获得焦点时按方向键可以上下切换选项。

我们要做的

所以，在使用 ARIA 时，我们要做的就是：

• 确保可访问性语义，让屏幕阅读器能认识该元素，即给 HTML 标签指定合适的 ARIA 的 role、state 及相关的 properties。这部分是纯 HTML 的

• 确保键盘可访问性，为每个 ARIA role 定义预期的行为，即管理键盘焦点、提供键盘交互。这部分是 JS 和 HTML 的

作为《ARIA 实践指南》系列文章的第一篇，本文就先介绍两种最基本的控件：链接和按钮。

链接

role="link" 提供一个超链接，可以是其它页面、网页内锚点、文件、邮箱、电话等。

键盘交互：

• enter：链接跳转，并将焦点移到链接目标处

在日常开发中，一般不用其它 HTML 标签去模拟超链接，而是直接使用原生的<a>，这是因为浏览器一般都会自带一些有价值的功能，比如在新窗口中打开目标、将目标URL复制到系统剪贴板等。

考虑到使用 ARIA 模拟链接的场景少之又少，此处就不展开介绍了。

按钮

role="button" 允许用户触发一个事件或者操作，比如提交表单、打开对话框、执行删除操作。如果激活按钮是打开对话框，那按照惯例，按钮的文案后面常跟着“...”，比如“另存为...”，文件的“浏览...”。

除了普通按钮之外，ARIA 还支持另外两种类型的按钮：

• 切换按钮：它有两种状态“开启-关闭”。若按钮设置了状态 aria-pressed，那么辅助技术会视此按钮为切换按钮。当切换按钮的状态发生变化时，建议按钮对应的 label 别变；如果 label 会发生变化，那就可以不写aria-pressed了

• 菜单按钮：如果按钮的 aria-haspopup 属性设置成了menu或者true，那么辅助技术会视此按钮为菜单按钮（会在后续章节里介绍）

ARIA 相关：

• role=