[HTML5]WAI-ARIA介绍
认识ARIA
目前互联网应用日益增强，其中大部分是通过混合技术（AJAX、DHTML、JavaScript 和 SVG）创建或自定义一些模拟桌面GUI程序的的 Web widget 小组件来增强 Web 应用程序的交互，但部分类似Dialog 的对话框、弹出层，模拟select 的下拉菜单等小组件并没能提供所需的语义作支持，残障人士有可能无法读懂当前信息。
屏幕读取器、语音识别软件和屏幕键盘均通过特定的语义标识（title、button~）读取网页组件本质信息，而WAI-ARIA 角色标准在语义化标识约定方面起至关重要的作用。现在不但Firefox、Safari 4.0、Google 早已支持 WAI-ARIA，而且IE8 也开始部分支持，各种的JavaScript库支持WAI-ARIA将会是一个趋势。
图1.0
图1.0是模拟无障碍的JavaScript架构，contarct部分正是WAI-ARIA定义的API标准，通过这些标准，把信息传输到各种辅助读取和显示的AT仪器上。
图2.0
图2.0当JS动态发生交互时，默认设置的语义信息已过时；此时可以通过标蓝的API进行新的语义信息传递。
ARIA 用法
ARIA API构建
以下平台均定义了类似的API接口：
Java Accessibility API [JAPI]
Microsoft Active Accessibility [MSAA]
Apple Accessibility for COCOA [AAC]
Gnome Accessibility Toolkit (ATK) [ATK]
UI Automation for Longhorn [UIAUTOMATION]
应用ARIA语境：
1、 应用无语义的XHTML 标签情况；
2、 所应用 XHTML 标签当前状态改变情况；
3、 XHTML 标签需支持键盘索引；
4、 XHTML 标签状态改变时的CSS动态支持；
ARIA role 属性：
ARIA允许开发者为任何HTML元素添加一个简单的属性。ARIA的role根据上下文判断某个元素的作用和性质，也就是说，比如
以上代码表示：这是一个进度条。
Role 属性值如下：
详细信息：WAI-ARIA Roles.
Role数据模型的类关系图:
其遵循W3C语义模型
ARIA states and properties：
随着网页的动态交互，当 XHTML 元素 states 状态发生变化，与states 对应的properties信息也需要更新，如“cheack”状态改变。
X
支持动态变化时Css绑定:
[aria-checked="true"]:before { background-image: url(checked.gif); }
ARIA在工作中应用
ARIA通过友好易接受方式传递给正在操作或更新的用户更完整的信息，而不是等用户所有步骤都操作完毕后，才被告知此行为并未如愿执行。
如何在网页中应用ARIA ?
Ex_01:
Ex_02:
注意：
目前只在支持可扩展的网页中使用用ARIA，如果网页没有DTD声明，需要加上xmlns（XHTML namespace）命名声明,如下：
xmlns=http://www.w3.org/1999/xhtml
应用实例：
具体代码:
QQ音乐网站导航_test2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<map id="”menu”"><h2>QQ音乐网站导航_test2</h2> <ul title="”QQ音乐网站导航_test2″" role="”navigation”"> <li><a href="”#”" id="”menu_index”">首页</a> </li> <li><a href="”#”" id="”menu_musicdata”">正版音乐库</a> </li> <li><a href="”#”" id="”menu_first”">在线首发</a> </li> <li><a href="”#”" id="”menu_hit”">点击榜</a> </li> <li><a href="”#”" id="”menu_player”">播放器</a> </li> </ul></map> |
无障碍软件安装：
http://firefox.cita.uiuc.edu/#install
无障碍网站测试：
http://test.cita.uiuc.edu/aria/nav/nav1.php
http://www.gov.hk/sc/about/accessibility/assistivetools.htm
参考资料：
http://www.w3.org/TR/wai-aria/
http://www.evotech.net/blog/2009/03/wai-aria-accessible-rich-internet-applications-basics/
原文：http://webteam.tencent.com/?p=1284
之前在学习和工作当中碰到的一些有关无障碍的学习心得，比较杂，做一下小结。
（1）tabIndex:
当使用键盘时，tabindex是个关键因素，它用来定位html元素。
tabindex有三个值：0 ，-1， 以及X（X里32767是界点，稍后说明）
原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。
当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。
当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。
当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。
在IE中，tabindex范围在1到32767之间（包括32767）
在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。
这个估计跟各个浏览器对int型的解析有关。
（2）Aria
WAI网站对它的描述是“WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.”
可以看出，它用来标识页面中涉及到动态交互的地方，这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。
aria由一套属性组成，属性分为role以及对应的states和properties，aria将html元素分为六种role，每种有对应的states和properties，但有一些是共用的，比如
举个伪元素例子，
<div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>
这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态，在读屏软件（NVDA）中读出来就是：
再举个动态交互的例子，这是etao（一淘）主页的菜单代码
NVDA读出来就是：
这里用到了menubar和menuitem角色，用来标识这是个菜单，同时使用了aria-haspopup属性，表示这个菜单有子菜单。
wai-aria文档对Haspopup的解释是“Indicates that the element has a popup context menu or sub-level menu.”值为trun/false，我将其改为1或0，也没有发现有影响，应该是可以的，不过还是遵从标准比较好。
******************************哗啦啦的分界线*****************************************
目前我们用到比较多的aria是aria-label和aria-labeledby，（可见etao），这两个元素用来对元素进行注释，aria-labelledby的值是id值，用来设定多个注释，aria-label的值是字符串。
从第一个图中可以看出，aria-label是通用的属性，但是实际上目前读屏软件都不支持在span上使用aria-label
这一点比较郁闷，因为淘宝上很多列表内的金额，数目等信息是用span实现的，不能给span添加注释，但是div可以。
使用aria-label时需注意，
(1) 同时使用aria-label和label for时，忽略后者。
(2) 同时使用aria-label和aria-labelledy时，忽略前者
(3) IE不支持对input使用aria-label，但是支持aria-labelledby。
(4) 使用aria-labelledby时，即使对应的注释文本被隐藏，依然能读出来。
例如：
<label id="labeltext" for="Text1" style="display:none">隐藏的姓名:</label> <span id="specialtext" style="display: none">隐藏的解释</span> <input type="text" id="Text1" aria-labelledby="labeltext specialtext" aria-label="专门解释" title="XYZ" />
NVDA读出来就是
用label for注释时隐藏的label也可以读出来，不过兼容性稍差，在FF4.0.1中NVDA不能读。
(5) 实际运用注释时通常在title和aira之间徘徊，因为两者的功能类似，读屏软件都能读出来，但是title会浮出一个提示层，aria不会，不过title的兼容性比较好，它是标准属性
所以在具体应用中需要有所取舍，我认为，在不影响用户体验的情况下，尽量用title。一些不能用的地方，例如列表中的li，就选择用aria-label，aria主要还是在用于解释交互行为方面比较强大。
******************************淅沥沥的分界线*****************************************
还有一些tip:
(1) label for针对表单元素和div有效，span不行
(2) 表单元素中input type=button，不用加注释，读屏软件可以读出value
(3) 不是所有的title读屏软件都读，a，span以及button的title个别情况下不读，a，span在IE下直接读标签里的内容，button读value值
(4) a标签必须加上href属性之后才能定位，否则就要用到tabindex.
其它的属性可以在以后的项目中慢慢探索。
注意：
（1）aria只是用在html中的一系列属性，其作用是解释标签行为和状态，要实现动态效果还是需要js。
（2）aria要发挥效果，需要浏览器和AT（assistive tool，包括读屏软件，屏幕放大器等）的共同作用，浏览器先映射aria到操作系统，操作系统通知 AT ，AT再处理这些标签，
如果浏览器和AT有一方对aria支持不好，效果就不好，经过我测试，FF支持的是比较好的。而读屏软件中 NVDA的比较好，国内争渡，永德不错。
另外，IE6是不支持aria的。
最后附上aria的role及对应states和properies的图，链接中是SVG格式的。
参考：
http://www.ibm.com/developerworks/cn/web/wa-aj-web20/
http://www.ibm.com/developerworks/cn/web/1003_sunqy_access/
http://www.w3.org/TR/wai-aria/rdf_model
http://webaim.org/techniques/forms/controls
一、你至少应该知道ARIA是什么东西！
WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。
而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
二、为什么需要ARIA？
回答标题问题前我先问其他几个问题？
- 如何让盲人用户知道当前浏览区域就是网站主导航？
- 如果让盲人用户知道点击某个按钮后出来的是弹框？
- 如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？
- 如何让盲人用户知道您使用了
li标签是用来模拟标准select控件呢？ - 如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？
在你现有的知识范围内，您有办法解决上面的问题吗？有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。
因此，才需要ARIA.
三、ARIA是个非主流，咱不鸟！
ARIA是非主流吗？真是睡在冻床上不知冷热啊。ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的JavaScript库jQuery, 以及衍生的jQuery Mobile早早支持了ARIA，国内知名JavaScript库kissy也在去年（我没记错的话）支持了ARIA并在实际项目中使用了（可以在淘宝首页寻觅踪迹）。
Coach是包包中的主流吗？ARIA就是包包中的Coach.
四、算了吧，盲人，这么小众，鸟个毛啊！
嘛，确实，反正你一辈子就照着设计图切几个死页面就够了。
五、靠，ARIA相关属性茫茫多，老子调戏前台都没时间，鸟这个！
ARIA相关属性虽然多，哥们，要晓得，时间紧的时候，做前戏就没有必要把每个部位都亲个遍，直接针对敏感部位就行了。ARIA也是一样，知道几个常用的属性就可以了。以后在领导面前吹嘘啊，面试得瑟啊什么的就有料了！
到现在全是文字，为了提高可阅读性，避免文字阅读吃力的潜在用户关闭本页面，是时候举个实际的例子提提大家的神了，让大家知道ARIA就是个冰激凌（跟屎放在一起只是肤色白了点而已）。
本例来自淘宝首页，大家有兴趣也可以自己看看，示例对象见下截图（淘宝网右上角选项卡）：
使用firebug查看其对应的HTML代码，就可以看到aria的应用啦！
仔细一看，唷，这可是标准的选项卡ARIA属性应用（该用的属性都有），OK，对于常用的选项卡，就套用淘宝网这里的结构吧，很标准的。就是增加几个role属性，增加几个aria-属性就可以了，然后，这个选项卡就变成了很牛逼很碉堡的无障碍阅读选项卡啦。恩，这再一次验证了这个道理：要变成牛人很简单——骑在牛身上就可以了。
哎呀哎呀，聪明好学的你可能希望知道这里aria-hidden, aria-labelledby是啥意思。
好同学，我被你这种学习的热情感动了，于是决把我这几天没日没夜整理的WAI-ARIA无障碍网页应用属性大全表展示出来，上面的两个属性，以及其他N多aria-的兄弟姐妹属性都可以从下面几个表中找到。
如果你被表格的高度吓住了不想看也没关系，记住这里，回头需要的时候再来找找，哦呵呵！^_^
下面三个表，依次为：ARIA role属性值表、ARIA属性表、ARIA状态属性表。
六、ARIA属性表
| role属性值 | 含义 | HTML示意 | 说明 |
|---|---|---|---|
| alert | 表示警告 |
<p id="ajax_error_alert" role="alert"></p> |
例如ajax操作返回错误信息的div标签。 |
| alertdialog | 表示警告弹出框 |
<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0"
role="alertdialog" id="alert1">
<p id="alert_title">弹出框</p>
<p id="alert_message">哥，你输入的时间穿越了，请重新输入！</p>
<input type="button" value="关闭" id="alert_close" />
</div>
|
自定义的出错提示弹框。 |
| application | 表示应用 |
<div id="application" role="application">
<label id="date_label" for="date">时间</label>:
<input id="date" type="text"/>
<button id="bn_date">选择日期...</button>
<div id="dp1" aria-hidden="true">
<-- 时间选择控件具体 -->
</div>
</div>
|
例如自定义的时间选择器。 |
| button | 表示按钮 |
<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> |
大家都懂的，没啥好说的 |
| checkbox | 表示复选框 |
<ul role="group">
<li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
<li role="checkbox" aria-checked="false" tabindex="0">晴川</li>
<li role="checkbox" aria-checked="true" tabindex="0">静秋</li>
<li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li>
</ul>
|
同样，大家都懂的，没啥好说的 |
| combobox | 表示下拉列表框 |
<input id="cb1-edit" type="text" tabindex="0"
role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
<li id="cb1-opt1" role="option">晴川</li>
<li id="cb1-opt2" role="option">静秋</li>
<li id="cb1-opt3" role="option">黄小仙</li>
</ul>
|
 |
