Web Accessibility保留键盘焦点而不干扰鼠标样式的实现方法

页面里的焦点不是鼠标样式的附属品，而是键盘用户确认当前位置的主要线索。比较稳妥的做法，是保留元素获得焦点这一事实，再用 :focus-visible 控制“什么时候把焦点环强调出来”。这样鼠标点击按钮时不会突然出现装饰性边框，按 Tab 导航时仍然能清楚看到当前位置。

本文只处理焦点可见性，不替代按钮语义、键盘事件或完整的 ARIA 组件设计。官方参考地址：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

先保留浏览器焦点，再区分输入方式

常见的视觉冲突是：鼠标点击按钮后出现一圈边框，设计者于是写下 button:focus { outline: none; }。这会连键盘导航的焦点提示一起删除。问题不在于焦点存在，而在于所有输入方式都被套用了同一套视觉。

MDN 对键盘可访问性的要求很直接：能接收键盘焦点的元素应该有可见的焦点样式。标准按钮、链接和输入框通常已经有浏览器默认样式；自定义控件则要主动补上提示。先检查 HTML 结构，再处理 CSS：

筛选

如果一个视觉卡片需要可操作，应优先改成按钮或链接，而不是给普通 div 加上点击事件后再用 tabindex 拼出半套行为。焦点样式解决的是“当前位置是否可见”，不负责补齐激活、禁用和读屏语义。

用 :focus-visible 只显示键盘焦点样式

可以把基础规则和键盘增强规则分开写。基础规则保留浏览器或项目已有的焦点表现，增强规则只在用户代理判断焦点应该明显时出现。不要假设它只等于“键盘”，因为浏览器还会结合当前控件和输入上下文作判断。

/* 基础规则：焦点存在时不改变布局，只保留可辨识的轮廓 */
.filter-button:focus {
  outline: 2px solid transparent;
  outline-offset: 3px;
}

/* 键盘增强：需要明显提示时使用高对比轮廓 */
.filter-button:focus-visible {
  outline: 3px solid #f0a63a;
  outline-offset: 3px;
  border-radius: 6px;
}

/* 鼠标点击不再强制显示同一圈装饰，但焦点没有被移除 */
.filter-button:focus:not(:focus-visible) {
  outline-color: transparent;
}

这里的 outline 不占布局空间，outline-offset 则把提示线从控件边缘移开，减少内容被遮挡的机会。颜色要和按钮背景、页面背景一起判断，不能只凭设计稿上的色值决定可见性。

在自定义组件和脚本聚焦时补齐边界

组合框、弹窗和自定义列表常会在打开后把焦点移到内部元素。此时不要用隐藏轮廓来掩盖跳动，而要保证被聚焦的元素有稳定的 :focus-visible 表现。脚本聚焦的目标也必须真实存在、可聚焦，且不会把焦点送到用户无法理解的位置。

// 打开面板后把焦点移到第一个可操作控件，并保留可见性判断
const panel = document.querySelector('#filter-panel');
const firstControl = panel?.querySelector('button, input, select, [tabindex="0"]');

if (firstControl) {
  // 不用 blur 或隐藏 outline 伪装完成，交给浏览器判断焦点提示
  firstControl.focus();
}

tabindex="-1" 可以让脚本把焦点放到标题或面板容器，但它不会自动进入普通 Tab 顺序；这类元素尤其需要检查焦点环是否被容器的 overflow: hidden 裁掉。输入框、文本区域等需要持续编辑的控件，即使鼠标点击后显示焦点，也不要为了统一外观而强行隐藏。

用键盘、鼠标和高对比检查结果

最小检查清单要覆盖三条路径：刷新页面后连续按 Tab 和 Shift+Tab，确认焦点顺序合理且每一站都可见；用鼠标点击同一按钮，确认不出现突兀的装饰性焦点环，但按钮仍保持可操作；再打开浏览器或系统的高对比、强制颜色相关设置，确认轮廓没有变成不可见或被背景吞掉。

最终判断不是“鼠标点击看起来更干净”，而是键盘用户能否在不依赖颜色记忆的情况下知道自己在哪。若需要兼容较旧浏览器，可以保留 :focus 作为基础样式，再渐进增强 :focus-visible；不要为了兼容而回到全局删除焦点的写法。

相关问题

为什么不用一个 :focus 规则解决所有情况？

:focus 只表达元素当前拥有焦点，无法区分不同输入路径。把它用于唯一的强样式，通常会让鼠标点击和键盘导航共享同一外观。

可以直接写 outline: none 吗？

不建议全局直接删除。只有在同一规则中提供了等价、可辨识且经过键盘检查的替代样式时，才有理由调整默认轮廓。

focus-visible 能替代按钮的键盘行为吗？

不能。它只控制焦点是否以可见样式呈现，按钮语义、Tab 顺序、Enter 或 Space 激活仍要由正确的 HTML 和交互逻辑负责。