一、你至少应该知道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属性表 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> 自定义的出错提示弹框。