ARIA无障碍技术

ARIA

　　Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用（特别是那些由 Ajax 和 JavaScript 开发的）对于残障人士更易使用的各种机制。例如，ARIA 提供了易用的导航地标、JavaScript 组件、表单提示以及错误信息、实时内容更新等。主要用来标识页面中涉及到动态交互的地方，这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。

　　ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。

　　ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。

 <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

　　由于这个滚动条是用div写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，来给元素增加特定的属性。举个例子，role="progressbar"这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。aria-valuemin 和aria-valuemax 属性表明了进度条的最小值和最大值。 aria-valuenow则描述了当前进度条的状态， 因此它得用JavaScript来更新。

 <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>

这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态，屏幕阅读器就能阅读出其内容了。

使用aria-label时需注意，

　　(1) 同时使用aria-label和label for时，忽略后者。

　　(2) 同时使用aria-label和aria-labelledy时，忽略前者

　　(3) IE不支持对input使用aria-label，但是支持aria-labelledby。

　　(4) 使用aria-labelledby时，即使对应的注释文本被隐藏，依然能读出来。

　　(5) label for针对表单元素和div有效，span不行

(6) 表单元素中input type=button，不用加注释，读屏软件可以读出value

(7) 不是所有的title读屏软件都读，a，span以及button的title个别情况下不读，a，span在IE下直接读标签里的内容，button读value值

(8) a标签必须加上href属性之后才能定位，否则就要用到tabindex.

　　在HTML5中，可以验证所有的ARIA属性。新的标记元素（<main>, <header>, <nav> etc）都已具有了ARIA角色，所以就没必要再标注说明了。

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型的解析有关。