aria初探（一）

之前在学习和工作当中碰到的一些有关无障碍的学习心得，比较杂，做一下小结。

（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 to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.”

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

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

元素共用的states和properties截取图片

举个伪元素例子，

<div role="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 popup context 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和label for时，忽略后者。

(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" />