HTML Academy · 课时

aria-selected 与标签页模式

Q: 「aria-selected 与标签页模式」这节课中我会学到什么？

实现可通过键盘访问的标签页界面 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

实现可通过键盘访问的标签页界面

第 2 / 4 课13 个步骤

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

选项卡模式概览

选项卡界面包含三个 ARIA 组件：

role="tablist" ——所有选项卡的容器
role="tab" ——单个选项卡按钮
role="tabpanel" ——每个选项卡对应的内容面板

ARIA 选项卡结构

完整的无障碍选项卡标记：

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

aria-selected 表示选择上下文中当前处于活动状态的项目：

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

选项卡键盘模式

ARIA 模式为选项卡定义了特定的键盘行为：

Tab——将焦点移入选项卡列表中的所选选项卡
箭头键——在选项卡之间循环切换
再次按Tab——将焦点从选项卡列表移出，进入活动面板
Home——第一个选项卡
End——最后一个选项卡

选项卡键盘实现

使用箭头键实现选项卡的键盘导航：

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

activateTab 函数

用于切换选项卡并更新 ARIA 的函数：

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

循环 tabindex 模式

选项卡组使用循环 tabindex，使选项卡顺序中始终只有一个选项卡：

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selected 与 aria-checked

aria-selected 与 aria-checked——适用上下文不同：

aria-selected ——用于选择控件：选项卡、列表框中的选项、树中的项目
aria-checked ——用于可勾选项目：复选框、带有勾选标记的菜单项

选项卡面板焦点

激活选项卡后，面板会变为可见，但焦点仍停留在选项卡上：

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

自动激活与手动激活

两种选项卡激活模式：

自动——用户使用箭头键浏览时，选项卡会随之激活（用户体验更简单）
手动——使用箭头键浏览后，用户必须按回车键或空格键才能激活（适用于选项卡内容需要加载的情况）

无障碍选项卡样式

用于设置无障碍选项卡选中状态的 CSS：

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

快速检查

选项卡列表中的键盘导航应如何工作？

在交互式课程中回答

复习：aria-selected 和选项卡

选项卡模式的要点：

tablist → tab（aria-selected）→ tabpanel（aria-labelledby）
使用箭头键在选项卡之间导航；使用 Tab 进入面板
循环 tabindex：只有活动选项卡的 tabindex 为 0
在活动选项卡上设置 aria-selected="true"
非活动面板使用 hidden 属性

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 40
课程: 159

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

常见问题解答

「aria-selected 与标签页模式」课时是免费的吗？

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

「aria-selected 与标签页模式」这节课中我会学到什么？

实现可通过键盘访问的标签页界面你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「aria-selected 与标签页模式」课时需要多长时间？

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

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

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

此课程中的所有课时

用于切换控件的 aria-expanded 和 aria-controls
aria-selected 与标签页模式
实时区域：aria-live、aria-atomic、aria-relevant
使用屏幕阅读器进行测试

← 返回 HTML Academy