ARIA是什么

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像视障,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让视障这类用户也能无障碍阅读!
为什么需要ARIA

让视障用户知道当前浏览区域就是网站主导航;
让视障用户知道点击某个按钮后出来的是弹框跳转;
让视障用户知道点击某个按钮后页面另外一个区域的文字发生了变化;
让视障用户知道您使用了li标签是用来模拟标准select控件;
让视障用户知道您模拟的select控件是单选呢还是可以多选,等等。

IE8+ 及其他所有浏览器,都已经全方位支持ARIA,真是可喜可贺!
ARIA role 属性值表
role属性值 含义 说明
role="alert" 警告
role="alertdialog" 警告框
role="application" 应用
role="button" 按钮
role="checkbox" 复选框
role="grid" 网格
role="gridcell" 网格单元
role="group" 组合
role="heading" 应用程序标题
role="listbox" 列表框
role="log" 日志
role="menu" 菜单
role="menubar" 菜单栏
role="menuitem" 菜单项
role="menuitemcheckbox" 可复选的菜单项
role="menuitemradio" 只能单选的菜单项
role="option" 选项
role="presentation" 陈述
role="progressbar" 进度条
role="radio" 单选
role="radiogroup" 单选按钮组
role="region" 区域
role="row" 行
role="separator" 分割
role="slider" 滑动条
role="spinbutton" 微调
role="tab" tab标签
role="tablist" 标签列表
role="tabpanel" 标签面板
role="timer" 计数
role="toolbar" 工具栏
role="tooltip" 提示文本
role="tree" 树形
role="treeitem" 树结构选项
ARIA 属性表
属性名 属性值 HTML示意 说明
aria-activedescendant 字符串。表示后代元素的id值。

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="btncut.png" id="button1" role="button" alt="cut" />
  <img src="btncopy.png" id="button2" role="button" alt="copy" />
  <img src="btnpaste.png" id="button3" role="button" alt="paste" />
</div>

aria-activedescendant 属性定义了当工具栏获取焦点时,哪一个工具栏的子控件获取了焦点。在此HTML示例中,工具栏的第一个控件(拥有id “button1″)是能获取焦点的子控件。

aria-atomic 字符串。表示区域内容是否完整播报。值可以为true和false。当为true时,表示辅助设备需要把整个区域内容都通报给使用者;如果为false则表示只需要通报修改的部分。

<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>

还是这个时间选择器年月标题的例子。这里的aria-atomic为true则表示当时间改变的时候,这里的年月日期要完整播放,不要只改了月份就只报月份内容。

aria-autocomplete 字符串。表示用户的文本框的自动提示是否提供。可选值有:inline, list, both, none.

<input id="cb1-edit" class="cb_edit" type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" />    
<ul id="list" tabindex="-1" role="listbox" aria-expanded="true">
    <li id="cb1-opt1" role="option">H-ui</li>
    <li id="cb1-opt2" role="option">前端</li>
    <li id="cb1-opt3" role="option">框架</li>
</ul>

目前,该属性对于inline和list两个值的含义暂不清楚。不过可以确定的是该属性对应HTML5中autocomplete属性。需要注意的是,如果aria-autocomplete="list", aria-autocomplete="inline"或aria-autocomplete="both"被设置在支持autocomplete的元素上,则autocomplete的属性值需要设成"on", 如果是aria-autocomplete="none",则需要设成"off"

aria-busy 字符串。表当前区域的忙碌状态。默认为false, 表清除busy状态;可选为true, 表该区域正在加载;或为error, 表示该区域验证无效。