导航中的焦点指示器：键盘用户需要看到什么

为什么隐形焦点状态会破坏键盘导航，以及如何设计符合 WCAG 2.2 的焦点指示器。

用户用 Tab 键在导航菜单中循环浏览。他们按下 Tab。浏览器将焦点移动到下一个链接。但他们看不出焦点在哪里。焦点指示器是白色背景上的 1 像素灰色轮廓——除非仔细观察，否则看不见。他们再按一次 Tab。仍然没有任何可见的东西。他们放弃了并离开。

你刚刚失去了一个积极尝试使用你网站的客户。

焦点指示器是键盘导航中最被低估的部分。大多数设计师把它们当作事后考虑或主动抑制它们，因为它们”看起来很丑”。但对于键盘用户——无论他们是盲人、运动受限者，还是只是高效的超级用户——焦点指示器就是光标。没有它们，导航是不可能的。

好消息是：设计有效的焦点指示器并不难。坏消息是：大多数电子商务网站都做错了，而且 WCAG 2.2 提高了要求。

快速要点

WCAG 2.2 成功标准 2.4.11 要求焦点指示器周长至少 2px 或等同的面积
焦点指示器必须与组件和相邻颜色都有 3:1 的对比度
默认浏览器焦点样式在 78% 的颜色组合上无法满足对比度要求
与品牌颜色匹配的自定义焦点指示器可以改善用户体验而不牺牲可访问性
focus-visible 伪类让你可以为键盘用户显示焦点，同时对鼠标用户隐藏它

WCAG 2.2 的真正要求

WCAG 2.2 发布于 2023 年 10 月，针对焦点指示器引入了一个新的 Level AA 标准：成功标准 2.4.11 焦点外观。

之前的指南（WCAG 2.1 的 2.4.7 焦点可见）只要求焦点可见——任何可见的指示器都可以通过。但”可见”是主观的。白色背景上的 1 像素浅灰色轮廓在技术上算是可见的，即使实际上毫无用处。

WCAG 2.2 设定了具体要求：

大小要求

焦点指示器的周长必须至少为 2 个 CSS 像素，或具有等同的面积。

实际上意味着：

按钮周围的 2px 实线轮廓：通过
1px 轮廓：不通过（除非覆盖更大的面积）
仅一侧的 4px 轮廓：不通过（不覆盖周长）
链接文本下方高度为 2px、至少与链接文本宽度相同的粗下划线：通过

对比度要求

焦点指示器必须与以下两者的对比度都至少为 3:1：

组件的未焦点状态
相邻的颜色（组件后面的背景）

这比听起来要复杂。如果你的导航链接是白色背景上的深蓝色文本，而焦点指示器是浅蓝色轮廓，你需要：

浅蓝色轮廓与白色背景之间 3:1 的对比度（相邻颜色）
浅蓝色轮廓与深蓝色文本之间 3:1 的对比度（组件颜色）

许多设计师选择看起来很好的品牌颜色焦点指示器，但会在其中一个对比度检查中失败。

默认浏览器轮廓问题

大多数浏览器提供默认焦点轮廓——通常是细的虚线或实线。Chrome 使用 2px 蓝色轮廓。Firefox 使用虚线轮廓。Safari 使用蓝色光晕。

这些默认值在许多情况下无法满足 WCAG 2.2：

浏览器	默认轮廓	常见失败
Chrome	2px 实线蓝色 (#4A90E2)	在浅蓝色背景上无法满足对比度
Firefox	1px 虚线	太细（无法满足大小要求）
Safari	蓝色光晕 + 轮廓	光晕不计入大小；仅在桌面上通过
Edge	2px 实线蓝色	同 Chrome

WebAIM 的研究发现，默认焦点样式在真实网站使用的大约 78% 的颜色组合上无法满足对比度要求。

这就是为什么自定义焦点指示器很重要。你不能依赖浏览器默认值。

好的焦点指示器应该是什么样的

最好的焦点指示器平衡了可见性、品牌一致性和可访问性。以下是来自顶级电子商务网站的经过验证的模式。

模式 1：高对比轮廓

最常见的模式是具有强对比度的实线轮廓：

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* 高对比度蓝色 */
  outline-offset: 2px;        /* 元素和轮廓之间的间距 */
}

这对导航链接、按钮和表单输入效果很好。2px 的偏移防止轮廓与文本或图标边缘重叠，提高可读性。

真实例子： Amazon 在所有交互元素上使用 3px 橙色轮廓（#FF9900）和 2px 偏移。橙色在白色背景上的对比度为 6.8:1，对于他们的深蓝色按钮为 4.2:1。

