可访问的焦点状态：设计可见的键盘焦点

为什么焦点状态很重要

使用键盘、开关设备或屏幕放大镜的用户一次在页面中移动一个元素。焦点指示器是他们知道自己所在位置的唯一方法。删除浏览器轮廓而不进行替换是最常见的辅助功能失败之一。

WCAG 2.2 需要什么

成功标准 2.4.7 焦点可见（AA 级）要求任何键盘可操作界面都具有焦点指示器可见的模式。 WCAG 2.2 增加了 2.4.13 焦点外观（AAA 级），它描述了一个强指标：至少与组件的 2 CSS 像素厚周边的面积一样大，聚焦和未聚焦状态之间的对比度至少为 3:1。

:焦点-可见

MDN 解释说：当元素具有焦点并且浏览器使用启发式决定应该显示焦点（通常用于键盘使用）时，适用 :focus-visible。这使您可以为键盘用户显示强大的聚焦环，而无需在每次有人用鼠标单击按钮时显示它们。使用它而不是删除轮廓。

设计戒指

实用指导：

• 使用带有偏移的轮廓或环，这样它就不会融入元素中。
• 检查元素可能出现的每个背景的对比度；双色戒指会有所帮助。
• 保持组件之间的一致性，定义为设计系统中的令牌。
• 切勿仅依赖微妙的颜色变化。
• 确保焦点元素没有隐藏在粘性标题后面。

焦点和运动

对焦环可能会以非常短的过渡出现，但应该感觉是即时的。避免延迟响铃或移动元素的动画，对于自定义画布绘制组件，请确保页面中仍然存在真正的可聚焦元素，以便键盘用户可以访问它。