VOCABULARY / 词条
焦点指示
Focus Indicator
当界面元素获得键盘焦点时，用可见的视觉标记（如轮廓环或高亮）指出当前焦点所在，使键盘用户始终知道操作会落在哪里。
识别特征
- 获得键盘焦点的元素与相邻元素有明显的视觉差异
- 指示在焦点停留期间持续可见，不会自动消失
- 指示区域不被固定头部、浮层或其他作者内容整体遮挡
概念边界
焦点指示只回答“焦点现在在哪”，不等同于悬停、选中或激活状态；它是元素的一种状态样式，而不是一个独立组件，也不负责决定焦点应移到哪里。
什么时候考虑它
- 界面可以用键盘或其他非指针方式操作
- 自定义了按钮、链接或表单控件的外观并覆盖了浏览器默认样式
- 页面存在固定头部、底栏或非模态浮层，焦点可能被遮挡
什么时候慎用
- 不要为了美观直接移除默认轮廓而不提供等效替代
- 不要用只在悬停时出现或很快淡出的效果代替持续的焦点指示
- 不要把焦点指示与“已选中”样式做成一样，让用户无法区分位置和选择
取舍
显眼的焦点环可能与品牌视觉冲突，但用 :focus-visible 只在键盘操作时显示，可以在鼠标用户看不到多余轮廓的同时保住键盘可达性。
条件规则 · 编辑建议
相关词条
焦点被程序移动后，用户只能靠可见指示知道自己已进入对话框。
可见焦点是这些用户完成操作的前提，而非附加装饰。
焦点环需要在实际背景上保持足够对比，模糊透明表面可能削弱它。
来源与支持范围
WCAG 2.2 的 2.4.7（AA 级）要求任何可用键盘操作的界面都有一种模式使键盘焦点指示可见；沿用平台默认焦点指示是一种充分技术。
检索日期：2026-09-15WCAG 2.2 的 2.4.11（AA 级）要求组件获得键盘焦点时不被作者创建的内容（如固定头部、底栏、非模态对话框）完全遮挡。
检索日期：2026-09-15WCAG 2.2 的 2.4.13（AAA 级）要求焦点指示区域至少相当于组件 2 CSS 像素粗的周边，且聚焦前后同一像素的对比度至少 3:1。
检索日期：2026-09-15:focus-visible 在元素获得焦点且浏览器依据输入方式判断需要显示焦点时匹配；用它提供自定义指示，而不是用 outline: none 移除焦点样式。
检索日期：2026-09-15 · 存档于 2025-10-30定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须用键盘实际遍历页面，验证每类可聚焦元素的指示可见、对比足够且不被固定内容遮挡。
{
"states": [
"unfocused",
"focus-visible",
"focus-hidden"
],
"a11y": [
"键盘操作时焦点指示始终可见且不被遮挡",
"自定义指示与背景及未聚焦状态的对比度足够",
"焦点指示与选中、悬停状态可区分"
],
"motion": "指示应即时出现；可选的淡入动画在减弱动态偏好下省略"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。