HTML Academy · 课时

tabindex 与 accesskey

Q: 「tabindex 与 accesskey」这节课中我会学到什么？

控制键盘导航顺序和快捷键。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

控制键盘导航顺序和快捷键。

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

键盘导航

没有鼠标的用户依靠 Tab 在交互元素之间导航：

自然可聚焦：<a href>、<button>、<input>、<select>、<textarea>
非交互元素（<div>、<span>）不会进入 Tab 顺序
tabindex 控制元素是否以及在何处出现在 Tab 顺序中

tabindex="0"

tabindex="0" 会将非交互元素添加到自然 Tab 顺序中：

<div tabindex="0" role="button" onclick="handleClick()">
  Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->

<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>

tabindex="-1"

tabindex="-1" 使元素可以通过程序聚焦，但会将其从 Tab 顺序中移除：

<div id="modal" tabindex="-1" role="dialog">
  <!-- modal content -->
</div>

<script>
// Open modal and send focus to it:
document.getElementById('modal').focus();
// Modal is now focused but not in the normal tab sequence
</script>

避免使用 tabindex 正值

正值 tabindex（例如 tabindex="3"）会设置自定义 Tab 顺序——请避免使用：

<!-- BAD: positive tabindex creates unpredictable order -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<!-- The tab order becomes: 1, 2, 3, then all tabindex=0 elements -->
<!-- This almost always confuses users and fails WCAG 2.4.3 -->

<!-- Fix the DOM order instead of using positive tabindex -->

单页应用中的焦点管理

单页应用必须手动管理焦点：

// When navigating to a new route:
document.querySelector('#main-content').focus();

// When opening a modal:
const modal = document.getElementById('modal');
modal.removeAttribute('hidden');
modal.querySelector('[autofocus], button, [tabindex]').focus();

// When closing a modal: return focus to the trigger
document.getElementById('open-btn').focus();

模态框中的焦点陷阱

在打开的模态框内限制焦点，使 Tab 始终在模态框内移动：

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener('keydown', e => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  });
}

accesskey 属性

accesskey 属性为元素分配键盘快捷键：

<button accesskey="s">Submit</button>
<!-- On Windows: Alt+S focuses/activates the button -->
<!-- On Mac: Control+Option+S -->
<!-- On Firefox: Shift+Alt+S -->

<a href="/" accesskey="h">Home</a>

accesskey 的局限性

accesskey 存在明显问题：

不同浏览器和操作系统的激活按键各不相同
会与浏览器快捷键冲突（例如 Alt+F = 文件菜单）
屏幕阅读器默认不会播报
实际使用非常少——如果使用，请记录其用途

可见的焦点指示器

绝不要隐藏焦点轮廓——它们对键盘用户至关重要：

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

/* Better: style focus outlines, don't remove them */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
  border-radius: 3px;
}

/* :focus-visible only shows outline for keyboard navigation -->
/* Mouse clicks do not trigger :focus-visible in modern browsers */

跳过链接模式

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

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

<nav>... long navigation ...</nav>

<main id="main-content" tabindex="-1">... content ...</main>

<!-- CSS: -->
<!--
.skip-link {
  position: absolute;
  top: -100%;
}
.skip-link:focus {
  top: 0;
}
-->

autofocus 属性

页面加载时，autofocus 属性会将焦点移至某个元素：

<input type="search" autofocus placeholder="Search...">
<!-- Useful on search pages or forms with a single primary field -->
<!-- Use sparingly: it can disrupt users who rely on the page top for orientation -->
<!-- Only one element per page should have autofocus -->

快速检查

哪个 tabindex 值可以让元素通过 JavaScript 聚焦，但在正常的 Tab 导航中跳过它？

回顾：tabindex 与 accesskey

键盘无障碍要点：

tabindex="0" — 添加到自然 Tab 顺序中
tabindex="-1" — 可通过程序聚焦，但不在 Tab 顺序中
避免使用 tabindex 正值
绝不要移除 :focus-visible 轮廓
为键盘用户实现跳过链接
accesskey 虽然可用，但由于冲突很少实用

常见问题解答

「tabindex 与 accesskey」课时是免费的吗？

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

「tabindex 与 accesskey」这节课中我会学到什么？

控制键盘导航顺序和快捷键。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「tabindex 与 accesskey」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML Academy