WAIARIA无障碍网页应用属性完全展示.docx
《WAIARIA无障碍网页应用属性完全展示.docx》由会员分享，可在线阅读，更多相关《WAIARIA无障碍网页应用属性完全展示.docx（12页珍藏版）》请在冰豆网上搜索。
WAIARIA无障碍网页应用属性完全展示
WAI-ARIA无障碍网页应用属性完全展示
一、你至少应该知道ARIA是什么东西！
WAI-ARIA指无障碍网页应用。
主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。
尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。
而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
二、为什么需要ARIA？
回答标题问题前我先问其他几个问题？
如何让盲人用户知道当前浏览区域就是网站主导航？
如果让盲人用户知道点击某个按钮后出来的是弹框？
如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？
如何让盲人用户知道您使用了li标签是用来模拟标准select控件呢？
如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？
在你现有的知识范围内，您有办法解决上面的问题吗？
有人会说，我使用HTML5,恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。
因此，才需要ARIA.
三、ARIA是个非主流，咱不鸟！
ARIA是非主流吗？
真是睡在冻床上不知冷热啊。
ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA,几乎可以说是全方位支持。
流行的JavaScript库jQuery,以及衍生的jQueryMobile早早支持了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-的兄弟姐妹属性都可以从下面几个表中找到。
如果你被表格的高度吓住了不想看也没关系，记住这里，回头需要的时候再来找找，哦呵呵！
^_^
下面三个表，依次为：
ARIArole属性值表、ARIA属性表、ARIA状态属性表。
六、ARIA属性表
ARIARoles值示意及说明表role属性值
含义
HTML示意
说明
alert
表示警告
role="alert">
例如ajax操作返回错误信息的div标签。
alertdialog
表示警告弹出框
时间:
选择日期...
例如自定义的时间选择器。
button
表示按钮
role="button"alt="cut"/>
role="button"alt="copy"/>
role="button"alt="paste"/>
大家都懂的，没啥好说的
checkbox
表示复选框
role="checkbox"aria-checked="mixed"tabindex="0">所有姑娘
role="checkbox"aria-checked="false"tabindex="0">晴川
role="checkbox"aria-checked="true"tabindex="0">静秋
role="checkbox"aria-checked="true"tabindex="0">黄小仙
同样，大家都懂的，没啥好说的combobox
表示下拉列表框
晴川
静秋
黄小仙grid
表示网格
role="grid"aria-labelledby="grid1_label"aria-readonly="true">
美女们
晴川
静秋
黄小仙
gridcell
表示网格单元
role="gridcell"tabindex="-1">晴川
role="gridcell"tabindex="-1">静秋
role="gridcell"tabindex="-1">黄小仙
类似于table&table-cell
group
表示组合并
role="group">
所有姑娘
晴川
静秋
黄小仙heading
表示应用程序标题头
role="heading"aria-live="assertive"aria-atomic="true">2012年3月
例如时间选择器中的月份标题：
listbox
表示列表框
晴川
静秋
黄小仙log
表示日志记录
role="log"aria-atomic="false"aria-relevant="additions">
类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。
menu
表示菜单
美女
role="menu"aria-hidden="true">
晴川
静秋
黄小仙
靓女
淑女
熟女menubar
表示菜单栏
role="menubar"title="美女菜单">
美女
晴川
静秋
黄小仙
靓女
淑女
熟女menuitem
表示菜单项
role="menuitem"tabindex="0"aria-haspopup="true">美女
晴川
静秋
黄小仙
role="menuitem"tabindex="-1"aria-haspopup="false">靓女
role="menuitem"tabindex="-1"aria-haspopup="false">淑女
role="menuitem"tabindex="-1"aria-haspopup="false">熟女menuitemcheckbox
表示可复选的菜单项
美女
role="menuitemcheckbox"tabindex="-1"aria-checked="true">晴川
role="menuitemcheckbox"tabindex="-1"aria-checked="true">静秋
role="menuitemcheckbox"tabindex="-1"aria-checked="false">黄小仙
靓女
淑女
熟女menuitemradio
表示只能单选的菜单项
美女
role="menuitemradio"tabindex="-1"aria-checked="true">晴川
role="menuitemradio"tabindex="-1"aria-checked="false">静秋
role="menuitemradio"tabindex="-1"aria-checked="false">黄小仙
靓女
淑女
熟女option
表示选项
静秋
role="option">黄小仙presentation
表示称述
45
左边示例的HTML为一个自定义的滑动条。
而role="presentation"所在div显示的就是当前滑动位置对应的值。
progressbar
表示进度条
role="progressbar"
aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"tabindex="0">
23%radio
表示单选
美女们：
role="radio"aria-checked="false">
晴川
role="radio"aria-checked="true">
静秋
role="radio"aria-checked="false">
黄小仙
自定义单选框控件的时候使用，下图为左侧HTML的效果图：
radiogroup
表示单选组
美女们：
role="radiogroup"aria-labelledby="girl_label">
晴川
静秋
黄小仙
region
表示区域
role="region"tabindex="-1"aria-expanded="false">
我之所以会出现，是因为主人你点击了某个命中注定的按钮。
例如用在div区域显示隐藏切换的时候。
row
表示行
role="row"aria-selected="false">
晴川
静秋
黄小仙
用在表格模拟的行列表上，对应table下面的tr标签。
separator
表示分隔
美女
晴川
role="separator"tabindex="-1">
静秋
黄小仙
靓女
淑女
熟女
反应在下图就是那条黑色的1像素水平分隔线：
slider
表示滑动条
45spinbutton
表示微调
role="spinbutton"
aria-valuemin="0"aria-valuemax="100"aria-valuenow="50"tabindex="0">
50
例如下面这个数值微调效果截图：
tab
表示标签
role="tab"tabindex="0">美女
role="tab"aria-selected="false"tabindex="-1">淑女
role="tab"aria-selected="false"tabindex="-1">熟女
role="tab"aria-selected="false"tabindex="-1">腐女
tablist
表示标签列表
role="tablist">
美女
淑女
熟女
腐女
tabpanel
表示标签面板
role="tabpanel">
role="tabpanel">
晴川
静秋
黄小仙
role="tabpanel">
role="tabpanel">
role="tabpanel">timer
表示计数
role="timer"aria-atomic="true"aria-relevant="all">0
模拟计数器，使用在动态显示规律数值变化的地方
toolbar
表示工具栏
role="toolbar"tabindex="0"aria-activedescendant="button1">
左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
tooltip
表示提示文本
姓名:
必须是美女姓名哦~~
如下图黄色的这个提示框：
tree
表示树形
role="tree">
美女
淑女
效果见下面treeitem中的图。
treeitem
表示树结构选项
role="treeitem">
美女
role="treeitem">晴川
role="treeitem">静秋
role="treeitem">黄小仙
role="treeitem">
淑女
升级会员 