无障碍开发系列之WAI-ARIA
欢迎访文我的博客YangChen’s Blog
趁着今晚有空把我挖的无障碍开发系列这个坑填了。
WAI-ARIA是无障碍开发的一个关键点，它主要解决的就是残障人士无障碍的访问页面的问题。
回到第一篇文章无障碍开发系列之隐藏内容访问里面提到的一些问题，例如：
- 对于一些模拟标签，例如用a标签写button，如何让读屏器读出这是button而不是链接。
- 如何让盲人朋友知道焦点所在的区域是导航栏还是表单区域。
这里面主要的用到的就是WAI-ARIA，所以呢，知道有多重要了吧。
什么是WAI-ARIA
引自下百度百科的定义
WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。她主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容。
值得一提的是ARIA可不是小众，它是W3C的一个标准且一直都在更新，对于IE8+和几乎全部的主流浏览器都做到了良好的支持，而且一些注重体验的网站，对于WAI-ARIA更是普遍。
概括性的描述下就是
- ARIA是W3C的一个独立规范，帮助Web应用程序和Web页面变得更具可访问性
- ARIA主要是为了提升网页的可用性，网页对残疾人士的无障碍化
- HTML5已经开始使用ARIA，并且W3C发布的很多其他标准也开始使用ARIA
- ARIA 是对 HTML 语义化的补充。它具备比现有的HTML元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确
- ARIA 规范为浏览器和解析HTML文档的辅助性技术提供了一种可以让人们以多种方式访问和使用Web的标准方法
怎么使用WAI-ARIA
ARIA主要由两部分组成，分别是：
role(角色)，标示这个dom元素是做什么用的aria-属性描述了与之有关的事物（特征）及其是什么样的（状态）
举个bootstrap官网的例子吧：
<a class="btn btn-default dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown</a>这是下来菜单的一段局部代码，在这里面我们就能看到aira在里面的应用，例如role="button"代表这个a标签是个按钮，不能当做链接来解读。aria-haspopup="true"这个表示点击这个dom元素后，会出现菜单或者是浮动元素。aria-expanded="true"表示当前元素是展开的。
通过WAI-ARIA的标记，页面的无障碍可访问性就会大大增强，读屏器也能够充分的理解页面想要表达的内容，而且使用起来也很方便。
role属性
| role属性 | 含义 | HTML示意 |
|---|---|---|
| alert | 表示警告 | <div class="alert alert-warning" role="alert">...</div> |
| dialog | 表示Modal弹出窗 | <div class="modal" tabindex="-1" role="dialog">...</div> |
| presentation | 表示描述 | <h1 role="presentation">text</h1> |
| application | 表示应用 | <div class="application" role="application">...</div> |
| button | 表示按钮 | <span class="btn" role="button"></span> |
| checkbox | 表示复选框 | <div class="checkbox" role="checkbox"></div> |
| radio | 表示单选按钮 | <div class="radio" role="radio"></div> |
| combobox | 表示表单控件 | <input type="text" role="combobox" > |
| grid | 表示网格 | <div aria-readonly="true" role="grid"><table role="presentation"></table></div> |
| gridcell | 网格单元格 | <tr role="row"><td role="gridcell">Fido</td></tr> |
| group | 表示组合并 | <div class="btn-group" role="group" aria-label="First group">...</div> |
| heading | 表示标题 | <div class="page-title" role="heading" aria-level="1"></div> |
| listbox | 表示列表框 | <ul role="listbox" aria-expanded="true"></ul> |
| menu | 表示菜单 | <ul role="menu" aria-hidden="true"></ul> |
| menubar | 表示菜单栏 | <ul role="menubar"><li role="menuitem"><ul role="menu" aria-hidden="true"></ul></li></ul> |
| menuitem | 表示菜单项 | <ul role="menubar"><li role="menuitem"><ul role="menu" aria-hidden="true"></ul></li></ul> |
| menuitemcheckbox | 可复选的菜单项 | <ul role="menu" aria-hidden="true"><li role="menuitemcheckbox"></li></ul> |
| menuitemradio | 表示只能单选的菜单项 | <ul role="menu" aria-hidden="true"><li role="menuitemradio"></li></ul> |
| option | 表示选项 | <ul role="listbox" aria-expanded="true"><li role="option"></li></ul> |
ARIA属性
| 属性名 | 属性值 | HTML示意 | 说明 |
|---|---|---|---|
| aria-activedescendant | 字符串(后代元素的id值) | <div class="toolbar" aira-activedscendant ="button1"><img src="btn.png" role="button" id="button1"></div> |
aria-activedescendant属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取焦点。在这个示例中，id=”button1”的按钮控件先获取焦点 |
| aria-atomic | 字符串。表示区域内容是否完整播报。值为true和false。值为true时，读屏软件会把整个区域内容都播报出来，如果为false则表示只需要播报修改的部分。 | <div role="heading" aria-live="assertive" aria-atomic="true"></div> |
这里的aria-atomic为true，则表示当时间改变的时候，日期的年月都要完整播报出来，不要只改了月份就播报月份的内容。 |
| aria-autocomplete | 字符串，表示用户的文本框的自动提示是否提供，可选值有inline、list、both和none | <input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" /> |
aria-autocomplete对应HTML5中的autocomplete属性。如果aria-autocomplete取值为list、inline或both时，元素的autocomplete要设置为on,如果其值为none，则autocomplete取值为off |
| aria-busy | 字符串，表示当前区域的忙碌状态。默认为false，表示清除busy状态,取值为true时，表示该区域正在加载；取值为error时，表示该区域验证无效 | <ul aria-atomic="true" aria-busy="true" aria-live="polite"></ul> |
如果某个区域内(如这里ul)有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false。该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。 |
| aria-controls | 字符串，空格分隔的id属性值列表 | <h3 aria-controls="panel1" role="tab" tabindex="0"></h3><div id="panel1" role="tabpanel"></div> |
该属性定义了元素间不能通过文档结构决定的关联关系。aria-controls属性主要被role为group,?region, 或widget的元素使用。 |
| aria-describedby | 字符串，空格分隔的id属性值列表 | <ul role="group"><li role="checkbox" aria-checked="false" aria-describedby="desc1" tabindex="0"></li></ul><div id="desc1"></div> |
同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。 |
| aria-dropeffect | 字符串。表示拖拽效果。可选值有：copy,move,?reference,?execute,?popup,?none, 依次表示：复制，移动，参照，执行，弹出以及没有效果。 | 该属性主要用在拖拽上 | |
| aria-flowto | 字符串，空格分隔的的id值列表 | 如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。 | |
| aria-grabbed | 字符串。拖拽中元素的捕获状态。可选值有:true,?false,?undefined。默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。 | 该属性用在拖拽上。类似于HTML5中的draggable属性。 | |
| aira-haspopup | 字符串。true表示点击的时候会出现菜单或是浮动元素；?false表示没有pop-up效果。 | ||
| aria-label | 字符串 | 定义一个字符串值标记当前元素。 | |
| aria-labelledby | 字符串，空格分隔的id列表值 | <div aria-labelledby="title" role="alertdialog"><h3 id="title"></h3></div> |
aria-labelledby一般用在区域元素上，对于的id一般为对应的标题或是标签元素的id关系型属性。 |
| aria-level | 数值，表示等级 | <div role="heading" aria-level="2">次标题</div> |
模拟h2标签元素 |
| aria-live | 字符串。可选值有：off,?polite,assertive,rude。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。 | <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> |
绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的aria-busy。左侧的HTML为时间选择控件的年月标题部分，aria-live=”assertive”表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。 |
| aria-multiselectable | 字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项。 | 例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。 |
ARIA状态值
| 属性状态 | 属性值 | HTML示意 | 说明 |
|---|---|---|---|
| aria-checked | 字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。 | <li role="checkbox" aria-checked="mixed" tabindex="0"></li> |
该属性用来表明用户是否选择了某些项,类似于input type=”checkbox”中的checked |
| aria-disabled | 字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态。 | <div role="button" tabindex="0" aria-pressed="false" aria-disabled="false"></div> |
对应单复选框等控件的disabled属性，一般用在自定义模拟控件中 |
| aria-expanded | 字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。 | ||
| aria-hidden | 字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。 | <div aria-hidden="false"></div> |
该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的div, 当前aria-hidden为false, 表示该进度值是可见的。 |
| aria-invalid | 字符串。表示元素值是否错误的。默认为false, 表示是OK的，如果为true, 则表示值验证不通过。 | <input type="text" size="3" aria-labelledby="valid" aria-invalid="false" /> |
|
| aria-pressed | 字符串。表示按下的状态，可选值有：true,false,mixed,undfined。默认为undfined, 表示按下状态未知；true表示元素往下（按钮按下）；false表示元素抬起；mixed表示元素同时有按下和没有按下的状态。 | <div role="button" tabindex="0" aria-pressed="false" aria-disabled="false"></div> |
左边HTML表示按钮已经按下，同时处于禁用状态。 |
| aria-selected | 字符串。表示选择状态。可选值有：true,false,undefined。 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。 | ||
| aria-flowto | 字符串，空格分隔的的id值列表 | 如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。 | |
| aria-grabbed | 字符串。拖拽中元素的捕获状态。可选值有:true,false,undefined。默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。 | 该属性用在拖拽上。类似于HTML5中的draggable属性。 | |
| aira-haspopup | 字符串。true表示点击的时候会出现菜单或是浮动元素；false表示没有pop-up效果。 | ||
| aria-label | 字符串 | 定义一个字符串值标记当前元素。 | |
| aria-labelledby | 字符串，空格分隔的id列表值 | <div aria-labelledby="title" role="alertdialog"><h3 id="title"></h3></div> |
aria-labelledby一般用在区域元素上，对于的id一般为对应的标题或是标签元素的id关系型属性。 |
| aria-level | 数值，表示等级 | <div role="heading" aria-level="2">次标题</div> |
模拟h2标签元素 |
| aria-live | 字符串。可选值有：off,polite,assertive,rude。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。 | <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> |
绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的aria-busy。左侧的HTML为时间选择控件的年月标题部分，aria-live=”assertive”表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。 |
| aria-multiselectable | 字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项。 | 例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。 |
参考文章
- W3C官方文档:The Roles Model(role)
- W3C官方文档:Supported States and Properties(aria)
- WAI-ARIA无障碍网页应用属性完全展示
- WAI-ARIA 无障碍Web规范