焦点环
Focus Ring
别名:焦点环键盘焦点框键盘框蓝框聚焦框focus outlinefocus ring
这是什么
用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
名词辨析
焦点环不等于 hover 高亮——焦点环服务键盘用户，hover 服务指针用户。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 任何可聚焦元素（按钮、链接、输入框、自定义控件）
- 用 :focus-visible 而非 :focus，避免鼠标点击也弹框
- 自定义控件覆盖了浏览器默认轮廓之后
✕ 不适用场景
- outline: none 之后不给任何替代指示（键盘用户直接失联）
- 把焦点环做成 hover 高亮的复制品，只在鼠标下可见
- 焦点环对比度不足 3:1，或被邻近元素裁切遮挡
常见形式
外轮廓
Outline ring
outline + outline-offset，最通用、可被 forced-colors 保留
阴影环
Shadow ring
box-shadow 双层描边，圆角跟随元素形状
描边染色
Border tint
只变边框色，视觉最弱，需配合加粗才够用
实现要点
:focus-visibleoutlineoutline-offset基础写法：:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px }。需要跟随圆角时改用 box-shadow: 0 0 0 2px 两层环。覆盖浏览器默认轮廓后必须提供替代；forced-colors 模式下保留 outline。可用 :focus:not(:focus-visible) 精确去掉鼠标点击的环。
平台 API
:focus-visibleoutlineoutline-offsetfocus()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| WCAG | 2.4.7 Focus Visible |
| CSS | :focus-visible |
相关概念
让所有功能都能只用键盘完成：Tab/Shift+Tab 按合理顺序移动焦点，复合组件内用方向键漫游并配 roving tabindex，Escape 关闭浮层并归还焦点。这是焦点环之外的一整套焦点秩序，规则写在 ARIA APG 里。
无障碍搭配使用页面第一个可聚焦元素，通常是视觉上隐藏的链接；键盘用户按下第一个 Tab 就能看见它，激活后直接跳到主内容区，不必逐个穿过顶部导航链接。长导航站点的必备逃生口，WCAG 称之为「跳过区块」。
无障碍搭配使用前景与背景的亮度比值，衡量文字是否看得清。WCAG 2.1 给出硬性门槛：正文 AA 4.5:1、AAA 7:1，大号文字降到 3:1 与 4.5:1。APCA 按字重与字号给出更贴近感知的建议值。先算比值再选色，不要靠肉眼验收。
基础搭配使用容易混淆
hover-glow 是鼠标悬停的装饰反馈，焦点环是键盘可达性的必需指示。