可见焦点：绝不要隐藏轮廓
避免用户在页面中迷失方向
可见焦点：绝不要隐藏轮廓 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
我现在在哪里？
键盘用户一次只能看到一件事：哪个控件拥有焦点。这个可见标记称为焦点指示器。👀
浏览器免费提供一个
默认情况下，您按 Tab 时，浏览器会在活动元素周围绘制焦点轮廓。它就是内置的“您在这里”标记。
最常见的无障碍错误
设计人员常常不喜欢轮廓并将其删除。outline none 这一条规则会立即让键盘用户失去方向。请不要直接这样发布。
:focus { outline: none; } /* harmful on its own */只有替换后才能移除
您可以移除默认轮廓，但必须添加清晰的替代样式。不要让获得焦点的控件看起来与未激活的控件完全一样。
button:focus { outline: 3px solid #1565C0; }让它一目了然
优秀的指示器应当容易发现：可以使用粗轮廓、环形边框或明显的颜色变化。在这里，不明显是敌人，而不是朋友。
focus-visible 更智能
focus-visible 选择器会为键盘用户显示环形指示器，但在普通鼠标点击时将其隐藏。这样既安全，又不会造成视觉干扰。
button:focus-visible { outline: 3px solid #1565C0; }这里同样要注意对比度
与背景融为一体的轮廓帮不上任何人。焦点样式需要足够的对比度，才能从页面中凸显出来。
不要裁剪环形指示器
请留意父元素上的 overflow hidden。它可能会裁剪焦点轮廓，让底部边缘悄无声息地消失。
offset 留出空间
使用 outline-offset 将环形指示器向外推离元素。留出一点间隙后，指示器会更容易被发现。
a:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; }这是 WCAG 的要求
这不只是视觉修饰。WCAG 要求每个交互元素都有可见的焦点指示器，因此隐藏它可能导致不符合规范。
在您自己的网站上使用 Tab
最快且免费的测试方法是：使用 Tab 浏览整个页面。如果您曾经无法找到焦点，说明焦点指示器需要改进。
快速检查
请选择处理焦点样式的最安全方式。
回顾：保持焦点可见
不要在未替换的情况下移除焦点环。优先使用 focus-visible，为它提供明显的对比度和偏移，并亲自使用 Tab 进行测试。✅
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「可见焦点：绝不要隐藏轮廓」课时是免费的吗？
是的 — 「可见焦点：绝不要隐藏轮廓」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「可见焦点：绝不要隐藏轮廓」这节课中我会学到什么？
避免用户在页面中迷失方向 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「可见焦点：绝不要隐藏轮廓」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。