html - Anchor 标记在点击时应用了 :focus 样式

Question

我是网络可访问性的新手。

我将样式应用于a:focusas

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

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

有什么办法可以解决吗？

Answer 1

我过去为可访问性所做的事情是，按下选项卡以使用类似 javascript 的方式将 css 类应用于正文，.keyboard-active并且仅在该类处于活动状态时才应用焦点样式。

.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;
        }
    }
}

Answer 2

根据您的评论，我认为您需要为:active状态定义 CSS 规则，并且您不需要simplexity 解决方案中的额外类。

本质上，您需要这种类型的 CSS：

a:link { /* style rules for links in general */ }
a:visited { /* style rules for visited links */ }
a:hover { /* style rules for links on mouse hover */ }
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -1px;
}
a:active { /* style rules for links that are being activated */ }

如果悬停状态和焦点状态的样式相同，则可以将它们与选择器结合使用a:focus:hover。

我正在使用Eric Meyer 的博客文章谁订购了链接状态？.

另请参阅W3C 规范Selectors Level 3中的用户操作伪类 :hover、:active 和 :focus。