模式 2：背景 + 轮廓组合

为了更紧密的视觉整合，结合背景颜色变化和细轮廓：

a:focus,
button:focus {
  background-color: #E6F2FF; /* 浅蓝色背景 */
  outline: 2px solid #0066CC; /* 较深的蓝色轮廓 */
  outline-offset: 0;
}

这对导航菜单特别有效，因为你希望焦点链接从菜单的其余部分中脱颖而出。

真实例子： Google 的顶部导航在焦点项目上使用浅灰色背景（#F1F3F4）和 2px 黑色轮廓。背景创建了清晰的”选中”状态，而轮廓提供了所需的对比度。

模式 3：文本链接的下划线

对于内容中的内联文本链接，粗下划线通常比轮廓更清晰：

a:focus {
  outline: none; /* 移除默认轮廓 */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

这将焦点指示器保持在文本附近，避免轮廓创建的”单词周围的框”外观。

真实例子： Shopify 文档在焦点链接上使用 3px 蓝色下划线，位于文本基线下方 4px 处。

模式 4：交互卡片的阴影

对于卡片式布局（产品卡片、特性框），盒阴影创建深度：

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

第一个阴影层（0px 模糊、3px 扩展）充当焦点指示器。第二个增加视觉深度。

真实例子： Etsy 在焦点产品卡片周围使用 3px 蓝色阴影，结合微妙的投影以增加深度。

:focus-visible 技巧

设计师对焦点指示器的一个常见抱怨是，当用户用鼠标点击时它们会出现，在点击后创建一个”卡住”的轮廓。这发生在 :focus 触发任何焦点事件时——鼠标、键盘或编程方式。

解决方案是 :focus-visible 伪类，自 2022 年以来在所有现代浏览器中都支持：

/* 仅为键盘用户显示焦点指示器 */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* 为鼠标用户隐藏默认轮廓 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

这在用户使用 Tab 键导航时显示焦点指示器，但在他们用鼠标点击时隐藏它。两全其美。

重要注意： 某些有运动障碍的用户同时使用键盘和鼠标——他们可能点击以获得焦点，然后使用键盘进行交互。不要假设 :focus-visible 意味着”仅限屏幕阅读器用户”。它意味着”键盘导航正在进行中”。

测试你的焦点指示器

以下是测试焦点指示器是否符合 WCAG 2.2 的方法：

步骤 1：手动键盘测试

打开你的网站并重复按 Tab。问问自己：

我总是能看到焦点在哪里吗？
焦点指示器至少 2px 厚吗？
它与未焦点状态有区别吗？
我能在浅色背景上看到它吗？深色背景上呢？
它在悬停时消失或变得难以看到吗？

如果你对任何一个问题的回答是”不”，那么你有焦点指示器问题。

步骤 2：对比度检查

使用 WebAIM 的对比度检查器之类的工具来验证：

焦点指示器与背景：测量焦点轮廓颜色与元素后面的背景之间的对比度。必须至少 3:1。
焦点指示器与组件：测量焦点轮廓颜色与组件主要颜色（链接的文本颜色、按钮的背景颜色）之间的对比度。必须至少 3:1。

如果你的焦点指示器是 #0066CC（一个常见的蓝色），检查它是否对比：

白色背景：8.1:1（通过）
浅灰色背景（#F5F5F5）：7.2:1（通过）
浅蓝色背景（#CCE5FF）：2.2:1（不通过）

当它失败时，你需要更深或更浅的焦点颜色，具体取决于上下文。

步骤 3：自动审计

运行这些工具来捕获常见的焦点指示器问题：

axe DevTools（浏览器扩展）：标记缺失的焦点指示器和低对比度轮廓
Lighthouse 可访问性（在 Chrome DevTools 中）：检查可聚焦元素是否没有可见的焦点样式
WAVE（网页可访问性评估工具）：突出显示焦点顺序和焦点可见性问题

这些工具中没有一个能完美地强制执行 WCAG 2.2 的大小和对比度要求（该标准很新），但它们能捕获明显的问题。

常见焦点指示器错误

这些是我在 Shopify 商店中最常看到的失败：

错误 1：完全抑制焦点

许多主题包括这个 CSS：

*:focus {
  outline: none;
}

这会移除整个网站的所有焦点指示器。这是你能犯的最严重的可访问性错误。

为什么会发生： 设计师不喜欢默认的浏览器轮廓并在不替换的情况下将其移除。

修复： 移除该规则并使用 :focus-visible 添加自定义焦点样式。

错误 2：深色背景上的隐形轮廓

浅蓝色焦点轮廓在白色背景上看起来很好，但在深色导航栏或页脚部分上消失。

失败示例：

a:focus {
  outline: 2px solid #66A3E0; /* 浅蓝色 */
}

在深蓝色背景（#1A2332）上，此轮廓的对比度仅为 1.8:1——不符合 WCAG。

修复： 为浅色和深色上下文使用不同的焦点颜色：

/* 浅色背景 */
.light-section a:focus {
  outline: 3px solid #0066CC; /* 深蓝色 */
}

/* 深色背景 */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* 白色 */
}

