ARIA：工具栏角色
toolbar 角色将容器元素定义为一组常用的功能按钮或控件，以紧凑的视觉形式呈现。
描述
工具栏是一组常用的控件，例如按钮或复选框，以紧凑的视觉形式组合在一起。toolbar 角色可用于向屏幕阅读器用户传达此类分组的存在和目的，并有助于减少键盘用户的制表符停止点数量。仅当工具栏包含 3 个或更多控件时，才使用 toolbar 角色。
工具栏通常是 menubar 中功能的一个子集，旨在减少用户的工作量。如果您在一个菜单栏中有多个工具栏，每个工具栏都需要一个标签；您可以使用 aria-labelledby 或 aria-label 来包含它。
创建工具栏时，您需要实现工具栏内的焦点管理和键盘交互，处理当工具栏和包含的本机控件使用相同的键盘交互时的情况。应使用 向左箭头 和 向右箭头 在水平工具栏的控件之间进行导航。如果工具栏是垂直的 — 此时您还应包含 aria-orientation="vertical" — 则应使用 向上箭头 和 向下箭头；或者，在水平工具栏中，可以保留它们用于操作控件，例如需要垂直箭头键才能操作的微调按钮。
避免包含操作需要用于工具栏导航的箭头键的控件。如果必须包含此类控件，请将其放在工具栏的最后一个控件。例如，在水平工具栏中，文本框可以作为最后一个元素包含在内。
如果工具栏中其他可交互的元素暂时被禁用，请考虑让它们保持可聚焦状态，以便屏幕阅读器用户可以注意到它们的存在。
关联的 WAI-ARIA 角色、状态和属性
aria-orientation-
具有 toolbar 角色的元素隐式具有
aria-orientation水平值。 aria-labelledby/aria-label-
如果工具栏有可见标签，请使用
aria-labelledby属性按 ID 引用它。否则，请提供aria-label。如果菜单中有一个以上的工具栏，则必须命名。
键盘交互
实现焦点管理，以便键盘制表符序列包含工具栏的一个制表符停止点，并且箭头键可以在工具栏中的控件之间移动焦点。
- Tab 和 Shift + Tab
-
将焦点移入和移出工具栏。当焦点移入工具栏时
- 如果焦点是第一次移入工具栏，焦点将设置在第一个未禁用的控件上。
- 如果工具栏以前包含过焦点，则焦点可以选择性地设置在上次具有焦点的控件上。否则，它将设置在第一个未禁用的控件上。
- Home (可选)
-
将焦点移至第一个元素。
- End (可选)
-
将焦点移至最后一个元素。
水平工具栏
具有 toolbar 角色的元素隐式具有 aria-orientation 水平值。如果工具栏确实具有此方向，则需要实现以下键盘交互：
- 向左箭头 (对于水平工具栏（默认）
-
将焦点移至前一个控件。可选地，焦点移动可以从第一个元素环绕到最后一个元素。
- 向右箭头 (对于水平工具栏（默认）
-
将焦点移至下一个控件。可选地，焦点移动可以从最后一个元素环绕到第一个元素。
在具有多行控件的工具栏中，允许左右箭头在行之间环绕，保留垂直箭头键用于操作控件，例如在单选按钮之间导航或递增/递减数字微调器。
垂直工具栏
如果工具栏是垂直的，请确保设置了 aria-orientation="vertical"，并实现以下键盘交互：
- 向下箭头 (对于水平工具栏（默认）
-
将焦点移至前一个控件。可选地，焦点移动可以从第一个元素环绕到最后一个元素。
- 向上箭头 (对于水平工具栏（默认）
-
将焦点移至下一个控件。可选地，焦点移动可以从最后一个元素环绕到第一个元素。
所需的 JavaScript 功能
实现焦点管理，以便键盘制表符序列包含工具栏的一个制表符停止点，并且箭头键可以在工具栏中的控件之间移动焦点。当制表符进入工具栏时，焦点会返回到上次具有焦点的控件。
虽然工具栏元素本身不接收焦点，但必须管理焦点移入、移出和在工具栏内的移动。加载时，工具栏内制表符序列的第一个元素具有 tabindex="0"，而工具栏内所有其他可聚焦元素都设置为 tabindex="-1"。根据 [键盘交互]，接收焦点的元素设置为 tabindex="0"，刚刚失去焦点的元素切换回 tabindex="-1"。使用 element.focus() 设置焦点，聚焦于具有 tabindex="0" 的元素。这称为“循环制表索引”。使用循环制表索引管理焦点的优点是浏览器会将新聚焦的元素滚动到视图中。
如果设计要求下次用户使用 Tab 或 Shift + Tab 将焦点移入工具栏时，特定元素应获得焦点，请检查当工具栏失去焦点时该目标元素是否具有 tabindex="0"。
当工具栏具有焦点时，请提供视觉提示。当工具栏内的元素具有焦点时，必须在工具栏本身（以帮助工具栏支持箭头键的定向导航）和具有焦点的控件上包含视觉提示。可以使用 :focus 和 :focus-within 的 CSS 伪类来定位这两个元素。
示例
可访问性考虑
避免包含操作需要用于工具栏导航的箭头键（水平工具栏的左右箭头，或垂直工具栏的上下箭头）的控件。如果必须包含此类控件，请将其放在工具栏的最后一个控件。例如，在水平工具栏中，文本框可以作为最后一个元素包含在内。
如果工具栏中其他可交互的元素被禁用，请考虑让它们保持可聚焦状态，以便屏幕阅读器用户可以注意到它们的存在。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # toolbar |
| 未知规范 |