WAI-ARIA无障碍网页资料
Posted 西门小白菜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WAI-ARIA无障碍网页资料相关的知识，希望对你有一定的参考价值。
一、ARIA是啥？
WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
虽然html5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。所以ARIA才显得更加重要。
其次，ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的javascript库jQuery, 以及衍生的jQuery Mobile早已支持了ARIA，国内知名JavaScript库kissy也在11年支持了ARIA并在实际项目中使用了。
二、实际应用的例子
本例来自淘宝首页，示例对象见下截图（淘宝网右上角选项卡）：
大家主要到这个部分的地方，F12开启开发人员模式，可以发现，后台有一行代码，如下：
这个就是ARIA在现实应用的例子。
三、属性
以下是整理后的：ARIA属性值表、ARIA属性表、ARIA状态属性表。
（1）、 ARIA属性表：
ARIA Roles值示意及说明表
| role属性值 | 含义 | HTML示意 | 说明 |
| alert | 警告 |
1 <p id="ajax_error_alert" role="alert"></p>
|
例如ajax操作返回错误信息的div标签。 |
| alertdialog | 表示警告弹出框 |
1 <div aria-labelledby="alert_title" aria-hidden="false" tabindex="0" role="alertdialog" id="alert1"> 2 <p id="alert_title">弹出框</p> 3 <p id="alert_message">哥，你输入的时间穿越了，请重新输入！</p> 4 <input type="button" value="关闭" id="alert_close" /> 5 </div>
|
|
| application | 表示应用 |
1 <div id="application" role="application"> 2 <label id="date_label" for="date">时间</label>: 3 <input id="date" type="text"/> 4 <button id="bn_date">选择日期...</button> 5 <div id="dp1" class="datepicker" aria-hidden="true"> 6 <-- 时间选择控件具体 --> 7 </div> 8 </div>
|
例如自定义的时间选择器。 |
| button | 表示按钮 |
1 <div role="toolbar" tabindex="0" aria-activedescendant="button1"> 2 <img src="btncut.png" id="button1" role="button" alt="cut" /> 3 <img src="btncopy.png" id="button2" role="button" alt="copy" /> 4 <img src="btnpaste.png" id="button3" role="button" alt="paste" /> 5 </div>
|
就是一个button |
| checkbox | 表示复选框 |
1 <ul role="group"> 2 <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> 3 <li role="checkbox" aria-checked="false" tabindex="0">晴川</li> 4 <li role="checkbox" aria-checked="true" tabindex="0">静秋</li> 5 <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li> 6 </ul>
|
|
| combobox | 表示下拉列表框 |
1 <input id="cb1-edit" class="cb_edit" type="text" tabindex="0" 2 role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> 3 4 <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"> 5 <li id="cb1-opt1" role="option">晴川</li> 6 <li id="cb1-opt2" role="option">静秋</li> 7 <li id="cb1-opt3" role="option">黄小仙</li> 8 </ul>
|
|
| grid | 表示网格 |
1 <table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true"> 2 <caption id="grid1_label">美女们</caption> 3 <thead> 4 <tr> 5 <th id="grid1_q" tabindex="-1">晴川</th> 6 <th id="grid1_j" tabindex="-1">静秋</th> 7 <th id="grid1_h" tabindex="-1">黄小仙</th> 8 </tr> 9 </thead> 10 <tbody id="data"></tbody> 11 </table>
|
|
| gridcell | 表示网格单元 |
1 <table role="grid" aria-readonly="true"> 2 <tr role="row" aria-selected="false"> 3 <td role="gridcell" tabindex="-1">晴川</td> 4 <td role="gridcell" tabindex="-1">静秋</td> 5 <td role="gridcell" tabindex="-1">黄小仙</td> 6 </tr> 7 </table>
|
类似于table & table-cell |
| group | 表示组合并 |
1 <ul role="group"> 2 <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> 3 <li role="checkbox" aria-checked="false" tabindex="0">晴川</li> 4 <li role="checkbox" aria-checked="true" tabindex="0">静秋</li> 5 <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li> 6 </ul>
|
|
| heading | 表示应用程序标题头 |
1 <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>
|
|
| listbox | 表示列表框 |
1 <input id="cb1-edit" class="cb_edit" type="text" tabindex="0" 2 role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> 3 4 <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"> 5 <li id="cb1-opt1" role="option">晴川</li> 6 <li id="cb1-opt2" role="option">静秋</li> 7 <li id="cb1-opt3" role="option">黄小仙</li> 8 </ul>
|
|
| log | 表示日志记录 |
1 <div role="log" aria-atomic="false" aria-relevant="additions"></div>
|
类似三国杀右侧记录战事区域；或是比赛文字直播记录区域 |
| menu | 表示菜单 |
1 <ul role="menubar" title="美女菜单"> 2 <li role="menuitem" tabindex="0" aria-haspopup="true">美女 3 <ul role="menu" aria-hidden="true"> 4 <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li> 5 <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li> 6 <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li> 7 </ul> 8 </li> 9 <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li> 10 <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li> 11 <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li> 12 </ul>
|
|
| menubar | 表示菜单栏 |
1 <ul role="menubar" title="美女菜单"> 2 <li role="menuitem" tabindex="0" aria-haspopup="true">美女 3 <ul role="menu" aria-hidden="true"> 4 <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li> 5 <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li> 6 <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li> 7 </ul> 8 </li> 9 <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li> 10 <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li> 11 <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li> 12 </ul>
|
|
| menuitem | 表示菜单项 |
1 <ul role="menubar" title="美女菜单"> 2 <li role="menuitem" tabindex="0" aria-haspopup="true">美女 3 <ul role="menu" aria-hidden="true"> 4 <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li> 5 <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li> 6 <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li> 7 </ul> 8 </li> 9 <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li> 10 <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li> 11 <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li> 12 </ul>
|
|
| menuitemcheckbox | 表示可复选的菜单项 |
以上是关于WAI-ARIA无障碍网页资料的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap学习遇到的role属性--- 无障碍网页应用属性 |
