如何实现仅键盘焦点样式并保持可访问性？-css教程-PHP中文网

如何实现仅键盘焦点样式并保持可访问性？

Linda Hamilton

发布： 2024-11-04 02:28:01

原创

995 人浏览过

How to Implement Keyboard-Only Focus Styles and Maintain Accessibility?

实现仅键盘焦点样式

背景：
您可能不喜欢默认焦点样式元素。但是，您仍然希望具有键盘辅助功能的用户能够看到对焦环。在自定义焦点样式的同时保持可访问性可能具有挑战性。本文探讨了仅在使用键盘时启用焦点样式的解决方案。

解决方案：

删除默认焦点样式：

使用 CSS 从所有可聚焦元素中删除默认焦点样式。这可以防止不需要焦点时出现混乱的样式。

创建自定义可聚焦元素：

对于 span 或 div 等容器元素，请使用tabindex 属性使它们可聚焦。

应用自定义焦点样式：

a。内部元素焦点：

将焦点样式添加到容器元素内的内部元素。
这确保焦点样式在多层元素中可见。

b.外部元素焦点：

向外部元素添加事件侦听器，以删除鼠标单击或触摸时的焦点环。
这可以保持可访问性，同时防止鼠标期间不必要的焦点样式

示例代码：

<code class="css">button, a, span {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block;
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}

.btn__content:focus {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

登录后复制

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

登录后复制

结论：
通过在嵌套内部元素并从外部元素中删除默认焦点样式，您可以启用仅键盘焦点样式。这使您可以在自定义焦点外观的同时保持可访问性。

以上是如何实现仅键盘焦点样式并保持可访问性？的详细内容。更多信息请关注PHP中文网其他相关文章！