无障碍开发系列之焦点管理

欢迎访文我的博客YangChen’s Blog

说这之前先推荐两个网站来体验下无障碍操作，一个是美联航，另一个是汉莎航空。打开这两个网站后，用tab键操作下，就能感受到流畅的无障碍操作，这里面的一个关键接下来要说的焦点管理。

使元素可获得焦点

在正常情况，只有a标签、button以及input标签可以获得焦点，其他元素例如div、span等等是无法用是tab键获得焦点的。那么怎么样才能获得焦点呢？

方法就是：为标签属性中加入tabindex

例如：<div tabindex="0">这是能获得焦点的div</div>

添加了这个属性后，这个div元素就能够获得焦点了，tabindex的值也是很有讲究的，总的来说有三个状态

1. tabindex等于0的时候，这种情况下会按正常的顺序遍历到这个可获得焦点的元素，不会有顺序上的差异
2. tabindex大于0时，这种情况下会在遍历完tabindex="0"的元素后，再去遍历等于1、等于2的……以此类推。
3. tabindex等于-1，这种情况使用tab键不会获得这个元素的焦点，但是可以通过js获得