html - anchor 标签有 :focus style applied on click

Question

我是网络辅助功能的新手。

我将 a:focus 的样式应用为

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

当我按 Tab 键浏览网页中的 anchor 标记时它工作正常，问题是当我单击 anchor 标记时，此焦点样式也适用但我不想要。

有什么办法可以解决吗？

Answer 1

我过去为可访问性所做的是，当按下 tab 键时，使用 .keyboard-active 之类的 javascript 将 css 类应用到 body 并且只有在该类时才应用焦点样式处于事件状态。

.keyboard-active a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

然后当用户用鼠标点击正文时，让 javascript 删除那个 .keyboard-active 类(这样非键盘用户就不会再看到那个焦点类)。

对我有用，也被接受为正确的 ADA 解决方案。

如果你恰好在使用 sass(只是提一下，因为很多 SO 用户混淆了两者)那么你可以像这样将所有这些 ada 样式嵌套在里面:

.keyboard-active {
    /* styles */
    a {
        /* styles */
        &:focus {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -1px;
        }
    }
}