HTML焦点样式与可访问性怎么设置？outline自定义方法-html教程-PHP中文网

:focus-visible 可智能区分键盘与鼠标焦点，应替代无差别:focus；自定义outline仅限style、width、color三属性且需满足对比度≥3:1；高对比度模式下须用forced-colors媒体查询适配。

html焦点样式与可访问性怎么设置？outline自定义方法

focus 时 outline 消失了，怎么恢复？

很多项目里写 * { outline: none; } 或给 button、a 单独设 outline: 0，结果键盘 Tab 导航时完全看不到焦点在哪——这是最典型的可访问性断裂。

正确做法是：只在用户**非键盘操作时**隐藏 outline，用 :focus-visible 替代无差别 :focus：

:focus {
  outline: 2px solid #007aff;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

:focus-visible 是现代浏览器（Chrome 86+、Firefox 83+、Safari 15.4+）原生支持的伪类，它能智能判断当前焦点是否由键盘触发
不要用 JS 模拟 focus-visible 行为——兼容性和性能都不如原生
如果必须支持老浏览器（如 IE 或旧版 Safari），可用 focus-visible polyfill，但需注意它依赖 DOMContentLoaded 时机，动态插入的元素需手动调用 applyFocusVisiblePolyfill()

自定义 outline 样式要注意哪些细节？

视觉上“好看”的 outline 往往牺牲可访问性。比如用 outline: 2px dashed #ccc 在浅灰背景上对比度不足，或 outline-radius 这种不存在的属性被误用。

真正可用且合规的定制项只有三个：

outline-style：仅限 solid、dashed、dotted、none；double 和 groove 渲染不一致，不推荐
outline-width：建议 ≥ 2px，WCAG 要求焦点指示至少 2px 宽或等效视觉区域
outline-color：必须与背景色保持 ≥ 3:1 对比度（文本内容要求 4.5:1，焦点框可略低但别低于 3:1）

额外加 outline-offset 是安全的，它控制 outline 与边框的距离，避免紧贴文字造成拥挤，也方便高对比度模式识别。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

button 和 input 的 focus 样式为什么经常失效？

常见原因是组件库或 CSS 重置覆盖了原生行为，比如 Ant Design 的 .ant-btn:focus 默认只改 box-shadow，没设 outline；或者用了 appearance: none 后忘记补 outline。

排查和修复步骤：

用浏览器 DevTools 的 “Accessibility” 面板检查元素是否被标记为 focusable，以及当前 outline 计算值是否为 none
对 input[type="text"]、textarea、select 等表单控件，确保未设置 outline: 0 或 outline: none
若用 box-shadow 模拟 focus 效果，必须同时保留 outline: none + outline-offset: -2px 防止双焦点框，并确保 shadow 足够宽（≥ 2px）且有明确边界

高对比度模式下 outline 不显示怎么办？

Windows 高对比度模式（或 macOS 的“增加对比度”）会强制忽略大部分 outline 样式，只认系统级焦点指示。这时候靠 CSS 自定义 outline 是无效的。

可靠解法只有两个：

用 forced-colors: active 媒体查询做降级适配：

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

确保所有可聚焦元素都有语义化标签（如 button、input），避免用 div tabindex="0" + JS 模拟按钮——这类元素在高对比度下根本不会被系统识别为可聚焦控件

真正难处理的是那些用 role="button" + tabindex 实现的“伪控件”，它们既绕过了浏览器默认焦点样式逻辑，又无法被系统高对比度策略接管——这种设计本身就在可访问性边缘反复横跳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！