Frontend Academy · 课时

键盘导航与焦点管理

Q: 「键盘导航与焦点管理」这节课中我会学到什么？

确保所有交互元素都可通过 Tab 访问，在对话框和路由切换中以编程方式管理焦点，并创建可见的焦点指示器。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

确保所有交互元素都可通过 Tab 访问，在对话框和路由切换中以编程方式管理焦点，并创建可见的焦点指示器。

键盘导航与焦点管理 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

键盘导航为何重要

许多用户无法使用鼠标：有运动障碍的用户、屏幕阅读器用户，以及偏好使用键盘的高级用户。如果您的应用无法通过键盘导航，对他们来说就是无法使用的。

Tab 和 Shift+Tab

Tab 将焦点移到下一个交互元素。Shift+Tab 将焦点移到上一个元素。默认情况下，顺序遵循 DOM 顺序——不要与之对抗，让 DOM 决定您的 Tab 顺序。

默认情况下哪些元素可以获得焦点

原生交互元素可以获得焦点：a[href]、button、input、select、textarea、summary。自定义元素需要使用 tabindex。

tabindex 的值

tabindex="0"：按照 DOM 中的位置加入 Tab 顺序。tabindex="-1"：只能通过 JS 获得焦点（脚本聚焦，不能通过 Tab 聚焦）。tabindex=">0"：反模式——会造成令人困惑的焦点顺序，永远不要使用。

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

可见的焦点指示器

如果没有提供替代方案，永远不要移除焦点轮廓。WCAG 要求每个可聚焦元素都显示清晰的指示器。

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

:focus-visible 伪类只会在焦点来自键盘而不是鼠标点击时生效。这样既能保留简洁的鼠标样式，又能显示键盘焦点。

跳转到内容链接

第一个可聚焦元素应当是跳转链接，这样键盘用户就能跳过页头导航，直接到达主要内容。

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

模态框中的焦点陷阱

打开模态框时，焦点应被限制在其中——从最后一个元素按 Tab 会回到第一个，从第一个元素按 Shift+Tab 会回到最后一个。按 Escape 会关闭模态框。

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

使用 dialog 元素

HTML 的原生 <dialog> 会自动处理焦点限制、按 Escape 关闭以及模态背景层。

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

路由更改后的焦点管理

单页应用不会重新加载页面，因此屏幕阅读器用户无法获知导航已经发生。路由更改后，应将焦点移到新页面的 h1 或 main。

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

焦点顺序应与视觉顺序一致

确保 DOM 顺序与视觉流程一致。如果 CSS 重新排列元素（flex order、grid placement、position absolute），Tab 顺序就不会与视觉顺序一致，从而让所有用户感到困惑。

把鼠标放到一边进行测试

最有用的无障碍测试方法是：拔掉鼠标，尝试仅使用 Tab、Shift+Tab、Enter、Space 和方向键操作整个应用。如果您被卡住了，您的用户也会被卡住。

快速检查

哪个 CSS 伪类可以让您只在焦点来自键盘而非鼠标点击时设置焦点轮廓样式？

回顾：键盘导航

原生交互元素默认可以获得焦点。仅对自定义组件使用 tabindex=0；永远不要使用 tabindex>0。始终显示焦点——使用 :focus-visible。添加跳转到内容链接。在模态框中限制焦点，并在关闭时恢复焦点。条件允许时使用原生 <dialog>。路由更改后将焦点移到 h1/main。把鼠标放到一边进行测试。

常见问题解答

「键盘导航与焦点管理」课时是免费的吗？

是的 — 「键盘导航与焦点管理」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「键盘导航与焦点管理」这节课中我会学到什么？

确保所有交互元素都可通过 Tab 访问，在对话框和路由切换中以编程方式管理焦点，并创建可见的焦点指示器。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「键盘导航与焦点管理」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy