必须配 focus:ring + focus:ring-offset- 才算真正可访问，因 focus:outline-none 单独使用会移除默认焦点框且无替代反馈，导致键盘用户无法感知聚焦状态；tailwind 的 outline-none 实为 outline: 2px solid transparent，高对比度模式下可见但普通屏幕不可见。
不能只用 focus:outline-none，必须配 focus:ring + focus:ring-offset- 才算真正可访问。
为什么 focus:outline-none 单独用是危险操作
它直接移除浏览器默认焦点框，但没提供任何替代视觉反馈。键盘用户 Tab 到按钮或输入框后，页面看起来“没反应”，等于把他们锁在不可见的交互节点上。Tailwind 的 outline-none 实际设的是 outline: 2px solid transparent，这是为了高对比度模式兼容，但透明色在普通屏幕上就是看不见。
常见错误包括：
- 写了
focus:outline-none就停手，没加focus:ring - 加了
focus:ring，但父容器没设focus:ring-offset-white（或对应背景色），导致环紧贴边框、视觉割裂 - 在深色背景上用了
focus:ring-blue-500，但没验证对比度是否 ≥ 3:1（比如#3b82f6在#1e293b上只有 ~2.4:1）
focus:ring 和 focus:ring-offset- 必须成对出现
Ring 不是装饰，它是 outline 的无障碍替代方案：不占布局空间、不触发重排、支持高对比度模式。但它需要偏移（offset）才能和元素边缘分离，否则会像糊在边框上一样难识别。
正确写法示例：
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white"> 提交 </button>
注意三点：
-
focus:ring-offset-2是偏移距离，不是颜色；颜色由focus:ring-offset-white（或focus:ring-offset-gray-900等）指定 - 如果按钮父容器是深色背景（如
bg-gray-900），focus:ring-offset-white会翻车，必须同步改成focus:ring-offset-gray-900 - 不要用
!important强制覆盖——它会破坏屏幕阅读器用户的系统级高对比样式
移动端 iOS Safari 的蓝光陷阱
iOS Safari 给 <input> 默认加了一圈蓝色发光效果，一旦你加了任何 outline 或 ring，这个蓝光就彻底消失。而你的新 ring 如果太细（ring-1）、太淡（ring-opacity-30）、或没 offset，用户在手机上根本看不到焦点在哪。
安全做法：
- 输入框务必用
focus:ring-2 focus:ring-offset-2，不用ring-1 - 避免依赖纯色相区分（如只换蓝→绿），加粗环宽 + 明确 offset 是更鲁棒的方案
- 真机测试时关闭“智能反转”和“增加对比度”系统设置，确认 ring 在白底/黑底/灰底上都清晰
最常被忽略的点是：focus 样式不是写一次就完事。它会被第三方组件库、CSS reset、甚至你自己写的 div:focus 全局规则悄悄覆盖。每次引入新 UI 库或升级 Tailwind 版本，都要重新跑一遍键盘导航测试——因为失效往往静默发生，直到有人真的靠键盘用你的页面才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
