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

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

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

使元素可获得焦点

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

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

例如：

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

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

tabindex等于0的时候，这种情况下会按正常的顺序遍历到这个可获得焦点的元素，不会有顺序上的差异

tabindex大于0时，这种情况下会在遍历完

tabindex="0"

的元素后，再去遍历等于1、等于2的……以此类推。

tabindex等于-1，这种情况使用tab键不会获得这个元素的焦点，但是可以通过js获得，对于需要脚本控制的元素，通常会把值设置为-1

焦点管理

焦点返回

焦点返回是个常用的操作，比如弹出一个模拟的对话框，关闭后焦点需要返回到之前触发的dom元素上，这样才能有一个良好的体验。

实现这个的一个关键就是使用

document.activeElement

属性。这个属性始终会引用DOM中当前获得焦点的元素。元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。

所以在做一个模拟对话框时，可以用

document.activeElement

记录下触发焦点的元素焦点，然后在返回回去，例如；

var lastfocus = document.activeElement;
//打开对话框并获得焦点
new dialog();
dialog.show();
dialog.hide(function(){
lastfocus.focus();
});

浏览器兼容性:IE 4+、Firefox 3+、Safari 4+、Chrome和Opera 8+都支持

焦点判断

接下来就是判断用户与页面是否处在交互状态，用到的关键是

document.hasFocus()

方法。

示例代码:

var btn = document.getElementById('btn');
btn.focus();
console.log(document.hasFocus());

注意这个无法判断某个元素是否在获得焦点状态。在一些在线笔试考试中，当页面切换时就会出现提示，告诉你不要再干别的，我猜用到的方法就是这个吧。

焦点限制

有时候我们需要对一些对话框做一些无障碍处理。例如对于一个对话框，当不主动关闭的时候，用键盘操作焦点只能在这个对话框里转，不能跳出去，这里用到的就是焦点限制，让焦点限制在这个对话框里。我在开发中对于焦点限制这块处理的并不是很好，用到了很多if判断，这对于性能来说是在是一个不必要的损害。这里介绍个比较不错的方法，引自这篇文章创建无障碍的对话框，这里直接引用下吧。

焦点限制的基本思路是使用事件捕获（event capturing）侦听focus事件，这种方法由Peter-Paul Koch[2]推广，如今已在JavaScript库中广泛使用。由于focus不冒泡（bubble），你无法在事件流的冒泡阶段捕捉到它。相反，你可以通过使用事件捕获方法捕获页面上的所有focus事件。之后，你只需确定获得焦点的元素是否在对话框中。如果没有，则将焦点设置在对话框上。代码是非常简单的：

document.addEventListener("focus", function(event) {

var dialog = document.getElementById("my-dialog");

if (dialogOpen && !dialog.contains(event.target)) {
event.stopPropagation();
dialog.focus();
}

}, true);

PS.这里说个题外话，简单提下这个contains方法，有时候处理点击其他关闭这种事情时，可以用这个方法，就是判断下点击元素是否被对话框包含，如果不包含则关闭，有空专门写下吧。

最后

焦点管理这块的几个重点要素：创建、返回、判断、限制，就算是大体的说了一下，当然在实际开发中对于焦点的处理远不止这些，但是有了这几个基础，其他的问题处理起来也不是没有思路啦。

参考文章

模拟按钮的可访问性

创建无障碍的对话框

[焦点管理]DOCUMENT.ACTIVEELEMENT与模态对话框