或使用在任何地方都有效的高对比度颜色，如浅色背景上的黑色，深色背景上的白色。

错误 3：焦点指示器小于 2px

细轮廓无法满足 WCAG 2.2 的大小要求：

button:focus {
  outline: 1px solid #0066CC; /* 太细 */
}

修复： 增加到至少 2px，或在一侧使用更粗的轮廓：

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* 粗下划线 */
}

错误 4：仅依赖颜色变化

在焦点时仅更改文本颜色或背景颜色如果变化不能创建清晰的视觉指示器就会失败：

a:focus {
  color: #0066CC; /* 文本变为蓝色 */
}

这对有视力的用户可能是可见的，但屏幕阅读器用户无法指示焦点已移动。而且如果原始文本颜色已经类似于蓝色，变化可能太微妙。

修复： 始终添加周长指示器（轮廓、下划线或边框）。

大菜单的焦点指示器

大菜单带来了独特的挑战，因为它们包含多个导航层次。当用户进入大菜单时，焦点应该去哪里？当他们通过子菜单向下箭头键时，你如何显示哪个项目获得焦点？

以下是一个强大的模式：

/* 顶级导航项 */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* 元素内部 */
  background-color: #F0F7FF;
}

/* 子菜单项 */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

关键细节：

顶级项使用 outline-offset: -3px 在元素边界内绘制轮廓，避免与相邻项重叠
子菜单项获得背景颜色（从网格中脱颖而出）和轮廓（满足 WCAG 大小要求）

真实例子： Navi+ 菜单生成器生成具有此模式内置的大菜单——顶级项使用背景颜色和轮廓突出显示，子菜单使用箭头键导航，在每个项上都有清晰的焦点指示器。

更好的焦点指示器的商业案例

大多数店主不优先考虑焦点指示器，因为它们似乎是一个小的视觉细节。但影响是可衡量的。

WebAIM 的 2024 屏幕阅读器用户调查发现 87% 的受访者将”键盘导航”列为最重要的可访问性功能，排在替代文本、语义 HTML 和 ARIA 标签之前。在键盘导航中，可见焦点指示器被列为首要挫折。

当用户看不到他们在页面上的位置时，他们无法完成任务。这直接转化为收入损失。

Baymard Institute 关于结账可用性的研究显示”结账过长/复杂”导致 17% 的购物车放弃。对于在焦点指示器不佳网站上的键盘用户，每次结账都太复杂——他们在每个字段上花费额外时间重新定向，或者他们完全放弃。

相反，具有强焦点指示器的网站看到改善的任务完成率。Nomensa 关于可访问性投资回报率的研究发现可访问的网站（包括良好的焦点管理）的任务完成率比不可访问的竞争对手高 23%。

更好的焦点指示器不仅会帮助你通过审计。它们会帮助用户完成购物。

快速实施清单

以下是改善焦点指示器的 20 分钟行动计划：

立即进行（5 分钟）：

将这个基础 CSS 添加到你的主题中：

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

在你的主页、导航菜单和结账上进行测试。你在所有地方都看到焦点指示器吗？

本周（1 小时）：

选择一个符合对比度要求的品牌合适的焦点颜色。使用 WebAIM 的对比度检查器验证针对你的主要背景颜色的 3:1。
为不同的部分自定义焦点样式（浅色背景与深色背景）。
测试你的大菜单（如果你有的话）。确保焦点子菜单项清晰可见。

本月（2-3 小时）：

为交互组件添加具体的焦点样式：
- 产品卡片
- 加入购物车按钮
- 筛选复选框
- 搜索自动完成建议
- 模态关闭按钮
使用 axe DevTools 运行自动审计并修复任何标记的焦点问题。
让团队成员（或客户）仅使用键盘导航你的网站，并报告焦点难以看到的地方。

焦点指示器是最容易的可访问性胜利之一。技术工作很少——几十行 CSS——但影响是巨大的。每个登陆你网站的键盘用户都将受益。

This article is part of the larger guide on 键盘导航：为什么超越可访问性很重要.

键盘导航：为什么超越可访问性很重要