只给键盘用户看焦点环：用 :focus-visible 做可访问的焦点样式

很多网站的焦点样式只有两种极端：要么用 outline: none 一刀切去掉，导致键盘用户找不到焦点；要么所有点击都冒出粗黑框，鼠标用户觉得突兀。:focus-visible 正好解决这个两难：它只在浏览器判断用户需要焦点提示时才匹配，通常是键盘 Tab 导航，而鼠标点击则不匹配。

最实用的写法是先给所有可交互元素一个统一的可见焦点样式，再只在 :focus-visible 时启用它：

:focus-visible { outline: 2px solid #0f62fe; outline-offset: 2px; }

同时不要再全局写 :focus { outline: none; }，而是把鼠标点击时的默认轮廓弱化处理：

:focus:not(:focus-visible) { outline: none; }

这样键盘用户按 Tab 时能清楚看到焦点位置，鼠标用户点击时界面依然干净。

还有三点容易忽略：第一，自定义组件如果用 div 模拟按钮，一定要加 tabindex 并保证能获得焦点，否则 :focus-visible 再好也无从谈起；第二，焦点样式要有足够的对比度，深色背景上浅色轮廓比默认蓝色更易读；第三，不要只依赖颜色区分焦点，轮廓加偏移的组合在高对比模式下也更稳。

一句话总结：不要去掉焦点提示，而是用 :focus-visible 把它交给真正需要它的人。