WAI-ARIA 无障碍Web规范

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

无障碍设计

无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和"间接访问"。

无障碍设计可以理解为 "能够访问", 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。

无障碍设计不应该和可用性混淆。 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标。

无障碍设计和通用性设计是息息相关的。通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 Web 是否有障碍)。

富互联网应用

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时,往往把残疾人士抛在脑后,因为这些应用程序无法提供被辅助技术理解所需的语义信息。可悲的是,直到现在这种情况并没有多少改变,其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义,以确保富互联网应用是可以理解的,并且现在已经得到相对较好的支持。

ARIA是什么?

ARIA是“**Accessible Rich Internet Applications **”的缩写。它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。在WAI-ARIA概述中对WAI-ARIA及其他支持文档进行了介绍。

简单点描述:

  • ARIA是W3C的一个独立规范,帮助Web应用程序和Web页面变得更具可访问性
  • ARIA主要是为了提升网页的可用性,网页对残疾人士的无障碍化
  • HTML5已经开始使用ARIA,并且W3C发布的很多其他标准也开始使用ARIA
  • ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力,并让你页面中元素的关系和含义更明确
  • ARIA 规范为浏览器和解析 HTML 文档的辅助性技术提供了一种可以让人们以多种方式访问和使用 Web 的标准方法

如何使用ARIA?

应用于HTML的ARIA有两部分组成:**role**(角色)和带**aria-**前缀的属性,其作用:

  • role(角色)标识了一个元素的作用
  • aria-属性描述了与之有关的事物(特征)及其是什么样的(状态)

HTML中的ARIA

ARIA在HTML中使用有其自己的规范,并不是说在HTML中使用了ARIA,Web页面就无障碍化了,就提高了可访问性了。言外之意,ARIA没有用好,反而会把你带到另一个坑中,使用你的页面可访问性更差。

有关于HTML中ARIA的文档可以点击这里阅读

ARIA在HTML中的使用

ARIA使用规则一

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

那么什么时候可用和不可用ARIA呢?

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

ARIA使用规则二

不改变语义,除非你真的需要使用。例如,开发者想创建一个标题,而且它是一个按钮。

不要这样做:

<h1 role=button>标题按钮</h1>

建议这样做:

<h1><button>标题按钮</button></h1>

或者说,你不使用正确的元素,但你可以这样做:

<h1><span role=button>标题按钮</span></h1>

如果使用一个非交互的元素做为一个交互的元素,那么开发人员必须使用ARIA添加语义和使用适当的脚本增加交互行为

ARIA使用规则三

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

如果创建一个组件(widget),用户可以点击、拖放、滑动或滚动,用户使用键盘能定位到创建好的组件部件上,并且执行相应的操作动作。

例如,如果使用role=button必须能够接收到焦点和用户能够使用键盘激活相应动作,比如Win操作系统上的enter和iOS系统上的return或者键盘的空格键(space)。

ARIA使用规则四

不建议在可获取焦点元素(focusable)使用ARIA的角色:role=presentationaria-hidden="true"

可获取焦点元素上使用ARIA这两规则,会导致一些用户无法获取元素焦点。

不要这样做:

<button role=presentation>按下我,按下我</button>

也不要这样做:

<button aria-hidden="true">按下我,按下我</button>

如果说一个交互元素无法看到或者不能与之交互,那么可以尝试使用aria-hidden,例如:

button {visibility:hidden}
<button aria-hidden="true">按下我,按下我</button>

如果一个交互元素使用display:none;来隐藏,那么它对应的可访问性也将一并被删除,如此一来,在可交互元素上使用aria-hidden="true"就没有必要了。

ARIA使用规则五

所有交互元素都必须有一个可访问的名称

当可交互元素的可访问性API的可访问名属性只有一个值时,那么可交互元素就只有一个可访问的名称。

比如下面的示例,input type="text"有一个可见的<label>标签,但它并没有可访问的名称:

user name <input type="text">

或者:

<label>user name</label>
<input type="text" />

此时MSAA(Microsoft Active Accessibility )控制器的accName属性是空的:

示例显示MSAA控制名和role信息,accName属性值为空,accRole的属性值为'editable text'

相比之下,下面示例中input type="text"有一个可见的<label>标签并且包含一个可访问性名称:

<label>user name <input type="text"></label>

或者:

<label for="uname">user name</label> <input type="text" id="uname">

此时MSAA(Microsoft Active Accessibility )控制器的accName属性值是user name

示例显示MSAA控制名和role信息,accName属性值为'user name',accRole的属性值为'editable text'

另外label标签元素是不能被用来给自定义控件提供一个访问性名称,除非label引用了HTML的labelable元素

<!-- HTML input element with combox role -->

  <label>
  user name <input type="text"  role="combobox" >
  </label>

MSAA(Microsoft Active Accessibility )控制器的accName属性值是user name

示例显示MSAA控制名和role信息,accName属性值为'user name',accRole的属性值为'combo box'

除此之外,使用非HTML labelable元素来模拟控件,不管给其分配什么角色(role)都不会是HTML的labelable元素,比如下面的div元素:

<!-- HTML div element with combox role -->

  <label>
  user name <div  role="combobox"></div>
  </label>

MSAA(Microsoft Active Accessibility )控制器的accName属性值是空的:

示例显示MSAA控制名和role信息,accName属性值为空,accRole的属性值为'combo box'

ARIA 的角色role

下面的表格详细的示意了HTML中元素如何使用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元素的语义化角色。加上后,可访问树就变成:
可访问树 【注释一】
application 表示应用 <div class="application" role="application">...</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的role,下表列出了常用的标签元素对应的ARIA的role,仅供参考:

HTML元素 ARIA (role =) 备注
a link 不带href属性的a元素不具有role="link"
a menuitem 父元素是一个菜单
article article  
aside
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/wai-aria/wai-aria.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部