一行CSS删掉焦点框，为什么有人就用不了你的网站？

一个小的 CSS 决定，可能对别人浏览你网站的难易程度产生大得多的影响。我们可以用 outline 属性调整轮廓的宽度、样式和颜色：outline: [width] [style] [color]; 有时开发者会用这个属性完全移除元素在聚焦时可能出现的轮廓。例如：button:focus { outline: none; } 这感觉像是一个很小的设计请求。设计师可能不想要聚焦时的轮廓，页面可能和设计稿不一致。开发者接下这个请求，加上三行代码，移除了轮廓。页面通过了自动无障碍检查，团队认为任务完成了。然而，这个小轮廓承担着很大的无障碍任务。当轮廓消失时，有些人可能完全无法使用这个页面。本文将介绍轮廓为什么对无障碍很重要、WCAG 标准，以及如何以无障碍的方式修复这个问题。 **轮廓是做什么的** 轮廓是浏览器用来显示哪个元素拥有焦点的方式。焦点是页面上此刻准备好接收键盘输入的那一个位置。按下 Tab，焦点会移动到下一个链接、按钮或表单字段。按下 Enter 或空格，就会激活当前拥有焦点的元素。 如果你用鼠标，你很少会想到这件事。你的光标会告诉你你在哪里。但很多人不用鼠标。有些人只用键盘。有些人使用开关设备、吸吹式控制器，或者模拟键盘操作的语音指令。有些人有震颤，难以控制鼠标。还有很多人用键盘只是因为更快。对所有这些用户来说，焦点轮廓就是光标。移除它，他们就是在对着一个看不见的页面按 Tab。他们知道自己“在某个位置”。他们只是看不到自己在哪里。 打开任意一个页面。按几次 Tab。你能判断自己在哪里吗？你能判断自己什么时候落在了想要的链接上吗？如果答案是否定的，这个页面就有焦点问题。 **WCAG 怎么说** WCAG（Web 内容无障碍指南）是大多数无障碍法规和审计所参照的国际标准。每条规则称为一个“成功标准”，并有一个等级：A 是基线，AA 是大多数组织追求的目标，AAA 要求更高。有几条规则直接与焦点相关。以下用通俗语言说明。 - 2.1.1 键盘（A 级）。所有能用鼠标完成的操作，必须也能用键盘完成。移除轮廓本身并不会违反这条规则。但它会让键盘使用变得非常困难，实践中往往导致不合规。 - 2.4.7 焦点可见（AA 级）。当元素拥有键盘焦点时，必须有可见的指示器。这正是 outline: none 所违反的规则。它也是审计中最常见的焦点类失败项。 - 1.4.11 非文本对比度（AA 级）。视觉指示器，包括焦点环，与相邻颜色的对比度至少需要达到 3:1。白底上的浅灰色焦点环看起来整洁，但不符合这条规则。 - 2.4.11 焦点不被遮挡（最低要求）（AA 级，WCAG 2.2 新增）。获得焦点的元素不能被其他东西完全遮住，比如吸顶导航栏或 Cookie 弹窗。如果用户 Tab 到一个链接，而它被盖住了，就是失败。 - 2.4.13 焦点外观（AAA 级，WCAG 2.2 新增）。这为指示器本身设定了具体的尺寸和对比度。焦点环至少应相当于元素周围 2 像素的边框，且聚焦与未聚焦状态之间对比度达到 3:1。这是 AAA 级，所以大多数审计不强制要求，但这是一个好目标。下面的示例满足它。 如果你的目标是达到 AA 级，检查清单很短：每个可聚焦元素都显示可见指示器，该指示器对比度达到 3:1，并且没有任何东西遮挡获得焦点的元素。 **正确的做法：改样式，而不是删掉它** 你完全可以改变焦点轮廓的设计。你只需要保留一个可见的版本。选一个符合你设计、同时通过对比度检查的颜色和粗细。 :focus { outline: 3px solid #1a5fb4; outline-offset: 2px; } outline-offset 会在元素和焦点环之间留出一点间距。它帮助焦点轮廓在复杂背景上更醒目。 **确保它在各处都可见** 焦点样式在代码里存在，不代表它实际看得见。需要检查它在这些场景下的表现：深色背景和浅色背景、图片和彩色按钮上、以及容器边缘的元素——焦点环可能被 overflow: hidden 裁掉。 记住 1.4.11 的 3:1 对比度规则。双色焦点环，比如深色轮廓搭配浅色内阴影，几乎在任何背景上都有效： :focus { outline: 3px solid #1a5fb4; box-shadow: 0 0 0 5px #ffffff; } **结论** 焦点轮廓不是装饰。它是一群人用来导航的方式。记得为依赖键盘导航的用户提供焦点指示器。