toolbar

使用时机

当存在一行（或一列）三个或三个以上相关控件时使用——文本编辑器格式栏、聊天输入框上方的图标行、图片编辑操作区。其优势在于键盘效率：工具栏不是每个按钮各占一个 Tab 停止点，而是整体消耗一个 Tab 停止点，通过方向键暴露其子元素。

工具栏必须具有无障碍名称（aria-label 或 aria-labelledby）。方向默认为水平；垂直工具栏应设置 aria-orientation="vertical"。

子元素通常为 <button> 按钮，逻辑分组之间使用 role="separator" 分隔。工具栏可包含按钮、切换按钮、链接、菜单按钮及其他小型控件，但不应包含整个表单或列表控件。

键盘与焦点约定

按照 APG 工具栏模式：

• Tab 将焦点移入工具栏，落在第一个或上次获得焦点的控件上；再次按 Tab 移出工具栏。
• 左/右方向键（垂直时为上/下）在工具栏各项间移动。
• Home / End 跳至第一个 / 最后一个项目。
• 每个单独按钮仍通过 Enter 或 Space 激活——工具栏角色不改变其激活约定。

采用漫游 tabindex：任何时刻仅有一个工具栏项的 tabindex="0"。

常见错误

• 工具栏中所有按钮均设置 tabindex="0"。这完全违背了工具栏的意义——Tab 仍会逐个经过每个按钮。
• 工具栏没有无障碍名称。
• 工具栏按钮视觉上为图标却缺少标签。应为每个按钮添加 aria-label。
• 将工具栏与 role="group" 语义混用。应二选一：toolbar 隐含方向键导航，group 则不然。
• 在 <nav> 元素上使用 role="toolbar"。两种角色冲突——应择一使用。

示例

<div role="toolbar" aria-label="文本格式">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="加粗">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="斜体">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="下划线">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="插入链接">链接</button>
</div>