HTML中的aria属性究竟是干什么用的？

在前端有个accessiblity的维度，就是这个界面要让尽可能让所有用户都能使用，包括视障或者无鼠标用户。想要体验一个界面的accessiblity，我们可以在chrome浏览器安装ChromeVox并打开这个插件。

你会看到黄色的框聚焦到你选中的组件上，浏览器会把这个组件的信息读出来。

下面我写一个最基本的select：

html 复制代码

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
</select>

页面上我会看到这样：

我会听到一句英文描述这个组件: "'volvo', combo box one of two."。这样我就能知道这是个combo box(select)组件，里面的值是"volvo"，也是这个select里的两个选项中的第一个选项。

如果我在这个select加上这样的aria属性：

html 复制代码

<select name="cars" id="cars" aria-expanded="true">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
</select>

我们便会听到她说这个组件是expanded。

aria属性就是用来给浏览器reader识别内容的。MDN将aria属性分为了四类，我总结了所有的属性和用处。

小部件属性

通用于所有html元素。

aria-autocomplete：
- 用于：combobox，searchbox，textbox
- 用途：表示这个输入框是否可以显示预测的文本。
- 用法：
  - aria-autocomplete="line"：显示单个预测值
  - aria-autocomplete="list"：显示一列预测值
  - aria-autocomplete="default"：两个都可以
  - 默认为none
aria-checked：
- 用于：checkbox，menuitemcheckbox，radio，menuitemradio，switch
- 用途：表示这个输入框是否是勾选的。
- 用法：
  - aria-checked="true"：勾选着的
  - aria-checked="false"：未勾选着的
  - aria-checked="mixed"：indetermined半勾选状态，只适用于checkbox一类的组件
  - 默认为undefined
aria-disabled：
- Global 所有元素通用
- 用途：是否为禁用状态
- 用法：aria-disabled="true"/"false"
aria-errormessage：
- Global 所有元素通用
- 用途：提供错误信息
- 用法：
  - 需要先设aria-invalid="true"
  - aria-errormessage="${id}"，id是显示错误信息的元素
aria-expanded：
- 用于：menu，dialog，accordion
- 用途：表示那个控制器是否展开着
- 用法：<button aria-expanded="false" aria-controls="id">Show widget</button>
aria-haspopup：
- Global 所有元素通用
- 用途：表示是否会有popup出现（tooltip不算）
- 用法：值可以是：false, true, menu, listbox, tree, grid, dialog
aria-hidden：
- Global 所有元素通用
- 用途：表示是否隐藏了，一般不应该被浏览器找到
- 用法：值可以是：false, true, undefined，如果设置了hidden属性，就不用设置这个了
aria-invalid：
- Global 所有元素通用
- 用途：值是否不符合规定
- 用法：
  - aria-invalid="true"/"false"：值是否符合规定
  - aria-invalid="grammar"：值有语法错误
  - aria-invalid="spelling"：值有拼写错误
  - 默认为true
aria-label：
- Global 所有元素通用
- 用途：用不可视的方式给元素加标签，可视的话用aria-labelledby
- 用法：值为string
aria-level：
- 用于：heading，tree，nested grid，nested tablist等
- 用途：给一段dom里的元素定义层级
- 用法：
  - <div role="heading" aria-level="3">Heading for this sub section</div>：与role合用，表示第3级的heading
  - 在treegrid里表示嵌套到第几层
  - 值为integer
aria-modal：
- 用于：modal，dialog，alert
- 用途：表示是否是一个弹窗
- 用法：值为boolean
aria-multiline：
- 用于：textbox，textarea
- 用途：输入框是否可以写多行文本
- 用法：值为boolean
aria-multiselectable：
- 用于：可以被选的组件，包括select
- 用途：表示是否可以多选
- 用法：值为boolean
aria-orientation：
- 用于：默认横向：slider，tablist，toolbar，menubar；默认竖向：scrollbar，tree，listbox，menu
- 用途：表示元素排列的方向
- 用法：值为：horizontal, vertical, undefined
aria-placeholder：
- 用于：input，textarea
- 用途：表示一个提示用的短语
- 用法：值为string
aria-pressed：
- 用于：button
- 用途：表示按钮是否正在被按着
- 用法：值为：true, false, mixed, undefined
aria-readonly：
- 用于：可以交互的元素
- 用途：表示只读，与disabled不同，可以focus和copy
- 用法：值为boolean
aria-required：
- 用于：除input，select，textarea（这些有required属性）以外的可输入组件，div也可以
- 用途：表示为必填项
- 用法：值为boolean
aria-selected：
- 用于：gridcell，option，row，tab
- 用途：是否被选中
- 用法：值为boolean
aria-sort：
- 用于：table，grid
- 用途：按什么顺序排序
- 用法：值为：ascending，descending， other，none
aria-valuemax：
- 用于：meter，scrollbar，slider，spinbutton
- 用途：定义范围的上限
- 用法：值为number
aria-valuemin：
- 用于：meter，scrollbar，slider，spinbutton
- 用途：定义范围的下限
- 用法：值为number
aria-valuenow：
- 用于：meter，scrollbar，slider，spinbutton
- 用途：定义当前值
- 用法：值为number
aria-valuetext：
- 用于：meter，scrollbar，slider，spinbutton
- 用途：用text表示当前范围的值
- 用法：如aria-valuetext="8% (34 minutes) remaining"

