Question

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

我将a:focus的样式应用为

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

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

有什么办法可以解决吗？

Answer 1

我过去为可访问性所做的是当按下Tab键以使用类似.keyboard-active的javascript将css类应用于正文时，并且只有在该类处于活动状态时才应用焦点样式。

.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

基于your comment，我认为您需要为:active状态定义CSS规则，并且您不需要simplexity's solution中的额外类。

基本上，你需要这种类型的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?中描述的链接访问过的Hover-Focus-Active 排序。

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

锚标签具有：点击时应用的焦点样式

2 个答案: