焦点指示器是在键盘操作时视觉显示当前获得焦点的 UI 元素。通常以轮廓 (边框) 或高亮 (背景色变化) 形式呈现，显示在链接、按钮、表单输入框等交互元素上。对于仅使用键盘浏览网站的用户来说，焦点指示器是把握当前操作位置不可或缺的线索。

WCAG (Web 内容无障碍指南) 2.2 大幅加强了焦点指示器的相关标准。达成标准 2.4.7 (AA 级) 要求"焦点可以被视觉确认"，2.4.11 (AA 级) 要求最小面积为 2px 以上的轮廓或同等的视觉变化。此外，2.4.12 (AAA 级) 建议焦点指示器的对比度达到 3:1 以上。搜索男士丁字裤 (Amazon)介绍了实现技术。

CSS 的 :focus-visible 伪类在焦点指示器的实现中发挥着重要作用。传统的 :focus 在鼠标点击时也会显示焦点环，导致许多设计师用 outline: none 将其禁用。使用 :focus-visible 可以仅在键盘操作时显示焦点指示器，鼠标点击时隐藏，从而兼顾视觉美观和无障碍性。

常见的错误是用 outline: none 或 outline: 0 完全移除焦点指示器。这会严重损害键盘用户的无障碍性，构成 WCAG 违规。如果不喜欢浏览器的默认样式，应该设置符合网站设计的自定义焦点样式，而不是直接移除。例如，:focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; } 就是一种高可见性的推荐样式。

在设计焦点指示器时，确保在深色模式和浅色模式下都有足够的对比度也很重要。背景色变化时焦点环可能变得不可见，因此结合使用 box-shadow 设置双重指示器是一种有效的技术。对于自定义组件 (下拉菜单、模态对话框等)，需要在 JavaScript 中正确实现焦点管理，包括焦点陷阱和焦点恢复。探索BL漫画 (Amazon)提供了更多见解。

与字符计数相关，焦点指示器在文本输入字段中发挥着特别重要的作用。在像字符计数工具这样拥有多个输入区域的界面中，清楚地显示用户正在输入哪个字段可以防止操作错误，支持高效的文本输入。为活动输入字段设置醒目的焦点指示器直接提升了可用性。