活动区属性

活动区是指页面中被更新了的区域。

aria-busy：
- Global 所有元素通用
- 用途：表示组件正在变化，需要等到变化完成，可以用在提交表单时
- 用法：值为boolean
aria-live：
- Global 所有元素通用
- 用途：表示这个元素将要更新
- 用法：
  - aria-live="assertive"：优先级高，将立马呈现
  - aria-live="polite"：将在比如句子说完之后呈现
  - 默认为off
aria-relavant：
- Global 所有元素通用
- 用途：将会触发活动区的改变
- 用法：
  - aria-relavant="additions"：被加到accessibility tree（视觉的dom tree，听觉的accessibility tree）的元素
  - aria-relavant="all"：additions removals text的缩写
  - aria-relavant="removals"：从accessiblity tree中移除的文本
  - aria-relavant="text"：被加到accessibility tree的任意子节点的文本
  - aria-relavant="additions text"：被加到accessibility tree的任意子节点的文本
aria-atomic：
- Global 所有元素通用
- 用途：将会以怎样的方式呈现活动区的变化
- 用法：
  - aria-atomic="false"：（默认）指呈现改变的节点
  - aria-atomic="true"：呈现整个变化的区域

拖放属性

参考Drag and Drop API

aria-dropeffect：
- Global 所有元素通用
- 用途：可以被drop
- 用法：
  - aria-dropeffect="copy"：将原对象复制进来
  - aria-dropeffect="execute"：调用绑定的方法
  - aria-dropeffect="link"：创建一个link（可用于拖拽文件后，显示文件名）
  - aria-dropeffect="move"：原对象在原来的位置被移除
  - aria-dropeffect="none"：（默认）没有任何行为
  - aria-dropeffect="popup"：弹一个popup
aria-grabbed：
- Global 所有元素通用
- 用途：是否正在被拖拽
- 用法：值为boolean

关系属性

aria-activedescendant：
- 用于：复合组件，combobox，textbox，group，application
- 用途：当focus时，决定哪个元素是active的
- 用法：值为string，与active组件的id对应
aria-colcount：
- 用于：table，grid，treegrid
- 用途：定义列数
- 用法：值为integer，如果不知道，为-1
aria-colindex：
- 用于：table，grid，treegrid
- 用途：定义列的序号
- 用法：值为大于0的interger
aria-colspan：
- 用于：table，grid，treegrid
- 用途：同td，th的colspan，但用在非原生table元素
- 用法：同td，th的colspan
aria-controls：
- Global 所有元素通用
- 用途：控制其他的组件
- 用法：值为string，与被控制组件的id对应
aria-describedby：
- Global 所有元素通用
- 用途：连接描述性元素
- 用法：值为string，与描述组件的id对应
aria-description：
- Global 所有元素通用
- 用途：元素的描述
- 用法：和aria-label相似，但通常更长
aria-details：
- Global 所有元素通用
- 用途：补充信息，连接详细信息的元素
- 用法：值为string，与详细信息组件的id对应
aria-errormessage：
- 参考小部件组件里的aria-errormessage
aria-flowto：
- Global 所有元素通用
- 用途：连接下一个元素，通常用tabindex，罕见时用aria-flowto，表示accessibility tree里的顺序
- 用法：值为string，与下一个组件的id对应
aria-labelledby：
- Global 所有元素通用
- 用途：指向可以代表此元素的label的元素
- 用法：

html 复制代码

<div id="name">Name</div>
<input type="text" aria-labelledby="name" />

aria-owns：
- Global 所有元素通用
- 用途：定义dom树中的父子关系
- 用法：值为string，与子组件的id对应
aria-posinset：
- 用于：listitems，treeitems
- 用途：在并列结构中定义序位
- 用法：值为大于0的interger
aria-rowcount：
- 用于：table，grid，treegrid
- 用途：定义有多少行
- 用法：值为integer，如果不知道，为-1
aria-rowindex：
- 用于：table，grid，treegrid
- 用途：定义行的序号
- 用法：值为大于0的interger
aria-rowspan：
- 用于：table，grid，treegrid
- 用途：同td，th的rowspan，但用在非原生table元素
- 用法：同td，th的rowspan
aria-setsize：
- 用于：listitems，treeitems
- 用途：定义item的数量
- 用法：值为integer，如果不知道，为-1

结尾

这些属性不仅仅为了视障人群，也可以用作自动化测试，自动化测试时，会用脚本控制无头浏览器模拟用户的行为，那么如何能拿到特定的元素呢，比如某个列表的第3项，也会用到aria属性，所以工程化开发时，最好还是要规范定义aria属性。