17370845950

不应无条件设置 outline: none，因其会损害键盘用户可访问性；正确做法是用 :focus-visible 区分键盘与鼠标焦点，或通过 JavaScript 检测 Tab 键动态添加焦点样式。

默认情况下，当一个可聚焦的元素（如 input、button、a）通过键盘 Tab 键获得焦点时，浏览器会添加一个蓝色（或其他颜色）的轮廓边框（outline），这是为了满足无障碍访问需求。如果你用 outline: none; 直接移除，虽然视觉上消失了，但会损害可访问性——键盘用户将无法判断当前焦点在哪。

为什么不要无条件设置 outline: none

屏幕阅读器和键盘导航用户依赖这个焦点指示来操作页面。移除 outline 且不提供替代方案，等于让这部分用户“失明”。WCAG（Web 内容可访问性指南）明确要求：焦点状态必须清晰可见。

安全移除 outline 的正确做法

只在用户**非键盘操作**（比如鼠标点击或触摸）时隐藏 outline，而保留键盘焦点的视觉反馈。可通过 :focus-visible 伪类实现：

• 给需要处理的元素添加 outline: none; 和 focus-visible 样式
• 利用 :focus-visible 仅在真正由键盘触发焦点时才显示 outline
• 配合 :focus:not(:focus-visible) 隐藏鼠标/触摸触发的 outline

示例代码：

button, input, a[href] {
  outline: none;
}

button:focus-visible,
input:focus-visible,
a[href]:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

如果必须兼容老浏览器（如 IE 或旧版 Safari）

可以结合 JavaScript 检测键盘操作，动态加 class：

• 监听 keydown 事件，检测是否按了 Tab 键
• 首次 Tab 触发后，给 加 keyboard-focus 类
• CSS 中写 .keyboard-focus button:focus { outline: 2px solid #007bff; }
• 鼠标点击时移除该 class，避免干扰

替代 outline 的友好方案

不一定要用 outline，也可以用其他高对比度、易识别的样式表示焦点：

• 增加内阴影：box-shadow: 0 0 0 3px rgba(0, 123, 195, 0.25);
• 改变边框颜色+粗细：border: 2px solid #007bff;
• 添加背景色变化（注意确保文字仍可读）
• 配合图标或文字提示（适合工具按钮等）