全球约有10%的互联网用户依赖键盘完成全部操作。对他们而言，屏幕上那个不起眼的焦点指示器，就是唯一的导航罗盘。但WCAG 2.1的审计数据显示，焦点可见性违规长期位列最常见失败项前三——更棘手的是，大多数自动化检测工具对此束手无策。
问题的核心在于技术盲区。静态扫描器抓取的是页面加载后的静态HTML，而:focus或:focus-visible状态只在真实的键盘交互中才会激活。这意味着，一个按钮在代码里写得再规范，实际焦点环的对比度是否达标，工具无从得知。手动测试成为不可替代的环节：Tab键前进、Shift+Tab后退、浏览器开发者工具、专用对比度分析仪，四件套缺一不可。
以下三个真实审计案例，展示了这类问题的典型形态与修复路径。
案例一：旅游公司的搜索按钮
某旅游平台的核心搜索按钮，焦点指示器的对比度低于3:1的及格线。键盘用户理论上可以定位到该按钮，但视觉反馈过于微弱，实际操作中极易丢失焦点位置。这直接触犯了WCAG 2.1的成功标准1.4.11（非文本对比度）。修复方案采用高对比度轮廓线配合:focus-visible伪类——2像素实线白色边框，外加2像素的外边距偏移，既保证可见性，又不破坏原有设计层级。
案例二：教育平台的登录按钮
同一教育平台的"登录"按钮，焦点状态将背景色从#02959F变为#027279。两种蓝色的对比度仅为1.57:1，远低于3:1门槛。更严重的是，该组件完全依赖颜色变化传达焦点状态，同时违反了1.4.11和1.4.1（色彩使用）两项标准。修复同样采用独立于色彩变化的可见轮廓线，白色2像素边框加偏移量，彻底摆脱对色相差异的依赖。
案例三：同一平台的复选框
还是这个平台，"记住我"复选框的焦点指示器使用#212529（近黑）覆盖在#1D191C（深灰）背景上，对比度惨跌至1.12:1，焦点状态几乎隐形。修复替换为#0297A2（青蓝色）轮廓线后，对背景对比度达到4.92:1，对相邻色彩对比度3.79:1，双双合规。
这三个案例的修复代码高度一致，揭示了一个关键洞察：焦点指示器的最佳实践并非复杂工程，而是设计决策的优先级问题。白色或高饱和色的实线轮廓，配合适度的偏移量，是兼顾美观与合规的最小可行方案。
规范的测试流程同样值得标准化。推荐配置为Chrome或Firefox浏览器、纯键盘导航、Colour Contrast Analyser工具，可选搭配NVDA或VoiceOver屏幕阅读器。操作步骤分解为四步：仅用Tab键遍历全页、肉眼确认焦点始终可见、用工具测量焦点指示器对比度、验证200%缩放和深色模式下的表现。
上线前的快速自查清单可以压缩为五个问题：焦点能否被立即识别？指示器对比度是否达到3:1？状态变化是否仅依赖颜色？深色模式下是否依然可见？200%缩放后是否清晰可辨？
焦点指示器的违规之所以普遍，恰恰因为它处于自动化检测的盲区与人工测试的疲劳区交汇处。但对键盘用户来说，这是决定产品能否使用的基础门槛。修复成本极低，遗漏代价极高——这是无障碍设计中最典型的低垂果实。
热门跟贴