logo

WAI-ARIA了解一下

什么是 WIA-ARIA?

一直我们提倡使用语义化的 HTML 标签,但是仍然很难传达一些简单的布局信息,如弹出菜单,目前没有能语义化这种布局 HTML 标签。另一方面,对正常用户来说无需关心这些信息,但是对于一些。残障人士来说正常使用 Web 应用是极其困难的,对于残障人士来说他们需要使用一些辅助软件,如屏幕阅读器来使用现代 应用,因此应用需要提供足够的信息才能被辅助软件所解析。
WAI-ARIA(Web Accessiblity Initiative/Accessible Rich Internet 应用 lication)简称 ARIA,是为网页提供无障碍访问的规范。
无障碍访问也应当是开发任务的部分,而对于大多数 Web 应用来说,并没有很好的做到这点。

WIA-ARIA 如何工作?

如果有我们需要自定义一个 checkbox,只需要视觉特性,可以使用其他元素进行模拟,一下代码便可以实现。

1
<li tabindex=0 class=checkbox checked>balabala</li>

但以上代码屏幕阅读器无法解析到这个 checkbox,因此我们可以通过 ARIA 规范添加 ARIA 属性提供足够信息使得屏幕阅读器能够正确解析无障碍树

1
<li tabindex=0 class=checkbox role=checkbox checked aria-checked=true>balabala</li>

屏幕阅读器能够解析 HTML 结构语义从而生成一颗无障碍树,但更多的只是 HTML 结构,缺少描述这些 DOM 的信息。
ARIA 通过更改补充标准的DOM 无障碍树来发挥作用。ARIA 并不会去改变元素的行为只更改元素的语义信息,但能我们能通过这一系列的属性补充无障碍树的信息从而提高访问性。

WIA-ARIA 可以做什么?

通过 ARIA 我们可以添加、修改元素语义。

  • ARIA 可以添加执行辅助技术 API 公开的标签与说明信息。
1
<button aria-label="screen reader only label"></button>
  • ARIA 可以拓展元素之间的父项/子项关系,子项元素不一定要被包含在父项元素中。
1
2
3
4
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
  • ARIA 可以使页面具有’实时性’,在页面数据发生变化的时候主动通知用户。
1
2
3
<div aria-live="true">
<span>GOOG: $400</span>
</div>

如何使用 ARIA?

应用在 Web 应用中的 HTML 的 ARIA 主要由两部分组成:

  • role属性:表示元素的作用
  • aria-属性:描述元素的特征与状态

详细 ARIA 实践可参考:ARIA 制作实践文档

ARIA 使用规则

  • 尽可能使用语义化标签去表示页面内容,而不是使用 ARIA 强制的修改一个标签的语义。
  • 尽可能不修改标签语义,除非确实需要这么做。
  • ARIA 控制的交互元素都需要有 keyborad 事件,便于通过键盘进行交互。
  • 所有交互元素都需要有一个可访问名称。如表单元素我们可以通过 label 标签关联一个表单元素,并给出一个名称。

ARIA 中的 Role






























































































































