tabIndex 和 aria注意点

转载自http://www.cnblogs.com/yilian/archive/2011/05/23/aria.html

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

（2）Aria

WAI网站对它的描述是“WAI-ARIA, the Accessible Rich Internet Applications Suite,defines a way to make Web content and Web applications more accessible topeople with disabilities. It especially helps with dynamic content and advanceduser interface controls developed with Ajax, HTML, JavaScript, and relatedtechnologies.”

可以看出，它用来标识页面中涉及到动态交互的地方，这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。

aria由一套属性组成，属性分为role以及对应的states和properties，aria将html元素分为六种role，每种有对应的states和properties，但有一些是共用的，比如

举个伪元素例子，

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

这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态，在读屏软件（NVDA）中读出来就是：

再举个动态交互的例子，这是etao（一淘）主页的菜单代码

NVDA读出来就是：

这里用到了menubar和menuitem角色，用来标识这是个菜单，同时使用了aria-haspopup属性，表示这个菜单有子菜单。

wai-aria文档对Haspopup的解释是“Indicates that the element has a popupcontext menu or sub-level menu.”值为trun/false，我将其改为1或0，也没有发现有影响，应该是可以的，不过还是遵从标准比较好。

******************************哗啦啦的分界线*****************************************

目前我们用到比较多的aria是aria-label和aria-labeledby，（可见etao），这两个元素用来对元素进行注释，aria-labelledby的值是id值，用来设定多个注释，aria-label的值是字符串。

从第一个图中可以看出，aria-label是通用的属性，但是实际上目前读屏软件都不支持在span上使用aria-label

这一点比较郁闷，因为淘宝上很多列表内的金额，数目等信息是用span实现的，不能给span添加注释，但是div可以。

使用aria-label时需注意，

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

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

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

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

例如：

<label id="labeltext" for="Text1" style="display:none">隐藏的姓名:</label><span id="specialtext" style="display: none">隐藏的解释</span><input type="text" id="Text1" aria-labelledby="labeltext specialtext" aria-label="专门解释" title="XYZ" />

NVDA读出来就是

用label for注释时隐藏的label也可以读出来，不过兼容性稍差，在FF4.0.1中NVDA不能读。

(5) 实际运用注释时通常在title和aira之间徘徊，因为两者的功能类似，读屏软件都能读出来，但是title会浮出一个提示层，aria不会，不过title的兼容性比较好，它是标准属性

所以在具体应用中需要有所取舍，我认为，在不影响用户体验的情况下，尽量用title。一些不能用的地方，例如列表中的li，就选择用aria-label，aria主要还是在用于解释交互行为方面比较强大。

******************************淅沥沥的分界线*****************************************

还有一些tip:

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

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

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

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

其它的属性可以在以后的项目中慢慢探索。

注意：

（1）aria只是用在html中的一系列属性，其作用是解释标签行为和状态，要实现动态效果还是需要js。

　　（2）aria要发挥效果，需要浏览器和AT（assistive tool，包括读屏软件，屏幕放大器等）的共同作用，浏览器先映射aria到操作系统，操作系统通知 AT ，AT再处理这些标签，

如果浏览器和AT有一方对aria支持不好，效果就不好，经过我测试，FF支持的是比较好的。而读屏软件中 NVDA的比较好，国内争渡，永德不错。

另外，IE6是不支持aria的。

最后附上aria的role及对应states和properies的图，链接中是SVG格式的。

参考：

http://www.ibm.com/developerworks/cn/web/wa-aj-web20/

http://www.ibm.com/developerworks/cn/web/1003_sunqy_access/

http://www.w3.org/TR/wai-aria/rdf_model

http://webaim.org/techniques/forms/controls