| grid | 表示网格 |
<table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true">
<caption id="grid1_label">美女们</caption>
<thead>
<tr>
<th id="grid1_q" tabindex="-1">晴川</th>
<th id="grid1_j" tabindex="-1">静秋</th>
<th id="grid1_h" tabindex="-1">黄小仙</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
|
 |
| gridcell | 表示网格单元 |
<table role="grid" aria-readonly="true">
<tr role="row" aria-selected="false">
<td role="gridcell" tabindex="-1">晴川</td>
<td role="gridcell" tabindex="-1">静秋</td>
<td role="gridcell" tabindex="-1">黄小仙</td>
</tr>
</table>
|
类似于table & table-cell |
| group | 表示组合并 |
<ul role="group">
<li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
<li role="checkbox" aria-checked="false" tabindex="0">晴川</li>
<li role="checkbox" aria-checked="true" tabindex="0">静秋</li>
<li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li>
</ul>
|
|
| heading | 表示应用程序标题头 |
<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> |
例如时间选择器中的月份标题： |
| listbox | 表示列表框 |
<input id="cb1-edit" type="text" tabindex="0"
role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
<li id="cb1-opt1" role="option">晴川</li>
<li id="cb1-opt2" role="option">静秋</li>
<li id="cb1-opt3" role="option">黄小仙</li>
</ul>
|
|
| log | 表示日志记录 |
<div role="log" aria-atomic="false" aria-relevant="additions"></div> |
类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。 |
| menu | 表示菜单 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
 |
