ARIA角色，关系，状态和属性可用于WEB应用定义出能够被屏幕阅读器这样的辅助技术理解的工作方式。

因为学习到了这个技术，所以好不容易搜索到类似的信息加以收藏。以下内容转载自张鑫旭学长的博客：%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

一、你至少应该知道ARIA是什么东西！

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

而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！

二、为什么需要ARIA？

回答标题问题前我先问其他几个问题？

在你现有的知识范围内，您有办法解决上面的问题吗？有人会说，我使用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属性表 ARIA Roles值示意及说明表

role属性值含义HTML示意说明

alert 表示警告 <p role="alert"></p> 例如ajax操作返回错误信息的div标签。

alertdialog 表示警告弹出框 <div aria-labelledby="alert_title" aria-hidden="false" tabindex="0" role="alertdialog"> <p>弹出框</p> <p>哥，你输入的时间穿越了，请重新输入！</p> <input type="button" value="关闭" /> </div> 自定义的出错提示弹框。

application 表示应用 <div role="application"> <label for="date">时间</label>: <input type="text"/> <button>选择日期...</button> <div aria-hidden="true"> <-- 时间选择控件具体 --> </div> </div> 例如自定义的时间选择器。

button 表示按钮 <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" role="button" alt="cut" /> <img src="btncopy.png" role="button" alt="copy" /> <img src="btnpaste.png" 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 type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li> </ul>