role属性值含义HTML示意说明
alert表示警告<div class=”alert alert-warning” role=”alert”>…</div>ajax操作返回错误信息的div标签 如Bootstrap中的Alert组件
dialog表示Modal弹出窗<div class=”modal” tabindex=”-1” role=”dialog”>…</div>自定义的弹出框,如Bootstrap中的Modal组件
presentation表示描述<h1 role=”presentation”>text</h1>删除HTML元素的语义化角色。加上后,可访问树就变成:
可访问树 【注释一】
应用lication表示应用<div class=”应用lication” role=”应用lication”>…</div>例如自定义的时间选择器
button表示按钮<span class=”btn” role=”button”></span>使用span元素模拟按钮控件
checkbox表示复选框<div class=”checkbox” role=”checkbox”></div>使用div模拟复选框
radio表示单选按钮<div class=”radio” role=”radio”></div>使用div元素模拟单选按钮
combobox表示表单控件<input type=”text” role=”combobox” >input元素,其type属性值为textsearchtelephoneurle-mail。而且aria-owns属性值设置相同的值作为list属性。另外select元素没有multiple属性或者说size属性值大于1
grid表示网格<div aria-readonly=”true” role=”grid”><table role=”presentation”></table></div>表示网格
gridcell网格单元格<tr role=”row”><td role=”gridcell”>Fido</td></tr>td的祖先元素(或table元素)定义了role=”grid”th(列标题或行标题,并且其祖先元素或table元素定义了role=”grid”
group表示组合并<div class=”btn-group” role=”group” aria-label=”First group”>…</div>比如创建按钮组合,如Bootstrap中的Button组合
heading表示标题<div class=”page-title” role=”heading” aria-level=”1”></div>使用div模拟h1
listbox表示列表框<ul role=”listbox” aria-expanded=”true”></ul>模拟带有multiple属性并且size值大于1select元素,或者datalist并且aria-multiselectable属性值设置为false。比如使用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字符串。表示区域内容是否完整播报。值为truefalse。值为true时,读屏软件会把整个区域内容都播报出来,如果为false则表示只需要播报修改的部分。<div role=”heading” aria-live=”assertive” aria-atomic=”true”></div>这里的aria-atomictrue,则表示当时间改变的时候,日期的年月都要完整播报出来,不要只改了月份就播报月份的内容。
aria-autocomplete字符串,表示用户的文本框的自动提示是否提供,可选值有inlinelistbothnone<input type=”text” tabindex=”0” role=”combobox” aria-autocomplete=”inline” aria-owns=”list” />aria-autocomplete对应HTML5中的autocomplete属性。如果aria-autocomplete取值为listinlineboth时,元素的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属性主要被rolegroup, 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-owns字符串,值为目标元素id aria-owns表示元素所拥有的
aria-posinset数值,表示当前位置 用在设置和获取一个集合内某项的当前位置
aria-readonly字符串。表示是否只读。默认为false, 表示元素值可以被修改;true表示元素指不能被改变  
aria-relevant字符串。表示区域内哪些操作行为需要做出反应。可选值有:additions, removals, text, all,可以空格分隔多个一起显示。additions表示新增节点的时候做出反应;removals表示删除节点时重要操作;text表示文本改变是值得重视的;all等同于同时使用上面三个属性值<div role=”log” aria-atomic=”false” aria-relevant=”additions”></div>左边的HTML表示当日志内容有添加的时候做出反应
aria-required字符串。元素值是否必需。默认为false, 表示元素值可以为空;true表示元素值是必需的<input type=”text” id=”name” name=”name” aria-labelledby=”name_label” aria-describedby=”tip” aria-required=”true” />多半用在表单控件中,对应HTML5中的required属性
aria-secret字符串,表示机密状态  
aria-setsize数值,设置尺寸的大小值  
aria-sort字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值:ascending(↑), descending(↓), none, other  
aria-valuemax数值,允许的最大值<div class=”progress-bar” role=”progressbar” aria-valuenow=”60” aria-valuemin=”0” aria-valuemax=”100”></div>用在progressbar组件上,对应HTML5中的max
aria-valuemin数值,允许的最小值<div class=”progress-bar” role=”progressbar” aria-valuenow=”60” aria-valuemin=”0” aria-valuemax=”100”></div>用在progressbar组件上,对应HTML5中的min
aria-valuenow数值,表示当前值<div class=”progress-bar” role=”progressbar” aria-valuenow=”60” aria-valuemin=”0” aria-valuemax=”100”></div>用在progressbar组件上,对应HTML5中的value
aria-valuetext字符串。定义等同于aria-valuenow人可读的文本  

状态






















































属性状态属性值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字符串。可选值为truefalse, true表示元素隐藏(不可见),false表示元素可见。<div aria-hidden=”false”></div>该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的div, 当前aria-hiddenfalse, 表示该进度值是可见的。
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表示未被选中。  

最后

无障碍化思路:

第一步,让用户知道页面上有什么内容,比如使用 HTML5 的语义化标签以及 WAI-ARIA 中的 landmark 地标;
第二步,让用户可以轻松在页面的板块之间切换,比如添加快捷键支持;
第三步,让用户知道哪些是主要部分,甚至在进入页面的时候就提供快捷方式跳到主要内容的锚点;
第四步,去除页面干扰,如 iconfont 文字,相邻重复的链接等;
第五步,提供页面的交互支持,让自定义的组件如 tab、slide 都具备无障碍属性。

在无障碍访问的网页应用中有不少国内网站做的也很不错如知乎,淘宝等网站。在 Mac 上使用旁白工具(Voice Over)基本可做到不看屏幕进行操作,为残障人士提供了便利,由于无障碍访问部分的开发很难直接给公司业务带来显著受益,因此很多 Web 应用并有针对这方面的优化。
在开发优化 ARIA Web 应用最好多站在需求用户的角度思考,如模拟自己是个盲人使用屏幕阅读器来访问自己开发的应用。

参考链接:

ARIA 简介
WAI-ARIA 无障碍 Web 规范
认识网页无障碍