web无障碍实施细节（二）分离鼠标与键盘的focus轮廓样式

通常情况下，鼠标操作时，不需要出现focus轮廓样式，而键盘操作时，需要focus轮廓样式来确定焦点元素。

1.分析

为什么要 “分离鼠标与键盘事件的focus样式”？

为了回答这个问题，首先，我们明确一点：浏览器是有默认的focus样式的，当可以focus的元素，处于focus状态时，就会显示outline轮廓。

当我们设置了HTML tabindex属性的元素，鼠标点击就会出现以下情况：

其实我们不希望，这种outline轮廓在鼠标点击的时候不应该出现，但是键盘访问的时候需要出现（让用户知道当前聚焦元素）。但是，我们又不能简简单单设置outline:none来处理，因为这样会把键盘访问时候应当出现的焦点轮廓给隐藏掉，带来严重的无障碍访问问题。

元素的focus样式很重要，对应的outline轮廓也很重要。但是经过对比测试，outline轮廓相比focus样式，更能表示焦点状态。

outline轮廓是键盘操作用户确定焦点所处位置的重要样式。

2.解决方案

看来为了更好的体验，分离不同操作是否包含outline轮廓是需要的。

2.1 css :focus-visible伪类（备）

在目前版本的Chrome浏览器下，浏览器认为键盘访问触发的元素聚焦才是:focus-visible所表示的聚焦。换句话说，:focus-visible可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。

:focus:not(:focus-visible) {
    outline: 0;
}

这个办法很简单，但是兼容性嘛，再等等吧～～应该很快了……

2.2 js判断

使用JavaScript进行判断，如果元素的:focus触发是键盘访问触发，就给元素添加自定义的outline轮廓，否则，去除outline。

为了满足浏览器兼容性，我们是使用这个方法进行设置。

3.对应规范

wcag2.0 2.1.1 键盘 （A级）
内容的所有功能可通过键盘接口实现操作并且没有对每次键击做特定时限要求，除非底层功能是依赖用户的移动路径并且不做为端点的输入方法。

wcag2.0 2.4.7 焦点可见（AA级）
任何键盘可操作的用户界面应有一套操作模式，在该模式里键盘焦点指示是可见的。