| menubar | 表示菜单栏 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
|
| menuitem | 表示菜单项 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
|
| menuitemcheckbox | 表示可复选的菜单项 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemcheckbox" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemcheckbox" tabindex="-1" aria-checked="true">静秋</li>
<li role="menuitemcheckbox" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
 |
| menuitemradio | 表示只能单选的菜单项 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
|
| option | 表示选项 |
<input id="cb1-edit" type="text" tabindex="0"
role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
<li role="option">晴川</li>
<li role="option">静秋</li>
<li role="option">黄小仙</li>
</ul>
|
|
| presentation | 表示称述 |
<div>
<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
role="slider" src="slider_control.png" />
<div role="presentation" tabindex="0">45</div>
</div>
|
左边示例的HTML为一个自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。 |
| progressbar | 表示进度条 |
<div role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">
<div style="width: 23.3333%;"></div>
<div aria-hidden="false">23%</div>
</div>
|
 |
| radio | 表示单选 |
<h3 id="girl_label">美女们：</h3>
<ul role="radiogroup" aria-labelledby="girl_label">
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> 晴川
</li>
<li tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif" /> 静秋
</li>
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> 黄小仙
</li>
</ul>
|
自定义单选框控件的时候使用，下图为左侧HTML的效果图： |
| radiogroup | 表示单选组 |
<h3 id="girl_label">美女们：</h3>
<ul role="radiogroup" aria-labelledby="girl_label">
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> 晴川
</li>
<li tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif" /> 静秋
</li>
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> 黄小仙
</li>
</ul>
|
|
| region | 表示区域 |
<div role="region" tabindex="-1" aria-expanded="false">
我之所以会出现，是因为主人你点击了某个命中注定的按钮。
</div>
|
例如用在div区域显示隐藏切换的时候。 |
| row | 表示行 |
<table role="grid" aria-readonly="true">
<tr role="row" aria-selected="false">
<td role="gridcell" tabindex="-1">晴川</td>
<td role="gridcell" tabindex="-1">静秋</td>
<td role="gridcell" tabindex="-1">黄小仙</td>
</tr>
</table>
|
用在表格模拟的行列表上，对应table下面的tr标签。 |
| separator | 表示分隔 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">美女
<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="separator" tabindex="-1"></li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
反应在下图就是那条黑色的1像素水平分隔线： |
| slider | 表示滑动条 |
<div>
<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
role="slider" src="slider_control.png" />
<div role="presentation" tabindex="0">45</div>
</div>
|
|
| spinbutton | 表示微调 |
<div role="spinbutton"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
50</div>
|
例如下面这个数值微调效果截图： |
| tab | 表示标签 |
<div>
<ul role="tablist">
<li aria-selected="true" role="tab" tabindex="0">美女</li>
<li role="tab" aria-selected="false" tabindex="-1">淑女</li>
<li role="tab" aria-selected="false" tabindex="-1">熟女</li>
<li role="tab" aria-selected="false" tabindex="-1">腐女</li>
</ul>
</div>
|
 |
