HTML5中的aria与role,WAI-ARIA无障碍

你知道网页的无障碍是干嘛的吗？不，你不知道，你不会关心残障人士是怎么浏览网页的，你只关心你自己！

WAI-ARIA无障碍

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

WAI：Web Accessibility Initiative （由 W3C 在1997年发起）是一系列计划供 web 开发者、创作者以及设计者使用的指导方针 - 关于如何使内容对残障人士更易用。

这些指导方针的目标是易用性（accessibility），但是也有助于使 web 内容可用于更多的浏览器（语音浏览器、移动电话、手持设备），以及更多工作于困难环境的用户（非手持式的、强光、黑暗、弱视、噪音等）。

为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范

ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确

WAI 对您的网站来说很重要吗？

是的。

每天都有百万计的残障人士在网上冲浪，并且甚至超过百万计的人们正在使用着不良的浏览器设备。

假如您的网站缺乏诸如可调节字体尺寸、带有文本描述的图形以及便捷的导航，那些人们就无法访问您的信息。

事实上：您的网站剥夺了这些人的权利。

增强网站易用性的理由还有：

可提升网站的美誉度和形象
可提升用户满意度
可增加访问者的数量
可增加访问者在站点的停留时间
可增加访问者的回访数量
可同样为无残疾人士增加可用性
可为关闭图形功能的访问者增加可用性
可为使用老式设备的人群增加可用性
可使您的网站为增长速度最快的人群提供服务：老年人群

如何使用ARIA

应用于HTML的ARIA有两部分组成： role （角色）和带 aria- 前缀的属性，其作用：

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

ARIA 的角色 role

role 属性值	含义
alert	表示警告
dialog	表示Modal弹出窗
presentation	表示描述
application	表示应用
button	表示按钮
raido	表示单选框
checkbox	表示复选框
combobox	表示表单控件
grid	表示网格
gridcell	表示单元格
group	表示组合并
heading	表示标题、h1
listbox	表示列表框、select
option	表示选项
menu	表示菜单
menubar	表示菜单栏
menuitem	表示菜单项
menuitemradio	只能单选的菜单项
menuitemcheckbox	可复选的菜单项

上表中并没有列出所有ARIA的角色，当然并不是所有的HTML元素都具有对应的ARIA的 role

ARIA的属性

下表介绍了ARIA相关属性的使用方法。

属性名	属性值和说明
aria-activedescendant	字符串。当工具栏获取焦点时，它的子控件获取焦点，属性值取：后代元素的 id 值
aria-atomic	字符串。表示区域内容是否完整播报。值为 true 和 false
aria-autocomplete	字符串。表示表单的自动完成，可选值有 inline 、 list 、both 和 none。
aria-busy	字符串。表示当前区域的忙碌状态。默认为 false。取值为 true 时，表示该区域正在加载。取值为 error 时，表示该区域验证无效
aria-controls	字符串。如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。
aria-dropeffect	字符串。表示拖拽效果。可选值有 copy , move , reference , execute , popup , none , 依次表示 复制，移动，参照，执行，弹出以及没有效果。
aria-flowto	字符串。如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。
aria-grabbed	字符串。拖拽中元素的捕获状态。默认为 undefined ，表示元素捕获状态未知。 true 表示元素可以捕获； false 表示不能被捕获。
aira-haspopup	字符串。true 表示点击的时候会出现菜单或是浮动元素； false 表示没有pop-up效果。
aria-label	字符串。定义一个字符串值标记当前元素。
aria-labelledby	字符串。一般用在区域元素上，对应的 id 一般为对应的标题或是标签元素的 id 关系型属性。
aria-live	字符串。默认为off, 表示不宣布更新；polite 表示只有用户闲时宣布；assertive 表示尽快对用户宣布；rude 表示即时提醒用户，必要的时候甚至中断用户。
aria-multiselectable	字符串。表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。
aria-owns	字符串。表示元素所拥有的、值为目标元素 id
aria-readonly	字符串。表示是否只读。默认为 false , 表示元素值可以被修改。
aria-relevant	字符串。表示区域内哪些操作行为需要做出反应。additions 新增时, removals 删除时, text 改变时, all 同时使用以上三个属性值。
aria-required	字符串。表示元素值是否必须，默认为false。
aria-secret	字符串。表示机密状态
aria-sort	字符串。表示表格或格栅中的项是以升序排列还是降序排列，值ascending (↑), descending (↓), none , other
aria-valuetext	字符串。定义等同于 aria-valuenow 可读的文本
aria-level	数值。表示等级
aria-posinset	数值。用在设置和获取一个集合内某项的当前位置
aria-valuemax	数值，允许的最大值
aria-valuemin	数值，允许的最小值
aria-valuenow	数值，表示当前值

ARIA状态

下表介绍了ARIA相关状态的使用方法。

属性状态	属性值和说明
aria-checked	字符串。表示检查的状态。 true 表示元素被选择； false 表示元素未被选择； mixed 表示元素同时有选择和未选择状态。
aria-disabled	字符串。表禁用状态， true 表示当前是非激活状态； false 表示清除非激活状态。
aria-expanded	字符串。表示展开状态。默认为 undefined , 表示当前展开状态未知。其它可选值： true 表示元素是展开的； false 表示元素不是展开的。
aria-hidden	字符串。可选值为 true 和 false , true 表示元素隐藏(不可见)， false 表示元素可见。
aria-invalid	字符串。表示元素值是否错误的。默认为 false , 表示是OK的，如果为 true , 则表示值验证不通过。
aria-pressed	字符串。表示按下的状态，默认为 undefined , 表示按下状态未知； true 表示元素往下（按钮按下）； false 表示元素抬起； mixed 表示元素同时有按下和没有按下的状态。
aria-selected	字符串。表示选择状态。 默认为 undefined ，表示元素选择状态未知。 true 表示元素已选择； false 表示未被选中。

使用 “alt” 属性

alt 属性允许你为图像（也可以为其它的元素）提供一条相对应的文字。

实例:

<img src="images/banana.jpg" alt="Banana">

有时候浏览器会无法显示图像。具体的原因有：

用户关闭了图像显示
浏览器是不支持图形显示的迷你浏览器
浏览器是语音浏览器（供盲人和弱视人群使用）

如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。