HTML Academy · 课时

键盘导航与焦点顺序

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

确保所有功能都能通过键盘以合乎逻辑的方式访问 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

确保所有功能都能通过键盘以合乎逻辑的方式访问

第 4 / 4 课13 个步骤

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

谁需要键盘导航？

许多用户依赖键盘导航：

运动障碍用户——无法使用鼠标
高效用户——偏好使用键盘快捷键
屏幕阅读器用户——完全通过键盘导航
开关访问用户——使用模拟按键的按钮

可自然获得 focus 的元素

以下 HTML 元素默认可以通过键盘获得 focus：

<a href>——Tab 键移动到该元素，Enter 键激活它
<button>——Tab 键移动到该元素，Enter 键或空格键激活它
<input>、<textarea>、<select>——Tab 键移动到这些元素
<details> / <summary>——Tab 键 + Enter 键

Tab 顺序

浏览器根据以下规则确定 Tab 顺序：

默认按照 DOM 顺序——元素按照其在 HTML 中出现的顺序进入 Tab 顺序
正 tabindex 值——这些元素按照升序优先进入 Tab 顺序
tabindex="0"——按照其在 DOM 中的位置加入自然 Tab 顺序
tabindex="-1"——不在 Tab 顺序中，只能通过脚本获得 focus

自然 Tab 顺序 = DOM 顺序

HTML 的阅读顺序应与视觉布局一致：

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

可见的 focus 指示器

WCAG 2.4.7（等级 AA）：键盘 focus 必须可见：

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

自定义 focus 样式

设计系统的 focus 样式：

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

符合逻辑的 focus 顺序

focus 顺序应符合逻辑且可预测——WCAG 2.4.3（等级 A）：

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

跳过链接

跳过链接可让键盘用户跳过重复的导航：

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

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

模态框 focus 陷阱

模态框打开时必须锁定 focus：

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

键盘快捷键

使用事件监听器实现键盘快捷键：

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

测试键盘导航

测试键盘无障碍的方法：

放下鼠标，只使用键盘
按 Tab 键——您能访问每个交互元素吗？
focus 指示器是否始终可见？
Tab 顺序是否符合逻辑？
您能否在不使用鼠标的情况下使用所有功能（表单、模态框、下拉菜单）？
按 Shift+Tab 向后导航

快速检查

为了确保键盘无障碍，您绝不应从所有元素中移除哪个 CSS 属性？

在交互式课程中回答

回顾：键盘导航

键盘无障碍的要点：

所有交互元素都必须可以通过 Tab 键访问
DOM 顺序 = Tab 顺序——应与视觉布局一致
切勿移除 focus 轮廓——使用 :focus-visible 自定义样式
跳过链接可以跳过重复的导航
模态框中应设置 focus 陷阱；关闭时恢复 focus
仅使用键盘操作网站进行测试

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

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

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

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

确保所有功能都能通过键盘以合乎逻辑的方式访问你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 HTML Academy