| tablist | 表示标签列表 |
<div>
<ul role="tablist">
<li aria-selected="true" role="tab" tabindex="0">美女</li>
<li role="tab" aria-selected="false" tabindex="-1">淑女</li>
<li role="tab" aria-selected="false" tabindex="-1">熟女</li>
<li role="tab" aria-selected="false" tabindex="-1">腐女</li>
</ul>
</div>
|
|
| tabpanel | 表示标签面板 |
<div role="tabpanel">
<ul role="tablist"><-- 选项卡 --></ul>
<div id="panel1" aria-labelledby="tab1" role="tabpanel">
<ul>
<li><input id="girl1" type="radio" name="girl" value="q" />
<label for="girl1">晴川</label></li>
<li><input id="girl2" type="radio" name="girl" value="j" checked />
<label for="girl2">静秋</label></li>
<li><input id="girl3" type="radio" name="girl" value="h" />
<label for="girl3">黄小仙</label></li>
</ul>
</div>
<div id="panel2" aria-labelledby="tab2" role="tabpanel"></div>
<div id="panel3" aria-labelledby="tab3" role="tabpanel"></div>
<div id="panel4" aria-labelledby="tab4" role="tabpanel"></div>
</div>
|
|
| timer | 表示计数 |
<div role="timer" aria-atomic="true" aria-relevant="all">0</div> |
模拟计数器，使用在动态显示规律数值变化的地方 |
| toolbar | 表示工具栏 |
<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> |
左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。 |
| tooltip | 表示提示文本 |
<div>
<label id="name_label" for="name">姓名:</label>
<input type="text" id="name" name="name" aria-labelledby="name_label"
aria-describedby="tip" aria-required="false" />
<div id="tip" role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div>
</div>
|
如下图黄色的这个提示框： |
| tree | 表示树形 |
<ul role="tree">
<li aria-expanded="true" tabindex="-1" role="treeitem">
<img alt="展开" src="expanded.gif" />美女
<ul role="group"></ul>
</li>
<li aria-expanded="false" tabindex="0" role="treeitem">
<img alt="收起" src="contracted.gif" />淑女
<ul role="group"></ul>
</li>
</ul>
|
效果见下面treeitem中的图。 |
| treeitem | 表示树结构选项 |
<ul role="tree">
<li aria-expanded="true" tabindex="-1" role="treeitem">
<img alt="展开" src="expanded.gif" />美女
<ul role="group">
<li tabindex="-1" role="treeitem">晴川</li>
<li tabindex="-1" role="treeitem">静秋</li>
<li tabindex="-1" role="treeitem">黄小仙</li>
</ul>
</li>
<li aria-expanded="false" tabindex="0" role="treeitem">
<img alt="收起" src="contracted.gif" />淑女
<ul role="group"></ul>
</li>
</ul>
|
 |
