ARIA: 工具栏角色

工具栏是常用控件（如按钮或复选框）的集合，以紧凑视觉形式分组在一起。toolbar 角色可用于向屏幕阅读器用户传达此类分组的存在和目的，并有助于减少键盘用户的制表位数。仅当对 3 个或更多控件进行分组时才使用 toolbar 角色。

工具栏通常是 menubar 中找到的功能的子集，用于减少用户操作。如果菜单栏中有多个工具栏，每个工具栏都需要一个标签；您可以使用 aria-labelledby 或 aria-label 包含该标签。

创建工具栏时，您需要在工具栏中实现焦点管理和键盘交互，处理在工具栏和包含的本机控件中使用相同键盘交互的情况。左箭头 和 右箭头 应用于在水平工具栏中的控件之间导航。如果工具栏是垂直的 - 在这种情况下，您还需要包含 aria-orientation="vertical" - 或者在水平工具栏中，上箭头 和 下箭头 可用于操作控件，例如需要垂直箭头键操作的旋转按钮。

避免包含操作需要用于工具栏导航的箭头键的控件。如果必须包含此类控件，请将其设为工具栏中的最后一个控件。例如，在水平工具栏中，文本框可以包含为最后一个元素。

如果工具栏中任何其他交互式元素暂时被禁用，请考虑让它们保持可聚焦，以便屏幕阅读器用户可以了解它们的存在。

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"，并实现了以下键盘交互

下箭头 (对于水平工具栏（默认值））

将焦点移至上一个控件。可选地，焦点移动可以从第一个元素环绕到最后一个元素。

上箭头 (对于水平工具栏（默认值））

将焦点移至下一个控件。可选地，焦点移动可以从最后一个元素环绕到第一个元素。

实现焦点管理，使键盘 Tab 键顺序包含一个工具栏停靠点，并且箭头键可以在工具栏中的控件之间移动焦点。当 Tab 键进入工具栏时，焦点将返回到最后一个具有焦点的控件。

虽然工具栏元素本身不会获得焦点，但必须管理进出工具栏以及在工具栏内移动焦点的行为。在加载时，工具栏中 Tab 键顺序的第一个元素将具有 tabindex="0"，而工具栏中所有其他可聚焦元素将设置为 tabindex="-1"。根据[键盘交互]，接收焦点的元素将设置为 tabindex="0"，而刚刚失去焦点的元素将切换回 tabindex="-1"。将焦点设置为具有 tabindex="0" 的元素，element.focus()。这称为“游动 tabindex”。使用游动 tabindex 来管理焦点的优势在于浏览器会将新获得焦点的元素滚动到视图中。

如果设计要求在用户下次使用 Tab 或 Shift + Tab 将焦点移动到工具栏时，将特定元素设置为焦点，请检查该目标元素在工具栏失去焦点时是否具有 tabindex="0"。

当工具栏在其内部获得焦点时，请提供视觉提示。当工具栏内的元素获得焦点时，必须在工具栏本身（以帮助工具栏支持使用箭头键的方向导航）和获得焦点的控件上都包含视觉提示。:focus 和 :focus-within 的 CSS 伪类可以用来定位这两个元素。

来自万维网联盟（W3C）的工具栏示例

避免包含操作需要用于工具栏导航的箭头键（向右和向左箭头，或垂直工具栏的向上和向下箭头）的控件。如果必须包含此类控件，请将其作为工具栏中的最后一个控件。例如，在水平工具栏中，文本框可以作为最后一个元素包含在内。

如果工具栏内的任何其他可交互元素被禁用，请考虑让它们保持可聚焦状态，以便屏幕阅读器用户可以感知到它们的存在。

• CSS :focus 伪类
• CSS :focus-within 伪类