时间戳

首页 > 解决方案 > 仅使用键盘导航聚焦元素周围的边框（不是在单击元素后）

javascript - 仅使用键盘导航聚焦元素周围的边框（不是在单击元素后）

问题描述

我的应用程序中存在以下焦点问题。我想使应用程序适应 wcag 焦点要求，并且我对某些元素有问题 - 例如过滤器 - 他们没有收到按钮周围的边框。

如果焦点在我的过滤器上 - 元素接收 ui-state-focus 类，我添加border: 1px dotted red !important;到此类 - 现在边框在键盘选项卡按钮导航中可见，但不幸的是，当我单击以使用鼠标过滤标签时，红色边框也可见 - 我鼠标点击后不想要这个边框。

在我单击过滤器以避免扩展过滤器出现红色边框后，您知道如何从元素中隐藏类 ui-state-focus 吗？

我使用 primefaces/jsf 并自动添加类 ui-state-focus，但是如何仅在键盘导航期间显示边框（并且在我单击元素后也不显示）？

在此处输入图像描述

标签： javascripthtmlcssfocuswcag

解决方案

您不需要使用 javascript 并添加一个类。

您可以使用 CSS :focus 选择器来设置焦点样式。

button:focus {
  border: 1px dotted red;
}

如果您只想为键盘用户设置焦点样式，可以使用 CSS :focus-visible 选择器。用户代理将确定何时显示您的焦点样式。他不会在按钮上为鼠标用户显示它。

button:focus-visible {
  border: 1px dotted red;
}

您是否考虑过使用轮廓而不是边框​​？

推荐阅读