| 属性名 | 属性值 | 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" 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">晴川</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, 表示该区域验证无效。 |
<ul aria-atomic="true" aria-busy="true" aria-live="polite"> |
如果某个区域内(如这里ul)有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。 |
| aria-controls | 字符串。空格分隔的id属性值列表。 |
<h3 id="tab1" aria-selected="true" aria-controls="panel1"
aria-expanded="true" role="tab" tabindex="0">姑娘们</h3>
<div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel">
<h3 tabindex="0">请选择你中意的美女……</h3>
</div>
|
该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被role为group,region, 或widget的元素使用。 |
| aria-describedby | 字符串。空格分隔的id属性值列表。 |
<ul role="group">
<li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
<li role="checkbox" aria-checked="false"
aria-describedby="desc1" tabindex="0">晴川</li>
</ul>
<p id="desc1">杨幂饰演的穿越女王~~</p>
|
同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。 |
| aria-dropeffect | 字符串。表示拖拽效果。可选值有：copy, move,reference, execute,popup, none, 依次表示：复制，移动，参照，执行，弹出以及没有效果。 |
<-- 暂无HTML示例 --> |
该属性用在拖拽上。 |
| aria-flowto | 字符串。空格分隔的id值们。 |
<-- 暂无HTML示例 --> |
如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。 |
| aria-grabbed | 字符串。拖拽中元素的捕获状态。可选值有:true,false, undefined. 默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。 |
<-- 暂无HTML示例 --> |
该属性用在拖拽上。类似于HTML5中的draggable属性。 |
| aria-haspopup | 字符串。true表示点击的时候会出现菜单或是浮动元素；false表示没有pop-up效果。 |
<ul role="menubar" title="美女菜单">
<li role="menuitem" tabindex="0" aria-haspopup="true">
美女<ul role="menu" aria-hidden="true">
<li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
<li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
</ul>
</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
<li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
</ul>
|
|
| aria-label | 字符串。 |
<-- 暂无HTML示例 --> |
定义一个字符串值标记当前元素。 |
| aria-labelledby | 字符串。空格分隔的id们 |
<div aria-labelledby="title" role="alertdialog"><h3 id="title">标题</h3></div> |
aria-labelledby一般用在区域元素上，对于的id一般为对应的标题或是标签元素的id.关系型属性。 |
| aria-level | 数值。表示等级。 |
<div aria-level="2">次标题</div> |
上面的HTML类似于<h2>次标题</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表示一次可以选择多个项。 |
<-- 暂无HTML示例 --> |
例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。 |
| aria-owns | 字符串。值为目标元素id. |
<input id="cb1-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">晴川</li>
<li id="cb1-opt2" role="option">静秋</li>
<li id="cb1-opt3" role="option">黄小仙</li>
</ul>
|
aria-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。 |
| aria-posinset | 数值。表示当前位置。 |
<-- 暂无HTML示例 --> |
用在设置和获取一个集合内某项的当前位置。 |
| aria-readonly | 字符串。表示是否只读。默认为false, 表示元素值可以被修改；true表示元素指不能被改变。 |
<table id="grid1" role="grid" aria-labelledby="girl_label" aria-readonly="true">
<caption id="girl_label">美女们</caption>
<tr>
<th id="grid1_q" tabindex="-1">晴川</th>
<th id="grid1_j" tabindex="-1">静秋</th>
<th id="grid1_h" tabindex="-1">黄小仙</th>
</tr>
</table>
|
|
| 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表示元素值是必需的。 |
<div>
<label id="name_label" for="name">* 姓名:</label>
<input type="text" id="name" name="name" aria-labelledby="name_label"
aria-describedby="tip" aria-required="true" />
<div id="tip" role="tooltip" aria-hidden="true">姓名不能为空</div>
</div>
|
多半用在表单控件中。对应HTML5中required属性。 |
| aria-secret | 字符串。表示机密状态。 |
<-- 暂无HTML示例 --> |
具体含义不详 |
| aria-setsize | 数值。设置的尺寸大小值。 |
<-- 暂无HTML示例 --> |
顾名思意 |
| aria-sort | 字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：ascending(↑),descending(↓), none,other. |
<-- 暂无HTML示例 --> |
Widget组件应用属性。 |
| aria-valuemax | 数值。表允许的最大值。 |
<div>
<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
role="slider" src="slider_control.png" />
<div role="presentation" tabindex="0">45</div>
</div>
|
用在范围组件上。对应于HTML5中的max属性。 |
| aria-valuemin | 数值。表示允许的最小值。 |
<div>
<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
role="slider" src="slider_control.png" />
<div role="presentation" tabindex="0">45</div>
</div>
|
用在范围组件上。对应于HTML5中的min属性。 |
| aria-valuenow | 数值。表示当前值。 |
<div>
<img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
role="slider" src="slider_control.png" />
<div role="presentation" tabindex="0">45</div>
</div>
|
用在范围组件上。对应于value属性。 |
| aria-valuetext | 字符串。定义等同于aria-valuenow人可读的文本。 |
<-- 暂无HTML示例 --> |
用在范围组件上。 |
| 属性状态 | 属性值 | HTML示意 | 说明 |
|---|---|---|---|
| aria-checked | 字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。 |
<ul role="group">
<li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
<li role="checkbox" aria-checked="false" tabindex="0">晴川</li>
<li role="checkbox" aria-checked="true" tabindex="0">静秋</li>
<li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li>
</ul>
|
该属性用来表明用户是否选择了某些项（如左边这个截图所示）。 |
| aria-disabled | 字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态。 |
<div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div> |
对应单复选框等控件的disabled属性，一般用在自定义模拟控件中。 |
| aria-expanded | 字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。 |
<h3 id="tab1" aria-selected="true" aria-controls="panel1"
aria-expanded="true" role="tab" tabindex="0">姑娘们</h3>
<div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel">
<h3 tabindex="0">请选择你中意的：</h3>
<ul>
<li><input id="p1_1" type="radio" name="girl" value="q" />
<label for="p1_1">晴川</label></li>
<li><input id="p1_2" type="radio" name="girl" value="j" checked />
<label for="p1_2">静秋</label></li>
<li><input id="p1_3" type="radio" name="girl" value="h" />
<label for="p1_3">黄小仙</label></li>
</ul>
</div>
|
 例如在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的open属性。 |
| aria-hidden | 字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见。 |
<div aria-hidden="false">23%</div> |
该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的div, 当前aria-hidden为false, 表示该进度值是可见的。 |
| 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" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div> |
左边HTML表示按钮已经按下，同时处于禁用状态。 |
| aria-selected | 字符串。表示选择状态。可选值有：true, false,undefined. 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。 |
<div>
<ul role="tablist">
<li role="tab" aria-selected="true" tabindex="0">美女</li>
<li role="tab" aria-selected="false" tabindex="-1">淑女</li>
<li role="tab" aria-selected="false" tabindex="-1">熟女</li>
<li role="tab" aria-selected="false" tabindex="-1">腐女</li>
</ul>
</div>
|
元素被选中表明其处于某种交互之中，因此选中元素很可能处于focus焦点获取状态。 |
注意：为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue).
七、附图
末了，附上09年，腾讯（好像现在叫isux）团队弄的张ARIA相关大图：
点击图片查看大图
