ARIA

发表于

ARIA 是 Accessible Rich Internet Applications 的缩写。它是 W3C 的 Web 无障碍推进组织 Web Accessibility Initiative / WAI 在2014年3月20日发布的可访问富互联网应用实现指南。2017年11月2日，发布了 WAI-ARIA 1.1 的提案推荐标准,在1.0版本的基础上，添加了一些新机制，使 HTML + ARIA 无障碍模型更加完整，并支持图形及数字出版的无障碍需求。

  • 几种场景
    • 一个由 js 生成的页面
    • 一个不支持鼠标的页面
    • 一个不支持键盘的页面
    • 一部没有字幕的电影
  • 两组数据
    • 全球目前有超过10亿残疾人 占全球人口约15%
    • 全球网民数量突破30亿约占总人口42%

以上这种场景的对于一个视觉或者听觉有障碍的人来说还能正常访问吗？这就是要 WAI-ARIA 的目的。WAI-ARIA 适用于跨越某些领域的障碍，这些领域存在的无障碍问题无法通过原生 HTML 进行管理。它通过允许您指定某些属性来发挥作用，这些属性可以修改元素转换成无障碍树的方式。

ARIA 是怎么做的

ARIA属性可以被 NVDA 等读屏软件调用系统API识别， 转化成语音。

例如我们使用列表项作为一种自定义复选框

1
2
3
<li class="checkbox" checked>
  javcscript
</li>

正常的人是能正确识别的，但是屏幕阅读器却不会给予任何指示来说明该元素旨在作为复选框使用，因此弱视用户可能会完全错过该元素。
如果使用 ARIA 属性，我们就可以为元素提供缺少的信息，以便屏幕阅读器能正确解读它。 我们在以上代码中添加了 role 和 aria-checked 属性，将该元素显式标识为一个复选框，并指定它在默认情况下处于选中状态。该列表项现在将添加到无障碍树中，屏幕阅读器将把它正确地报告为一个复选框。

1
2
3
<li class="checkbox" role="checkbox" checked aria-checked="true">
  javcscript
</li>

ARIA 通过更改和补充标准 DOM 无障碍树来发挥作用。并且尽可能正确地使用 html 标签，原生标签对 ARIA 支持得更好。在实再自定义控件的时候，添加 ARIA 相关属性可以例控件能正确被读屏软件识别。 html5 语义化标签与 ARIA 有重叠的地方，用新的语义化标签但还是推荐添加 ARIA 属性。
例如上面的自定义复选框,标准 HTML 元素都不需要额外的 role=”checkbox” ARIA 属性就能正确声明。

ARIA on HTML

ARIA on HTML 中使用有其自己的规范，在 这个 网站可以检测 ARIA 使用的是否标准。

ARIA 属性包括三个方面：角色属性值(roles), 状态属性值(states), 和属性表(properties) 参考网站： W3C

浏览器支持情况参见 caniuse

  • HTML5 元素有的不应该重新定义一个添加ARIA

    如果你使用的元素(HTML5)具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。

    下面以 role=heading 一个上button元素。这是不允许的，因为该 button 元素具有默认特征与标题角色冲突。

    1
    <button role="heading">search</button>

    哪些情况下可以使用？

    • 在HTML(HTML5)元素特性不管支持或不支持，只要不具语义化，就可以使用ARIA
    • 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素
    • 目前尚不支持的HTML特性

  • 规所有的ARIA制作控件都必须具有键盘 (keyboard) 事件。

  • ARIA role的必需属性不可省略

    正确

    1
    <span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>

    错误

    1
    <span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

  • 具有ARIA role的元素必须在正确的范围内

    正确

    1
    2
    3
    4
    5
    <div role="list"> 
    	<span role="listitem">Rainbow Trout</span> 
    	<span role="listitem">Brook Trout</span>
    	<span role="listitem">Lake Trout</span>
    </div>

    错误

    1
    2
    3
    4
    5
    <div> 
    	<span role="listitem">Rainbow Trout</span> 
    	<span role="listitem">Brook Trout</span>
    	<span role="listitem">Lake Trout</span>
    </div>

ARIA 在 HTML 中由组成

ARIA 在 HTML 中由两部分组成，一个 role ，表示元素的作用；一个是 aria- 表示元素的属性或状态。

  • role
role值 含义 role值 含义 role值 含义
alert 警告 alertdialog 警告框 application 应用
button 按钮 checkbox 复选框 grid 网格
gridcell 网格单元 group 组合 heading 应用程序标题
listbox 列表框log 日志 menu 菜单 treeitem 树结构选项
menubar 菜单栏 menuitem 菜单项 menuitemcheckbox 可复选的菜单项
menuitemradio 只能单选的菜单项 option 选项 presentation 陈述
progressbar 进度条 radio 单选 radiogroup 单选按钮组
region 区域row 行 separator 分割 tree 树形
slider 滑动条 spinbutton 微调 tab tab标签
tablist 标签列表 tabpanel 标签面板 timer 计数
toolbar 工具栏 tooltip 提示文本

  • aria 属性或状态

    • aria-label

      • 视觉上能理解，读屏软件不能理解的可以用 aria-label，和 img alt 属性效果相同。
      • placeholder 不能被读屏软件识别，如果不带 label 的 form 表单，需要用 aria-label标注。个人测试 iOS10 上 VoiceOver 是可以读 placeholder ，如果两个属性同时存在会先读 aria-label 后读 placeholder ，chrome 插件的 Accessibility Developer Tools 不识别 placeholder。

    • aria-hidden

      隐藏元素的一些对比

方法 行为 读屏软件行为 兼容性
CSS：visibility:hidden; 从视觉中隐藏元素，但其原始空间仍然被占用（很像opacity:0） 不可读 兼容性好
CSS: display:none; 从视觉中隐藏元素，它的原始空间丢失，下一个元素将取代它的位置 不可读 兼容性好
HTML5: hidden属性 类似display：none 不可读 IE11+
aria-hidden = “true” 内容显示在浏览器，但读屏软件不可读 不可读 IE11+
CSS: .visuallyHidden类 视觉不显示，工作流不存在 可读 兼容性好 
- aria-pressed

    表示按下的状态，可选值有：true, false, mixed, undfined.默认为undfined, 表示按下状态未知；true表示元素往下（按钮按下）；false表示元素抬起；mixed表示元素同时有按下和没有按下的状态

    
1
<div role="button" tabindex="0" aria-pressed="false" aria-disabled="false"></div>


- aria-selected

    表示选择状态,可选值有：true, false, undefined。 默认为undefined，表示元素选择状态未知;true表示元素已选择;false表示未被选中。

    
1
2
3
4
<ul class="tablist" role="tablist">
	<li role="tab" aria-selected="true" tabindex="0">中国</li>
	<li role="tab" aria-selected="false" tabindex="-1">美国</li>
</ul>