锚标签在点击时应用了 :focus 样式

Question

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

我将 a:focus 的样式应用为

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

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

有什么办法可以解决吗？

Answer 1

我过去为可访问性所做的工作是当按下 tab 以将 css class 应用到具有 javascript 的正文时，例如 .keyboard-active 并具有焦点样式仅在 class 处于活动状态时适用。

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

然后当用户用鼠标单击正文时，javascript 删除 .keyboard-active class（这样非键盘用户就看不到焦点 class 不再）。

对我有用，也被接受为正确的 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

基于, I think that you need to define a CSS rule for the :active state and that you don't need the extra class from .

本质上，您需要这种 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 的博文 Who Ordered the Link States? 中描述的 Link-Visited-Hover-Focus-Active 排序。

另请参阅 W3C 规范中的 The user action pseudo-classes :hover, :active, and :focus 选择器级别 3。

锚标签在点击时应用了 :focus 样式

Anchor tag has :focus style applied on click

html

css

web-accessibility