Question

WCAG 2.0建议在链接元素上使用:focus时使用:hover来支持键盘导航。这适用于链接元素，但两者之间存在一些差异。

任何元素都可以具有:hover状态，而只有极少数可以聚焦
当鼠标悬停在某个元素上时，您也会将鼠标悬停在其所有父元素上。焦点不是这种情况

这个问题严格来说是关于CSS的。有没有办法模拟键盘导航:hover（如上所述）的行为？或者有没有强烈的理由为什么人们不希望这样？

为了更清楚，这里有一个例子：

HTML：

<div id="box">
    foo bar
    <a href="#">click me</a>
</div>

的CSS：

#box {
    opacity: 0.3;
}
#box:hover {
    opacity: 1;
}
#box a:focus {
    opacity: 1;
}

使用鼠标时，我会在使用之前将鼠标悬停在link元素上。由于:hover状态向上传播#box将完全不透明。

使用键盘时，我会在使用前关注链接元素。由于:focus状态不向上传播#box，不完全不透明。

Answer 1

这可以在包含focusin / focusout事件的JavaScript中完成（它们就像focus和blur，但它们会冒泡）。 Here是一个小提琴。

归结为这个功能：

var deepFocus = function(element, cls) {
    cls = cls || 'deep-focus';

    element
        .on('focusin', function() {
            element.addClass(cls);
        })
        .on('focusout', function() {
            var value = !!element.find(':focus').length;
            element.toggleClass(cls, value);
        });
};

更新：有一个草稿规范，其中包含:focus-within选择器，可以完全按照此处的要求执行操作。

Answer 2

要使：对elemnts的焦点效果不是tabindex属性中需要使用的链接和表单元素。当你把它放在每个元素上时，你可以为它指定：focus pesudo元素。

在您的示例中，您需要了解如果链接不透明度发生变化，不透明度也会保留在父div上。

你可以看到工作样本here。或示例使用tabindex

<div tabindex="1">Touch the Div</div>

use：focus as a：hover替换键盘导航

2 个答案: