示例

手风琴示例：演示把一个表单分成三部分，手风琴每次只展开其中一部分。

键盘交互

• Enter 或 Space：
  • 焦点位于折叠面板的手风琴标题上时，展开其关联的面板。如果实现中约定每次只允许扩展一个面板，并且有面板已经是展开的状态，则（先前）展开的面板会被折叠。
  • 焦点位于展开面板的手风琴标题上时，如果实现支持折叠，则折叠面板。一些实现要求始终扩展且只允许扩展一个面板，因此，（这种情况下）它们不支持折叠功能。
• Tab：将焦点移动到下一个可聚焦元素上；手风琴中的所有可聚焦元素都包含在页面的 Tab sequence 中。
• Shift + Tab：将焦点移至上一个可聚焦元素上；手风琴中的所有可聚焦元素都包含在页面的 Tab sequence 中。
• Down Arrow（可选）：如果焦点在手风琴标题上，则将焦点移动到下一个手风琴标题。如果焦点在最后一个手风琴标题上，则不作任何操作或将焦点移动到手风琴的第一个标题。
• Up Arrow（可选）：如果焦点在手风琴标题上，则将焦点移动到上一个手风琴标题。如果焦点在第一个手风琴标题上，则不作任何操作或将焦点移动到手风琴的最后一个标题。
• Home（可选）：当焦点在手风琴标题上时，将焦点移到手风琴的第一个标题。
• End（可选）：当焦点在手风琴标题上时，将焦点移到手风琴的最后一个标题。

WAI-ARIA 角色、状态和属性

• 每个手风琴标题包含在一个角色为 button 的元素内。
• 每个手风琴标题 button 都被一个具有 heading 角色的元素包裹，且该元素设置了合适的 aria-level 值以适配页面的信息架构。
  • 如果原生语言具有隐含的 heading 角色和 aria-level 属性的元素，例如 HTML 标题标签（HTML heading tag），可以使用原生语言元素。
  • button 元素是 heading 元素内的唯一元素。也就是说，即使有其他（跟 button 元素）视觉上持久（visually persistent）的元素，他们不能被包含在 heading 元素中。
• 如果与手风琴标题关联的手风琴面板是展开的，则标题的 button 元素的 aria-expanded 属性设置为 true。如果面板折叠的，则 aria-expanded 属性设置为 false。
• 手风琴标题包裹的 button 元素的 aria-controls 属性需设置为包含手风琴面板的内容元素的ID。
• 如果与手风琴标题关联的手风琴面板是展开的，并且不允许该手风琴面板折叠，那标题的 button 元素的 aria-disabled 设置为 true。
• （可选）每个面板容器内容的元素，可以设置 region 角色和 aria-labelledby 属性，其值指向控制面板显示的按钮。
  • 避免在产生地标性区域扩散（landmark region proliferation，或称“标志性区域扩散”）的情况下使用 region 角色，例如在一个包含超过 6 个面板的手风琴中，且这些面板可能会同时展开。
  • 当面板包含标题元素或嵌套手风琴时，region 角色对屏幕阅读器用户感知结构特别有帮助。

示例

警告示例

键盘交互

不适用。

WAI-ARIA 角色、状态和属性

该 widget 的角色为 alert。

示例

警告对话框示例：演示警告对话框的确认提示。

键盘交互

请参阅模态对话框模式键盘交互部分。

WAI-ARIA 角色、状态和属性

• 包含对话框所有元素（包括警告消息和任何对话框按钮）的元素，具有 alertdialog 角色。
• 角色设置为 alertdialog 的元素拥有以下情况中的一种：
  • 如果对话框具有可见的标签，则 aria-labelledby 的值指向包含对话框标题（标签）的元素。
  • 如果对话框没有可见的标签，指定一个 aria-label 的值。
• 角色为 alertdialog 的元素，具有 aria-describedby 属性来索引包含警告信息的元素。

示例

面包屑设计模式示例

键盘交互

不适用。

WAI-ARIA 角色、状态和属性

• 面包屑路径被包含在导航路标区域（navigation landmark region）内。
• 地标区域使用 aria-label 或 aria-labelledby 标记。
• 当前页面的链接的 aria-current 属性设置为 page。如果表示当前页面的元素不是链接的形式，则 aria-current 可选。

示例

• 按钮示例：将可点击的 HTML div 和 span 元素构成可访问的命令和切换按钮的示例。
• 按钮示例（IDL）：将可点击的HTML div 和 span 元素构成可访问的命令和切换按钮的例子。这个例子使用了 IDL 接口。

键盘交互

当按钮获取焦点时：

• Space：激活按钮。
• Enter：激活按钮。
• 按钮激活后，根据按钮操作的作用类型来设置焦点。例如：
  • 如果激活按钮时对话框打开，焦点将移动到对话框内。（见对话框模式）
  • 如果激活按钮时对话框关闭，焦点通常返回到打开该对话框的按钮上，除非该对话框执行的功能会遵从上下文的逻辑，去到一个不同的元素。例如，激活对话框中的取消按钮，焦点默认返回至打开对话框的按钮上。但是，如果对话框是确认删除其来自页面的操作，焦点将会根据逻辑移动到新的上下文。
  • 如果激活按钮不会关闭当前上下文，则按钮激活后焦点仍将停留在该按钮上，例如，一个确定或重新计算的按钮。
  • 如果按钮操作会导致上下文变更，例如，移动到步骤条中的下一步，或添加其他搜索条件，此时，可以将焦点移动到新操作的起点。
  • 如果使用快捷键激活按钮，焦点通常保留在激活快捷键的上下文中。例如，如果把快捷键 Alt + U 分配给“向上”按钮，该按钮会将当前聚焦的列表项目移动到列表中的较高位置，当焦点在列表中时，按 Alt + U 不会将焦点移出列表。

WAI-ARIA 角色、状态和属性

• 按钮具有 button 角色。
• button 有一个可访问的标签。默认情况下，可访问名称是从按钮元素内部的所有内容计算得来。但是，可访问名称也可以通过 aria-labelledby 或 aria-label 提供。
• 如果按钮有功能描述，则将按钮元素的 aria-describedby 的值设置为包含描述的元素的 ID。
• 如果与按钮相关联的动作不可用，该按钮的 aria-disabled 设置为 true。
• 如果按钮是一个切换按钮，则其具有 aria-pressed 状态属性。按钮打开时，该状态属性的值为 true，按钮关闭时，该状态属性的值为 false。

示例

• 基于幻灯片控制按钮实现图像轮播自动切换：基本的图像轮播，演示了在页面加载时自动切换轮播所需的无障碍功能，还允许用户通过“上一张”和“下一张”按钮选择显示哪张幻灯片。
• 基于选项卡实现切换图片轮播自动切换：图片轮播，演示了在页面加载时自动切换轮播所需的无障碍功能，也使用户能够通过选项卡选择显示哪张幻灯片。

术语

以下术语用于描述轮播。

幻灯片（Slide）

一组内容容器内的单个内容容器，它容纳了将由轮播展示的内容。

切换控件（Rotation Control）

停止和启动幻灯片自动切换的交互式元素（interactive element）。

下一张幻灯片控件（Next Slide Control）

一个交互式元素，通常设计为箭头样式，用于显示轮播序列（rotation sequence）中的下一张幻灯片。

上一张幻灯片控件（Previous Slide Control）

一个交互式元素，通常设计为箭头样式，用于显示轮播序列中的上一张幻灯片。

幻灯片选取器控件（Slide Picker Controls）

一组元素，通常设计为一组小圆点，使用户能够在轮播序列中选择一张特定的幻灯片来显示。

键盘交互

• 如果轮播具有自动切换功能，则当轮播中的任何元素接收到键盘焦点时，幻灯片停止自动切换。除非用户激活自动切换控件，否则不会恢复。
• Tab and Shift + Tab：按照页面 tab sequence 的规定，在轮播的交互式元素中移动焦点，无须为 Tab 编写脚本。
• 按钮元素实现了按钮模式中定义的键盘交互。 注意：激活切换控件、下一张幻灯片（按钮）和上一张幻灯片（按钮）时不会移动焦点，因此用户可以轻松地根据需要多次重复激活它们。
• 如果存在切换控件，它应该是轮播中 Tab sequence 中的第一个元素。（切换控件）必须位于轮播内容之前，以便可以轻松定位。
• 如果幻灯片选取器控件基于选项卡元素实现，那么相应的键盘交互实现定义可参考选项卡模式。

WAI-ARIA 角色、状态和属性

本节介绍三种轮播样式的元素组成：

• 基本轮播（Basic）：具有切换控件、上一张幻灯片和下一张幻灯片控件，但没有幻灯片选取器控件。
• 选项卡式轮播（Tabbed）：具有基本控件和使用选项卡模式实现的幻灯片选取器控件，（焦点）只会在 tab sequence 中有一次停留（single tab stop）。
• 分组式轮播（Grouped）：拥有基本的控件，加上一组包含一系列 tab stops 的幻灯片选取器控件，并且每个控件都实现了按钮模式。由于每个幻灯片选取器按钮都会给页面的 tab sequence 中增加一个元素，所以这种风格对键盘用户来说最不友好。

基本轮播元素

• 包含轮播的所有组件（包括轮播控件和幻灯片）的轮播容器元素具有 region 角色或 group 角色。轮播容器最合适的角色取决于页面的信息架构。请参阅地标区域指南（landmark regions guidance）以确定轮播是否应当指定为地标区域（landmark region）。
• 轮播容器的 aria-roledescription 属性设置为 carousel。
• 如果轮播具有可见标签，则其可访问标签由轮播容器上的 aria-labelledby 属性提供，该属性设置为包含可见标签的元素的 ID。否则，可访问标签由轮播容器上的 aria-label 属性提供。请注意，由于 aria-roledescription 设置为“carousel”，因此标签不应该包含“carousel”一词。
• 切换控件、“下一张幻灯片”控件和“上一张幻灯片”控件要么是原生按钮元素（推荐），要么基于按钮模式实现。
• 切换控件具有由其内部文本或 aria-label 提供的可访问标签。标签会更改以匹配按钮将执行的操作，例如“停止幻灯片自动切换”或“开启幻灯片自动切换”。当按钮激活时，标签会发生变化，这清楚地传达了幻灯片内容可以自动改变，以及它何时会改变。请注意，由于标签发生了变化，切换控件并没有指定任何状态，例如指定 aria-pressed 属性。
• 每个幻灯片容器都有 group 角色，且 aria-roledescription 属性设置为 slide。
• 每张幻灯片都有一个可访问标签：
  • 如果幻灯片具有可见标签，则其可访问标签由幻灯片容器上的 aria-labelledby 属性提供，其值设置为包含可见标签的元素的 ID。
  • 否则，由幻灯片容器上 aria-label 属性提供可访问标签。
  • 如果没有能够识别幻灯片内容的独特名称，则可以使用数字和集合大小作为有意义的替代方案，例如“第 3 个，共 10 个”。注意：通常情况下，在可访问名称中包含当前位置和集合大小信息是不合适的。但这种实现在某些场景下非常有用，例如组（group）元素并不支持 aria-setsize 或 aria-posinset 属性，选项卡式轮播的实现模式则没有这个限制。
  • 请注意，由于 aria-roledescription 设置为“slide”，标签中不应该再包含“slide”一词。
• （可选）包含幻灯片元素集的元素将 aria-atomic 设置为 false 和 aria-live 设置为：
  • off：如果轮播是自动切换的。
  • polite：如果轮播没有自动切换。

选项卡式轮播元素

选项卡式轮播与基本轮播相同，不同之处在于：

• 每个幻灯片容器都有 tabpanel 角色代替 group，而且它没有 aria-roledescription 属性。
• 它具有使用选项卡模式实现的幻灯片选取器控件，其中：
  • 每个控件都是 tab 元素，因此激活选项卡将显示与该选项卡相关联的幻灯片。
  • 每个 tab 的可访问名称通过包括幻灯片的名称或编号来指示它将显示哪个幻灯片，例如，“幻灯片3”。如果每张幻灯片都有唯一的名称，则最好使用幻灯片名称。
  • 这组控件通过一个 tablist 元素组合起来，该元素由 aria-label 提供可访问名称，用于标识选项卡的用途，例如“选择要显示的幻灯片”。
  • tab、tablist 和 tabpanel 实现了选项卡模式中指定的属性。

分组式轮播元素

分组式轮播的结构与基本轮播相同，但它还包括幻灯片选取器控件，其中：

• 幻灯片选取器控件集包含在具有 group 角色的元素中。
• 包含选取器控件的组具有由 aria-label 的值提供的可访问标签，用于标识控件的用途，例如“选择要显示的幻灯片”。
• 每个选择器控件都是原生按钮元素（推荐）或实现了按钮模式。
• 每个选取器按钮的可访问名称与其显示的幻灯片的名称匹配，这可以通过将 aria-labelledby 属性设置为相关联的幻灯片 group 元素的 ID 来实现。
• 关联了当前正在显示幻灯片的选取器按钮，其 aria-disabled 属性设置为 true。注意： aria-disabled 比 HTML 的 disabled 属性更合适，因为在这种情况下，屏幕阅读器用户可以从页面 Tab sequence 中包含的禁用按钮中受益。

示例

• 双态多选框示例：演示简单的双态多选框。
• 三态多选框示例： 演示一个多选框，该多选框使用 aria-checked 的 mixed 值来反映和控制 HTML fieldset 元素中一组双态 HTML 多选框的选中状态。

键盘交互

当多选框拥有焦点时，按 Space 键可以改变多选框的状态。

WAI-ARIA 角色、状态和属性

• 多选框有 checkbox 角色。
• 多选框有一个可访问的标签，由以下之一提供：
  • 具有 checkbox 角色的元素中包含的可见文本内容。
  • 具有 checkbox 角色的元素，其 aria-labelledby 值引用了一个可见的标签。
  • 具有 checkbox 角色的元素设置了 aria-label。
• 选中后，多选框元素的 aria-checked 状态设置为 true。
• 如果未选中，aria-checked 状态设置为 false。
• 当部分选中，aria-checked 状态设置为 mixed。
• 如果使用一个可见标签可将一组多选框标识为一个逻辑组，这些多选框应该被包含在一个具有 group 角色的元素中，且该元素的 aria-labelledby 设置为包含标签的元素的 ID。
• 如果多选框或多选框组包括额外的相关联静态描述文案，多选框或多选框组的 aria-describedby 属性设置为包含描述元素的 ID。

示例

• 只支持选择（而不可编辑）的组合框：没有文本输入的单选组合框，功能上类似于 HTML 的 select 元素。
• 支持列表和内联自动补全的可编辑组合框：一个可编辑的组合框，展示了自动补全的行为，称为“内联自动补全列表”。
• 支持列表自动补全的可编辑组合框：一个可编辑组合框，展示了自动补全的行为，称为“手动选择列表”。
• 不支持自动补全的可编辑组合框：一个可编辑的组合框，展示了与 aria-autocomplete=none 相关的行为。
• 具有网格弹出窗口的可编辑组合框：一个可编辑的组合框，在网格中显示建议值，使用户能够浏览有关每个建议值的描述性信息。
• 日期选择器组合框：一个可编辑的日期输入组合框，用于打开一个对话框，其中包含日历网格和按月份、年份导航的按钮。

键盘交互

• Tab：组合框在页面的 Tab sequence 中。
• 注意：弹出指示图标或按钮（如果存在）、弹出窗口和弹出窗口的子元素将会从页面的 Tab sequence 中排除。

组合框键盘交互

焦点在组合框中：

• Down Arrow：如果弹出窗口可用，则将焦点移动到弹出窗口中：
  • 如果自动补全行为在按下 Down Arrow 之前自动选择了建议值，则焦点置于自动选择的建议值之后的建议值上。
  • 否则，将焦点置于弹出窗口中的第一个可聚焦元素上。
• Up Arrow（可选）：如果弹出窗口可用，则将焦点放在弹出窗口中的最后一个可聚焦元素上。
• Escape：如果弹出窗口可见，则隐藏弹出窗口。（可选）在弹出窗口是隐藏状态并按下 Escape 时，清除组合框的输入。
• Enter：如果组合框可编辑，并且在弹出窗口中选择了自动补全的建议值，则通过将输入光标置于组合框中接受值的末尾或对该值执行默认操作来接受建议值。 例如，在即时通讯应用中，默认操作可以是将符合要求的值添加到消息接收者列表，然后清除组合框，以便用户可以添加另一个接收者。
• 可打印字符：
  • 如果组合框可编辑，则可以在组合框中键入字符。注意，一些实现可能将某些字符视为无效字符（译者注：例如仅支持纯英文输入、纯数字输入的场景），并阻止它们的输入。
  • 如果组合框不可编辑，（可选）则将焦点移动到以键入的字符开头的建议值上。
• 如果组合框可编辑，则它支持适用于设备平台的标准单行文本编辑键（参见下面的“说明”）。
• Alt + Down Arrow（可选）：如果弹出窗口可用但未显示，则在不移动焦点的情况下显示弹出窗口。
• Alt + Up Arrow（可选）：如果弹出窗口已显示：
  • 如果弹出窗口包含焦点，则将焦点返回到组合框。
  • 关闭弹出窗口。

列表框弹出窗口键盘交互

焦点在列表框弹出窗口中：

• Enter：选中列表框中的焦点选项并关闭弹出窗口，同时将相应的值填到组合框中，如果组合框可编辑，则将输入光标置在值的末尾。
• Escape：关闭弹出窗口并将焦点返回到组合框。如果组合框可编辑，则清除组合框的内容。
• Down Arrow：将焦点移动到并选择下一个选项。如果焦点在最后一个选项上，则将焦点返回到组合框或不执行任何操作。
• Up Arrow：将焦点移动到并选择上一个选项。如果焦点在第一个选项上，则将焦点返回到组合框或不执行任何操作。
• Right Arrow：如果组合框可编辑，则将焦点返回到组合框而不关闭弹出窗口，并将输入光标向右移动一个字符。 如果输入光标位于最右边字符后方，则光标不会移动。
• Left Arrow：如果组合框可编辑，则将焦点返回到组合框而不关闭弹出窗口，并将输入光标向左移动一个字符。 如果输入光标位于最左边字符前方，则光标不会移动。
• Home（可选）：将焦点移动到并选择第一个选项，或者，如果组合框可编辑，则将焦点返回到组合框并将光标置于第一个字符之前。
• End（可选）：将焦点移动到最后一个选项，或者，如果组合框可编辑，则将焦点返回到组合框，并将光标置于最后一个字符之后。
• 任何可打印字符：
  • 如果组合框可编辑，则在不关闭弹出窗口的同时将焦点移动到组合框上，同时键入字符。
  • 否则，将焦点移动到下一个名称以键入的字符开头的建议值上。
• Backspace（可选）：如果组合框可编辑，则将焦点返回到组合框并删除光标之前的字符。
• Delete（可选）：如果组合框可编辑，则将焦点返回到组合框，如果选择了建议值，将删除其选定状态，并删除内联自动补全的文本（如果存在）。

网格弹出窗口键盘交互

在网格弹出窗口中，每个建议值可以由单个单元格或整行表示。 关于网格设计的这个方面是如何影响键盘交互设计以及选择移动以响应焦点移动的方式，请参见下面的“说明”。

• Enter：关闭弹出窗口，接受当前选定的建议值，将选定的值放置在组合框中，如果组合框可编辑，则将输入光标置于值的末尾。
• Escape：关闭弹出窗口并将焦点返回到组合框。（可选）如果组合框可编辑，则清除组合框的内容。
• Right Arrow：将焦点向右移动一个单元格。 （可选）如果焦点在某行中最右侧的单元格上，则焦点可以移动到下一行的第一个单元格上。 如果焦点在网格中的最后一个单元格上，则不执行任何操作或将焦点置于组合框上。
• Left Arrow：将焦点向左移动一个单元格。 （可选）如果焦点在某行中最左侧的单元格上，则焦点可以移动到上一行的最后一个单元格上。 如果焦点位于网格中的第一个单元格，则不执行任何操作或将焦点置于组合框上。
• Down Arrow：将焦点向下移动一个单元格。 如果焦点在网格的最后一行上，则不执行任何操作或将焦点置于组合框上。
• Up Arrow：将焦点向上移动一个单元格。 如果焦点在网格的第一行上，则不执行任何操作或将焦点置于组合框上。
• Page Down（可选）：将焦点向下移动到作者指定（author-determined）的行数的新位置，通常表现为当前可见行中处于底部位置的行滚动至成为顶部位置的可见行之一。 如果焦点在网格的最后一行上，则焦点不移动。
• Page Up（可选）：将焦点向上移动到作者指定（author-determined）的行数的新位置，通常表现为当前可见行中处于顶部位置的行滚动至成为底部位置的可见行之一。 如果焦点在网格的第一行上，则焦点不移动。
• Home（可选）：以下二选一
  • 将焦点移动到包含焦点的行中的第一个单元格。或者，如果网格每行少于三个单元格或每行有多个建议值，则焦点可以移动到网格中的第一个单元格。
  • 如果组合框可编辑，则将焦点返回到组合框，并将光标置于第一个字符上。
• End（可选）：以下二选一
  • 将焦点移动到包含焦点的行中的最后一个单元格。或者，如果网格每行少于三个单元格或每行有多个建议值，则焦点可能会移动到网格中的最后一个单元格。
  • 如果组合框可编辑，则将焦点返回到组合框，并将光标放在最后一个字符之后。
• Control + Home（可选）：将焦点移动到第一行。
• Control + End（可选）：将焦点移动到最后一行。
• 任何可打印字符：如果组合框可编辑，则在不关闭弹出窗口的同时将焦点移动到组合框上，同时键入字符。
• Backspace（可选）：如果组合框可编辑，则将焦点返回到组合框并删除光标之前的字符。
• Delete（可选）：如果组合框可编辑，则将焦点返回到组合框，如果选择了建议，则删除选定状态，如果存在，则删除内联自动补全的文本。

树弹出窗口键盘交互

在树弹出窗口的一些实现中，部分或全部父节点可能仅作为建议类别标签，因此它们可能不是可选值。 关于这将如何影响键盘交互设计以及选择移动以响应焦点移动的方式，请参见下面的“说明”。

焦点在垂直方向的树弹出窗口中：

• Enter：关闭弹出窗口并接受当前选定的建议值，将选定的值放置在组合框中，如果组合框可编辑，则将输入光标置于值的末尾。
• Escape：关闭弹出窗口并将焦点返回到组合框，（可选）同时清除组合框的内容。
• Right Arrow：
  • 焦点在闭节点（closed node）上时，展开该节点；焦点和选中态保持不变。
  • 焦点位于开节点（open node）上时，将焦点移动到第一个子节点，并选择它（如果节点可选中）。
  • 焦点在端节点（end node）上时，不执行任何操作。
• Left Arrow：
  • 焦点在开节点上时，收起该节点。
  • 焦点位于同时是端节点或闭节点的子节点上时，将焦点移动到其父节点，并选择它（如果节点可选中）。
  • 焦点位于同时是端节点或闭节点的根节点上时，不执行任何操作。
• Down Arrow：将焦点移动到下一个可聚焦节点，无须展开或收起节点，同时选择该节点（如果节点可选中）。
• Up Arrow：将焦点移动到上一个可聚焦节点，无须展开或收起节点，同时选择该节点（如果节点可选中）。
• Home：将焦点移动到树中的第一个可聚焦节点，无须展开或收起节点，同时选择该节点（如果节点可选中）。
• End：将焦点移动到树中的最后一个可聚焦节点，无须展开或收起节点，同时选择该节点（如果节点可选中）。
• 任何可打印字符：
  • 如果组合框可编辑，则在不关闭弹出窗口的同时将焦点移动到组合框上，同时键入字符。
  • 否则，将焦点移动到下一个名称以键入的字符开头的建议值上。

对话框弹出窗口键盘交互

焦点在弹出对话框中：

• 有两种方法可以关闭弹出窗口并将焦点返回到组合框：
  1. 在对话框中执行一个动作，如激活一个按钮，为组合框指定一个值。
  2. 从对话中取消，例如，按下 Escape 或激活对话框中的取消按钮。 取消可以将焦点返回到组合框而不更改组合框值，或者将焦点返回到组合框并清除组合框。
• 对话框实现模态对话框模式中定义的键盘交互。

WAI-ARIA 角色、状态和属性

• 用作输入并显示组合框值的元素具有 combobox 角色。
• 组合框元素的 aria-controls 属性设置为引用用作弹出窗口的元素的值。 注意 aria-controls 仅在弹出窗口可见时才需要设置。但是，引用不可见的元素也是有效的。
• 弹出窗口是具有 listbox，tree，grid 或 dialog 角色的元素。
• 如果弹出窗口的角色不是 listbox，具有 combobox 角色的元素将 aria-haspopup 属性设置为与弹出窗口类型对应的值。 也就是 aria-haspopup 属性置为 grid，tree，或 dialog。 请注意，具有 combobox 角色的元素有一个隐含的 aria-haspopup 属性值为 listbox。
• 组合框弹出窗口不可见时，具有 combobox 角色的元素将 aria-expanded 属性置为 false。 当弹出窗口元素可见时，aria-expanded 置为 true。 请注意，具有 combobox 角色的元素的 aria-expanded 属性的默认值是 false。
• 组合框接收焦点时，DOM 焦点置于组合框元素上。
• 聚焦于列表框、网格或树弹出窗口的子元素时，DOM 焦点保留在组合框上，并且组合框将 aria-activedescendant 设置为一个值，该值引用弹出窗口中的聚焦元素。
• 对于控制列表框、网格或树弹出窗口的组合框，如果一个建议值被直观地显示为当前选定的值，包含该值的 option，gridcell，row，或 treeitem 的 aria-selected 设置为 true。
• 如果组合框具有可见标签并且组合框元素是可以使用 HTML label 元素（例如 input 元素）标记的 HTML 元素，则使用 label 元素对其进行标记。 否则，如果组合框元素具有可见标签，则将 aria-labelledby 设置为引用标签元素的值。 否则，组合框元素的标签由 aria-label 提供。
• 组合框元素的 aria-autocomplete 属性设置为与其自动补全行为对应的值：
  • none：显示弹出窗口时，无论组合框中键入的字符如何变化，其包含的建议值都是相同的。
  • list：当触发展开弹出窗口时，它将显示建议值。如果组合框可编辑，则值完整或逻辑对应于组合框中键入的字符。
  • both：当触发展开弹出窗口时，它呈现与组合框中键入的字符完整或逻辑对应的建议值。 此外，所选建议中尚未由用户键入的部分（称为自动补全的文本）在组合框中的输入光标之后内联显示。 内联自动补全的文本在视觉上突出显示并具有选定状态。

示例

• 模态对话框示例：演示具有较少和较多内容的多层模式对话框。
• 日期选择器对话框示例：演示一个包含选择日期的日历网格的对话框。

键盘交互

在以下的描述中，术语 可获取焦点的元素（tabbable element）是指 tabindex 值大于等于 0 的元素。注意，强烈不建议使用大于 0 的值。

• 对话框打开时，焦点移动到对话框内的元素。请参阅下面“说明”模块中关于初始焦点处理的说明。
• Tab：
  • 将焦点移到对话框内的下一个可聚焦元素。
  • 如果焦点在最后一个可聚焦元素上，则将焦点移动到对话框内的第一个可聚焦元素。
• Shift + Tab：
  • 将焦点移到对话框内的上一个可聚焦元素。
  • 如果焦点在第一个可聚焦元素上，则将焦点移动到对话框内的最后一个可聚焦元素。
• Escape：关闭对话框。

WAI-ARIA 角色、状态和属性

• 对话框容器元素具有 dialog 角色。
• 操作对话框所需的所有元素都是具有角色 dialog 的元素的后代。
• 对话框容器元素的 aria-modal 属性设置为 true。
• 对话框还包括以下其中一种情况：
  • 给 aria-labelledby 属性设置的值，来关联对话框的标题。
  • 标签由 aria-label 属性指定的标签。
• （可选）在具有对话框角色的元素上设置 aria-describedby 属性，以指示拥有 dialog 角色的元素中，哪个元素或哪些元素包含描述对话框的主要目的或消息的内容。指定描述性元素使屏幕阅读器能够在对话框打开时识别描述以及对话框标题和最初聚焦的元素，这通常仅在描述性内容简单且无需结构信息即可轻松理解时才有用。如果对话内容包含语义结构（例如列表、表格或多个段落）需要被感知以便易于理解内容，即如果内容做为一个不间断的字符串难以理解时，则建议省略指定 aria-describedby。

示例

• 展开折叠（显示/隐藏）图像描述
• 展开折叠（显示/隐藏）常见问题的答案
• 展开折叠（显示/隐藏）导航菜单
• 展开折叠（显示/隐藏）带有顶级链接的导航菜单

键盘交互

展开折叠按钮获取焦点时：

• Enter：激活展开折叠按钮，并切换由其控制显隐内容区域的可见性。
• Space：激活展开折叠按钮，并切换由其控制显隐内容区域的可见性。

WAI-ARIA 角色、状态和属性

• 展开折叠按钮元素具有 button 角色。
• 内容可见时，具有 button 角色的元素将 aria-expanded 属性置为 true。 内容隐藏时，则置为 false。
• （可选）具有 button 角色元素的 aria-controls 属性的值引用一个包含所有显示或隐藏内容的元素。

示例

Feed 模式的示例实现

键盘交互

Feed 模式不是桌面 GUI widget，因此 feed 角色没有使用任何公认的键盘交互约定。 建议支持以下或类似接口。

当焦点在 Feed 内部时：

• Page Down：将焦点移至下一个 article。
• Page Up：将焦点移至上一个 article。
• Control + End：将焦点移动到 Feed 之后的第一个可聚焦元素。
• Control + Home：将焦点移动到 Feed 之前的第一个可聚焦元素。

WAI-ARIA 角色、状态和属性

• 包含 Feed article 集合的元素具有 feed 角色。
• 如果 Feed 具有可见标签，则 feed 元素的 aria-labelledby 属性引用包含标题的元素。 否则，feed 元素使用 aria-label 属性声明标签。
• Feed 的所有内容单元都包含在具有 article 角色的元素中。 Feed 中的所有内容都包含在 article 元素中。
• 每个 article 元素都有 aria-labelledby 属性，指向 article 内部可以被用作唯一标识的元素。
• aria-describedby 属性是可选的，但强烈建议每个 article 元素都声明该属性，并通过引用 article 内的一个或多个元素作为 article 的主要内容。
• 每个 article 元素具有 aria-posinset 属性，该属性值表示其在 Feed 中的位置。
• 每个 article 元素将 aria-setsize 属性设置为表示已加载的 article 总数或 Feed 中 article 的总数，这主要取决于哪个值对用户更有帮助。如果 Feed 中的总数不确定，可将 aria-setsize 属性的值设为 -1。
• 当从 feed 中添加或删除 article 元素，并且需要进行多次 DOM 操作时，在更新操作期间，需要将 feed 的 aria-busy 属性设置为 true。请注意，请务必在完成更新操作后将 aria-busy 置为 false，否则更新操作可能对某些辅助技术用户不可见。

示例

• 布局网格示例：这是三个用于布局 widget 的网格示例实现，包括导航链接的集合、消息收件人列表和一组搜索结果。
• 数据网格示例：网格的三个示例实现，包括与呈现表格信息相关的功能，如内容编辑、排序和列隐藏。
• 高级数据网格示例：这个网格示例的行为和功能类似于典型的电子表格，包括选择单元格和行。

呈现表格信息的数据网格

grid 可用于显示具有列标题、行标题或两者兼有的表格信息。如果表格信息是可编辑或可互动的，grid 模式就特别有用。例如，当数据元素是指向更多信息的链接时，与其将它们呈现在一个静态的表格里并将链接包含在 tab sequence 中，不如实现 grid 模式，为用户提供对网格内容直观、高效的键盘导航，以及更短的页面 tab sequence。grid 还可以提供其他功能，如单元格内容编辑、选择、剪切、复制和粘贴。

在网格中，每一个单元格都包含一个可聚焦的元素，不管单元格的内容是否可编辑或可交互，他们本身就是可聚焦的。但有一个例外：如果列或行的标题单元格不提供排序或过滤等功能，则它们不需要可聚焦。支持所有单元格接收或包含键盘焦点一个重要原因是，当用户与网格交互时，屏幕阅读器通常会处于其应用阅读模式，而不是文档阅读模式。在应用模式下，屏幕阅读器用户只能听到可聚焦元素（focusable elements）和用以标记可聚焦元素的内容（content that labels focusable elements）。所以，屏幕阅读器用户可能会无意中忽略网格中包含的那些不可聚焦的，或不是用来标记列或行的元素。

用于分组 widget 的布局网格

grid 模式可以用来分组一组交互式元素，如链接、按钮或多选框。由于整个网格中只有一个元素包含在 tab sequence 中，用网格分组可以极大减少页面上的 tab 步骤。如果在列表滚动浏览时，（列表）能从一个大的数据集中动态地加载更多的元素，比如购物网站上连续的建议产品列表，这就特别有价值。如果像这样的列表中的元素都在 tab sequence 中，键盘用户实际上会被困于列表中。如果组中的任何元素还具有在悬停时出现的相关元素，那么 grid 模式对于提供对用户界面的这些上下文元素的键盘访问也很有用。

与用于展示数据的网格不同，用于布局的 grid 不一定有标记为行或列的标题单元格，可能只包含单行或单列。即使它包含多行和多列，它也可能呈现为一个单一的、逻辑上同质化的元素集合。例如，消息的收件人列表可以是一个网格，每个单元格都包含一个代表收件人的链接。网格最初可能只有一行，但随着收件人的增加，会变成多行。在这种情况下，网格导航键也可以换行，这样用户就可以通过按 Right Arrow 或 Down Arrow 从头到尾阅读列表。虽然这种类型的焦点移动环绕（focus movement wrapping）在布局网格中非常有用，但如果用在数据网格中就会让人觉得迷惑，特别是对辅助技术使用者而言。

因为方向键是用来在 grid 内移动焦点的，如果 grid 所包含的组件不需要方向键来操作，那么网格的构建和使用都会更容易。如果网络单元格包含像列表框这样的元素，就需要一个额外的按键命令来聚焦和激活列表框，以及一个恢复网格导航功能的命令。支持这一需求的方法在在单元格内部编辑和导航这一节中描述。

键盘交互 - 设置焦点和在单元格内导航

本节介绍了数据网格和布局网格模式所共有的键盘交互设计的两个重要方面：

1. 在响应网格导航键事件时，选择单元格或单元格内的元素来接收焦点。
2. 启用网格导航键，用于与单元格内的元素交互。

WAI-ARIA 角色、状态和属性

• 网格容器有 grid 角色。
• 每个行容器都有 row 角色，它是 grid 元素或 rowgroup 角色元素的 DOM 子元素，或由其拥有。
• 每个单元格都是 row 元素的 DOM 子元素，或由其拥有，并具有以下角色之一：
  • 如果单元格包含列的标题或标题信息，则为 columnheader。
  • 如果单元格包含行的标题或标题信息，则为 rowheader。
  • 如果单元格不包含列或行的标题信息，则为 gridcell。
• 如果用户界面中有一个元素作为网格的标签，则在网格元素上设置 aria-labelledby，其值指向该标签元素。否则，通过 aria-label 为网格元素指定一个标签。
• 如果网格具有标题或描述，则在网格元素上设置 aria-describedby，其值指向包含描述的元素。
• 如果网格提供排序功能，则按照网格和表格属性所述，需要在已排序列或行的标题单元格元素上，为 aria-sort 属性设置为一个适当的值。
• 如果网格支持选择，当选中某个单元格或某行时，被选中的元素的 aria-selected 设置为 true。如果网格支持列选择，并且有一列被选中，那么列中所有单元格的 aria-selected 都设置为 true。
• 如果网格提供内容编辑功能，并且包含了在某些条件下可能禁用编辑功能的单元格，那么在禁用编辑的单元格上将 aria-readonly 设置为 true。如果禁用所有单元格的编辑功能，那么可以在网格元素上将 aria-readonly 设置为 true。不提供编辑功能的网格，其任何元素上都不设置 aria-readonly 属性。
• 如果存在某些行或列在 DOM 中隐藏或不存在的情况，例如，滚动时动态加载数据，或者网格提供隐藏行或列的功能，那么按照网格和表格属性所述，应用以下属性。
  • 分别设置 aria-colcount 或 aria-rowcount 为列或行的总数。
  • 分别设置 aria-colindex 或 aria-rowindex 为单元格在列或行中的位置。
• 如果网格包含跨越多行或多列的单元格，并且如果 grid 角色未应用于 HTML table 元素，那么按照网格和表格属性所述，应该应用 aria-rowspan 或 aria-colspan 属性。

示例

链接示例：由 HTML 的 span 和 img 标签构成的链接 widget。

键盘交互

• Enter：执行该链接并将焦点移至链接目标。
• Shift + F10（可选）：打开链接的上下文菜单。

WAI-ARIA 角色，状态和属性

包含链接文本或图形的元素具有 link 角色。

示例

• 可滚动列表框示例：滚动以显示更多选项的单选列表框，类似于 HTML 的 select 元素中的 size 属性大于1的情况。
• 具有可排序选项的列表框示例：这个示例是单选列表框和多选列表框的组合，附带有可以添加、移动和删除选项的工具条。
• 带有分组选项的列表框示例：具有分组选项的单选列表框，类似于有 optgroup 子项的 HTML select 元素的情况。

键盘交互

对于垂直向的列表框：

• 单选列表框获取焦点：
  • 如果在列表框获取焦点之前没有选中任何选项，则将焦点置于第一个选项上。（可选）自动选中第一个选项。
  • 如果在列表框获取焦点之前选中了一个选项，则将焦点置于所选的选项上。
• 多选列表框获取焦点：
  • 如果在列表框获取焦点之前没有选中任何选项，则将焦点置于第一个选项上，选中状态不自动改变。
  • 如果在列表框获取焦点之前已选中一个或多个选项，则将焦点置于列表中第一个选中的选项上。
• Down Arrow：将焦点移到下一个选项。（可选）在单选列表框中，选择也可以随焦点移动。
• Up Arrow：将焦点移至前一个选项。（可选）在单选列表框中，选择也可以随焦点移动。
• Home（可选）：将焦点移至第一个选项。（可选）在单选列表框中，选择也可以随焦点移动。对于有五个以上选项的列表，强烈建议支持这个键。
• End（可选）：将焦点移至最后一个选项。（可选）在单选列表框中，选择也可以随焦点移动。对于有五个以上选项的列表，强烈建议支持这个键。
• 推荐所有列表框都支持 Type-ahead，尤其是那些超过七个选项的列表框：
  • 键入一个字符：焦点移动到下一个名称以键入的字符开头的项目。
  • 快速连续地输入多个字符：焦点移动到下一个名称以键入的字符串开头的项目。
• 多选：作者可以实现两种交互模式中的任何一种来支持多重选择：一种是不要求用户在浏览列表时按住修饰键（如 Shift 或 Control）的推荐模式，另一种是要求在浏览时按住修饰键的替代模式，以避免丢失选中状态。
  • 推荐选择模式——无须在移动焦点时按住修饰键：
    • Space：切换焦点选项的选择状态。
    • Shift + Down Arrow（可选）：将焦点移动到下一个选中项，并且切换选项的选中状态。
    • Shift + Up Arrow（可选）：将焦点移到上一个选中项，并且切换选项的选中状态。
    • Shift + Space（可选）：选择从最近选中的选项到焦点选项的连续选项。
    • Control + Shift + Home（可选）：选择从焦点选项到第一个选项的所有选项，（可选）将焦点移到第一个选项上。
    • Control + Shift + End（可选）：选择从焦点选项到最后一个选项的所有选项，（可选）将焦点移到最后一个选项。
    • Control + A（可选）：选择列表中的所有选项。（可选）如果选中了所有选项，它也可能取消选择所有选项。
  • 替代选择模式——在不按住 Shift 或 Control 修饰键的情况下移动焦点，会取消选中除了焦点节点以外所有已选中的选项：
    • Shift + Down Arrow：将焦点移到下一个选项并切换选项的选择状态。
    • Shift + Up Arrow：将焦点移到上一个选项并切换选项的选择状态。
    • Control + Down Arrow：将焦点移到下一个选项但不改变选项的选择状态。
    • Control + Up Arrow：将焦点移到上一个选项但不改变选项的选择状态。
    • Control + Space：改变焦点选项的选择状态。
    • Shift + Space（可选）：选择从最近选中的选项到焦点选项的连续选项。
    • Control + Shift + Home（可选）：选择从焦点选项到第一个选项的所有的选项。
    • Control + Shift + End（可选）：选择从焦点选项到最后一个选项的所有选项。
    • Control + A（可选）：选择列表中的所有选项。（可选）如果选中了所有选项，它也可能取消选择所有选项。

WAI-ARIA 角色、状态和属性

• 包含或拥有所有列表框选项的元素具有 listbox 角色。
• 列表框中的每个选项都具有 option 角色，并且选项由以下其中一种元素包含或拥有：
  • 具有 listbox 角色的元素。
  • 具有 group 角色的元素，其包含在具有 listbox 角色的元素中或由其拥有。
• 包含在一个 group 中的选项称为分组选项（grouped options），形成所谓的选项组（option group）。如果一个列表框包含分组选项，那么：
  • 所有选项组至少包含一个选项。
  • 每个选项组都有一个通过 aria-label 或 aria-labelledby 提供的可访问名称。
• 如果具有 listbox 角色的元素不是另一个 widget 的一部分，比如组合框，那么有一个由 aria-labelledby 引用的可见标签，或由 aria-label 属性指定的值。
• 如果列表框支持选择多个选项，具有 listbox 角色元素的 aria-multiselectable 属性置为 true。否则，aria-multiselectable 设置为 false，或隐含默认值为 false。
• 每一个可选择选项的选择状态都用 aria-selected 或 aria-checked 表示：
  • 如果选择状态用 aria-selected 表示，则不为任何选项指定 aria-checked。或者，如果选择状态用 aria-checked 表示，则不为任何选项指定 aria-selected。关于具体应该使用哪个属性，以及在同一个列表框中可能允许同时使用两种属性的不寻常条件的细节，请参见下面的“说明”。
  • 如果选中任何选项，每个被选中的选项都有 aria-selected 或 aria-checked 设置为 true。如果具有 listbox 角色的 aria-multiselectable 不为 true，则每次只能选择一个选项。
  • 所有可选择但未被选中的选项，其 aria-selected 或 aria-checked 设置为 false。
  • 请注意，除了在选择跟随焦点的列表框中，选中状态与焦点是不同的。更多细节请查阅关于聚焦和选中之间差异的描述，以及决定何时让选择自动跟随焦点。
• 如果由于用户滚动时发生动态加载，DOM 中未能展示可选项的完整集合，需要为每个选项设置 aria-setsize 和 aria-posinset 属性。
• 如果选项是水平排列的，那么具有 listbox 角色元素的 aria-orientation 设置为 horizontal。列表框的 aria-orientation 的默认值是 vertical。

示例

• 导航菜单栏示例：演示一个提供站点导航功能的菜单栏。
• 编辑器菜单栏示例：演示一个在子菜单中包含了单选菜单项和多选菜单项的菜单栏，这个菜单栏提供了一系列对文本框调整文字格式的命令。

键盘交互

以下为描述键盘行为时的假设：

1. 一个横向的 menubar 元素包含多个 menuitem，menuitemradio，或 menuitemcheckbox 元素。
2. 有些 menubar 中的 menuitem 元素包含带有垂直排列菜单项的子菜单。
3. 有些在子菜单中的 menuitem 元素具有子子菜单，其中的菜单项也是垂直排列的。

在阅读以下描述时，还要记住：

1. 可能具有 menuitem，menuitemradio，或 menuitemcheckbox 角色的可聚焦元素，称为菜单项。
2. 如果行为仅应用于某些特定类型的菜单项，例如 menuitem 元素，则使用特定的角色名称。
3. 子菜单（submenu），也称为弹出菜单（popup menu），具有 menu 角色。
4. 除另有说明外，从菜单按钮打开的菜单与从菜单栏打开的菜单的行为相同。

• 当打开一个 menu，或当 menubar 获得焦点， 键盘焦点会置于第一项上。 如 § 6.6 组件内的键盘导航中所述，所有菜单项都是可聚焦的。
• Enter：
  • 当焦点在一个 menuitem 元素上时，若其包含子菜单则打开子菜单，并将焦点置于该子菜单中的第一项上。
  • 否则，激活当前菜单项并关闭菜单。
• Space：
  • （可选）：当焦点在 menuitemcheckbox 元素上，在不关闭菜单的情况下切换其选中/未选中状态。
  • （可选）：当焦点在 menuitemradio 元素上且未选中时，在不关闭菜单的情况下，选中当前 menuitemradio 元素并取消选中同组中任何已选中的 menuitemradio 元素。
  • （可选）：当焦点在 menuitem 元素上并包含一个子菜单时，则打开子菜单并将焦点置于该子菜单中的第一项上。
  • （可选）：当焦点在 menuitem 元素上且不包含子菜单时，则激活此菜单项并关闭菜单。
• Down Arrow：
  • 当焦点在 menubar 的 menuitem 上，并且 menuitem 有一个子菜单时，打开子菜单并将焦点置于该子菜单的第一项上。
  • 当焦点在 menu 元素上时，将焦点下移一项，（可选）当焦点在最后一项 menu 元素上时，将焦点跳转到到第一项。
• Up Arrow：
  • 当焦点在 menu 元素上时，将焦点上移一项，（可选）当焦点在第一项 menu 元素上时，将焦点跳转到到最后一项。
  • （可选）：当焦点在 menubar 的 menuitem 上，并且 menuitem 有一个子菜单时，打开子菜单并将焦点置于子菜单的最后一项上。
• Right Arrow：
  • 当焦点在 menubar 元素上时，将焦点移动到下一个菜单项，（可选）当焦点在最后一项 menu 元素上时，将焦点跳转到到第一项。
  • 当焦点在 menu 中和带有子菜单的 menuitem 元素上时，打开子菜单并将焦点放在其第一项上。
  • 当焦点在 menu 中和不包含子菜单的 menuitem 元素上时，执行以下3个操作：
    1. 关闭子菜单和任何父菜单。
    2. 将焦点移动到 menubar 元素中的下一个菜单项上。
    3. 如果此时焦点位于一个带有子菜单的 menuitem 元素上时， 可以在不移动焦点到子菜单的情况下，打开该 menuitem 元素的子菜单（推荐）， 或打开 menuitem 元素的子菜单，并将焦点置于该子菜单中的第一项。
    注意，如果 menubar 元素是不可见的，例如通过菜单按钮打开菜单这类场景，此时当焦点在没有子菜单的菜单项上时，Right Arrow 不会做任何事情。
• Left Arrow：
  • 当焦点在 menubar 元素上时，将焦点移动到上一个菜单项，（可选）当焦点在第一项 menu 元素上时，将焦点跳转到到最后一项。
  • 当焦点在 menu 元素中某个菜单项的子菜单上时，关闭此子菜单并将焦点聚焦到父 menuitem 元素上。
  • 当焦点在 menubar 元素中某个菜单项的子菜单上时，执行以下3个操作：
    1. 关闭子菜单。
    2. 将焦点移动到 menubar 元素中的上一个菜单项上。
    3. 如果此时焦点位于一个带有子菜单的 menuitem 元素上时， 可以在不移动焦点到子菜单的情况下，打开该 menuitem 元素的子菜单（推荐）， 或打开 menuitem 元素的子菜单，并将焦点置于该子菜单中的第一项。
• Home：如果不支持箭头键换行（arrow key wrapping），则将焦点移动到当前 menu 或 menubar 元素的第一个菜单项上。
• End：如果不支持箭头键换行，则将焦点移动到当前 menu 或 menubar 元素的最后一个菜单项上
• 与可打印字符对应的任意键（可选）：将焦点移至当前菜单中标签以该可打印字符开头的下一个菜单项上。
• Escape：关闭包含当前焦点的菜单，并将焦点聚焦到打开该菜单的元素或上下文上，例如某个菜单按钮或父 menuitem 元素。
• Tab：将焦点移动到 tab sequence 中的下一个元素上，若此元素不在 menubar 元素内，则关闭其 menu 元素和所有打开的父 menu 容器。
• Shift +Tab：将焦点移动到 tab sequence 中的前一个元素上，若此元素不在 menubar 元素内，则关闭其 menu 元素和所有打开的父 menu 容器。

WAI-ARIA 角色、状态和属性

• 菜单作为一系列菜单项的容器提供了很多选项。作为菜单的元素具有 menu 或 menubar 角色
• 菜单中包含的菜单项为菜单或菜单栏的子元素，并具有以下任一角色：
  • menuitem
  • menuitemcheckbox
  • menuitemradio
• 如果激活一个菜单项能够打开子菜单，则该菜单项被称为父菜单项（parent menuitem）。 子菜单的 menu 元素是：
  • 与其父 menuitem 元素一起被包含在同一个 menu 元素内。
  • 紧跟在其父 menuitem 之后的同级元素。
• 父菜单项的 aria-haspopup 设置为 menu 或者 true。
• 父菜单项的子菜单不可见时，将其 aria-expanded 属性置为 false，反之则置为 true。
• 以下任意方法能够让脚本切换菜单中菜单项的焦点，如 § 6.6 组件内的键盘导航所述：
  • 菜单元素的容器会设置 tabindex 属性为 -1 或 0，同时设置 aria-activedescendant 属性为当前聚焦菜单项的 ID
  • 菜单中的所有菜单项都会将 tabindex 属性设置为 -1，但在菜单栏中，第一个菜单项的 tabindex 属性会置为 0。
• 当 menuitemcheckbox 或 menuitemradio 元素被选中时，设置其 aria-checked 属性为 true。
• 当禁用菜单项时，设置其 aria-disabled 属性为 true。
• 通过在组间放置具有 separator 作用的元素，可以将菜单中的菜单项划分为多组。例如，当菜单包含一组 menuitemradio 元素时，应该使用此技术。
• 所有 separator 元素的 aria-orientation 属性应与分隔符自身方向保持一致。
• 如果菜单栏具有可见标签，则角色为 menubar 的元素可以设置 aria-labelledby 属性来引用这个标签。如果没有，则通过设置 aria-label 属性给当前菜单栏提供一个标签。
• 如果菜单栏呈垂直方向排列，则会将 aria-orientation 属性设置为 vertical。菜单栏的 aria-orientation 属性的默认值为 horizontal。
• menu 角色元素声明以下任一属性：
  • 由 aria-labelledby 属性用于引用控制其显示的菜单项或按钮。
  • 由 aria-label 属性提供标签。
• 如果菜单呈水平方向排列，则会将 aria-orientation 属性设置为 horizontal。菜单的 aria-orientation 属性的默认值为 vertical。

示例

• 导航菜单按钮：一个由 HTML a 标签构成的菜单按钮，通过其打开的菜单，菜单项具有链接行为。
• 在操作菜单按钮中使用 element.focus() 的示例：由 HTML button 标签制作的菜单按钮，其打开的菜单带有一系列操作或命令，可以通过 element.focus() 来管理菜单中的焦点。
• 在操作菜单按钮中使用 aria-activedescendant 的示例：通过操作菜单按钮打开带有一系列操作或命令的菜单，可以配置 aria-activedescendant 属性来管理其中的焦点。

键盘交互

• 当焦点在按钮上：
  • Enter：打开菜单并将焦点置于第一个菜单项上。
  • Space：打开菜单并将焦点置于第一个菜单项上。
  • （可选）Down Arrow：打开菜单并将焦点移动到第一个菜单项。
  • （可选）Up Arrow：打开菜单将并焦点移动到最后一个菜单项。
• 菜单打开后所需支持的键盘行为在 § 3.15 菜单或菜单栏中描述。

WAI-ARIA 角色、状态和属性

• 打开菜单的元素具有 button 角色。
• 具有 button 角色的元素将 aria-haspopup 属性设置为 menu 或者 true。
• 当菜单显示时，具有 button 角色的元素将 aria-expanded 属性设置为 true。 当菜单被隐藏时，建议不指定 aria-expanded 属性。 如果需要在菜单隐藏时设置 aria-expanded 属性，则置为 false。
• 一个能被菜单按钮激活，并且包含菜单项的元素，具有 menu 角色。
• （可选）为具有 button 角色的元素设置 aria-controls 属性，该属性可以关联一个具有 menu 角色的元素。
• 菜单元素所需的其他角色、状态和属性请参考 § 3.15 菜单或菜单栏。

示例

仪表示例

键盘交互

不适用。

WAI-ARIA 角色、状态和属性

• 构成仪表的元素具有 meter 角色。
• 设置仪表组件的 aria-valuenow 属性为一个十进制值，用于表示仪表的当前值，其值介于 aria-valuemin 和 aria-valuemax 属性值之间。
• 设置仪表组件的 aria-valuemin 属性为一个十进制值，其值小于 aria-valuemax 属性的值。
• 设置仪表组件的 aria-valuemax 属性为一个十进制值，其值大于 aria-valuemin 属性的值。
• 辅助设备通常会将 aria-valuenow 属性的值以百分比形式显示。 当用户难以理解仪表上百分比形式的值时，可通过设置 aria-valuetext 属性为一个字符串，使仪表的值更容易理解。例如可以设置 aria-valuetext="剩余50%（预计还能使用6小时）" 来表达电池电量的值。
• 如果仪表组件具有一个可见的标签，则角色为 meter 的元素可以设置 aria-labelledby 属性来引用这个标签。如果没有，则通过设置 aria-label 属性给当前元素加上一个标签。

示例

• 使用 Roving tabindex 实现单选组的示例。
• 使用 aria-activedescendant 实现单选组的示例。
• 评分单选组示例：为五星评分量表标准提供输入的单选组示例。

键盘交互

WAI-ARIA 角色、状态和属性

• 单选按钮包含在一个具有 radiogroup 角色的元素中或为其所有。
• 每个单选按钮的都具有 radio 角色。
• 如果一个单选按钮被选中，该 radio 元素的 aria-checked 设置为 true。如果它没有被选中，则 aria-checked 设置为 false。
• 每个 radio 元素都由其内容标记，由可见标签 aria-labelledby 引用，或者有一个用 aria-label 指定的标签。
• radiogroup 元素具有由 aria-labelledby 引用的可见标签，或者用 aria-label 指定的标签。
• 如果存在提供与单选组或每个单选按钮相关的额外信息的元素，这些元素被 radiogroup 元素或 radio 元素的 aria-describedby 属性引用。

示例

• 颜色查看器滑块示例：基本的水平滑块，为选色器设置数值。
• 垂直温度计滑块示例：展示了使用 aria-orientation 指定垂直方向，使用 aria-valuetext 传达温度输入的计量单位。
• 评分滑块示例：水平滑块，展示了使用 aria-valuetext 来传达五星评分量表输入的当前值和最大值。
• 媒体播放进度滑块示例：水平滑块，展示了使用 aria-valuetext 来传达媒体播放器中时间的当前值和最大值，通过将总秒数转换为分和秒，使辅助技术用户容易理解这些值。

键盘交互

• Right Arrow：将滑块的值增加一步。
• Up Arrow：将滑块的值增加一步。
• Left Arrow：将滑块的值减少一步。
• Down Arrow：将滑块的值减少一步。
• Home：将滑块设置为其取值范围内允许的第一个值。
• End：将滑块设置为其取值范围内允许的最后一个值。
• Page Up（可选）：增加滑块的值，增加的量要大于 Up Arrow 所做的变化。
• Page Down（可选）：减少滑块的值，减少的量要大于 Down Arrow 所做的变化。

WAI-ARIA 角色、状态和属性

• 可聚焦滑块控件元素具有 slider 角色。
• 滑块元素的 aria-valuenow 属性设置为滑块当前值的十进制值。
• 滑块元素的 aria-valuemin 属性设置为滑块所允许的最小十进制值。
• 滑块元素的 aria-valuemax 属性设置为滑块所允许的最大十进制值。
• 如果 aria-valuenow 的值对用户不够友好，例如，用数字来表示星期几，可以将 aria-valuetext 属性置为使滑块值易于理解的字符串，例如，“星期一”。
• 如果滑块存在可见标签，则通过 aria-labelledby 属性引用该标签。否则，则由 aria-label 属性提供标签。
• 垂直方向滑块的 aria-orientation 设置为 vertical。滑块的 aria-orientation 的默认值是 horizontal。

示例

多拇指滑块示例：演示用于设置酒店预订价格范围的双拇指控件滑块组。

键盘交互

• 每个拇指控件都在页面的 tab sequence 中，并且具有与单拇指控件滑块相同的键盘交互。
• 无论滑块内的数值和在滑块中的视觉位置如何变化，tab 顺序（order）都保持不变。例如，如果更改拇指控件的值，使其移动并经过其他拇指控件，tab 顺序不变。

WAI-ARIA 角色、状态和属性

• 可聚焦滑块控件元素都具有 slider 角色。
• 滑块元素的 aria-valuenow 属性设置为滑块当前值的十进制值。
• 滑块元素的 aria-valuemin 属性设置为滑块所允许的最小十进制值。
• 滑块元素的 aria-valuemax 属性设置为滑块所允许的最大十进制值。
• 当另一滑块的范围（例如，最小值和/或最大值）取决于滑块的当前值时，当该值改变时，滑块的 aria-valuemin 或 aria-valuemax 的值也会跟随更新。
• 如果 aria-valuenow 的值对用户不够友好，例如，用数字来表示星期几， 可以将 aria-value 属性置为使滑块值易于理解的字符串，例如，“星期一”。
• 如果滑块存在可见标签，则通过 aria-labelledby 属性引用该标签。否则，则由 aria-label 属性提供标签。
• 垂直方向滑块的 aria-orientation 属性值为 vertical。 滑块的 aria-orientation 属性的默认值是 horizontal。

示例

日期选择器调节按钮示例：由三个调节按钮组成的日期选择器，分别代表日、月和年。

键盘交互

• Up Arrow：增加值。
• Down Arrow：减少值。
• Home：如果调节按钮具有最小值，则将值设置为最小值。
• End：如果调节按钮具有最大值，则将值设置为最大值。
• Page Up （可选）：按比 Up Arrow 更大的步长增加值。
• Page Down（可选）：按比 Down Arrow 更大的步长减小值。
• 如果调节按钮文本字段允许直接编辑值，则支持以下键：
  • 适用于设备平台的标准单行文本编辑键（参见下面的“说明”）。
  • 可打印字符：在文本框中键入字符。请注意，许多实现只允许某些字符作为值的一部分，并阻止输入任何其他字符。例如，小时和分钟微调器只允许从 0 到 59 的整数值、冒号“：”以及字母“AM”和“PM”。输入任何其他字符都不会更改文本字段的内容或调节按钮的值。

WAI-ARIA 角色、状态和属性

• 作为调节按钮的可聚焦元素具有 spinbutton 角色。 它通常是支持文本输入的元素。
• 调节按钮的 aria-valuenow 属性设置为一个十进制值，表示调节按钮的当前值。
• 调节按钮的 aria-valuemin 属性设置为一个十进制值，如果它具有已知的最小值，则表示调节按钮的最小允许值。
• 调节按钮的 aria-valuemax 属性设置为一个十进制值，如果它具有已知的最大值，则表示调节按钮的最大允许值。
• 如果 aria-valuenow 的值不便于用户理解，例如，用数字来表示星期几，则可以将 aria-valuetext 属性设置为使调节按钮的值易于理解的字符串，如“星期一”。
• 有一个调节按钮
• 如果值超出了允许范围，可将调节按钮元素的 aria-invalid 设置为 true。 请注意，大多数实现会阻止输入无效值，但在某些情况下，阻止所有无效输入可能不切实际。

示例

• 开关示例：基于 div 元素实现的开关，用于打开和关闭通知首选项。
• 使用 HTML 按钮的开关示例：一组基于 HTML button 元素实现的 2 个开关，用于打开和关闭灯光。
• 使用 HTML 多选框输入的开关示例：一组基于 HTML input[type="checkbox"] 元素实现的 2 个开关，用于打开和关闭辅助功能首选项。

键盘交互

• Space：当焦点在开关上时，改变开关的状态。
• Enter（可选）：当焦点在开关上时，改变开关的状态。

WAI-ARIA 角色、状态和属性

• 开关具有 switch 角色。
• 开关具有由以下任一选项提供的可访问标签：
  • 具有 switch 角色的元素中包含的可见文本内容。
  • 在具有 switch 角色的元素上设置 aria-labelledby，其值引用可见标签的元素的 ID。
  • 在具有 switch 角色的元素上设置 aria-label。
• 当开关状态为 on 时，aria-checked 设置为 true。
• 当开关状态为 off 时，aria-checked 设置为 false。
• 如果是 HTML input[type="checkbox"] 开关元素，则使用 HTML 的 checked 属性而非 aria-checked 属性。
• 如果一组开关显示为一个带有可见标签的逻辑组，则：
  • 这组开关包含在具有 group 角色的元素中，其中元素的 aria-labelledby 属性设置为包含组标签的元素的 ID。
  • 该集合包含在 HTML fieldset 元素中，而集合的标签包含在 HTML legend 元素中。
• 如果开关或开关组在表现上包含与之相关的附加描述性静态文本，则将开关或开关组的 aria-descriptionby 属性设置为包含描述元素的 ID。

示例

• 表格示例：基于 HTML 的 div 和 span 元素实现的 ARIA 表格。
• 可排序表格示例：基本 HTML 表格，说明了在可排序列的标题中实现 aria-sort 。

键盘交互

不适用。

WAI-ARIA 角色、状态和属性

• 表格容器具有 table 角色。
• 每个行容器具有 row 角色，并且是 table 元素或具有 rowgroup 角色元素的 DOM 子节点被其拥有。
• 每个单元格都是 row 元素的 DOM 子节点或被 row 元素拥有，并具有以下角色之一：
  • 如果单元格包含列的标题或标题信息，则为 columnheader。
  • 如果单元格包含行的标题或标题信息，则为 rowheader。
  • 如果单元格不包含列或行标题信息，则为 cell。
• 如果用户界面中有一个元素用作表格的标签，则在表格元素上设置 aria-labelledby，其值引用对应的标签元素。 否则，使用 aria-label 为表格元素指定标签。
• 如果表格有标题或描述，则在表格元素上设置 aria-descriptionby，其值引用对应的包含描述的元素。
• 如果表格包含可排序的列或行，则按照网格和表格属性一节所述，将可排序列或行的标题单元格元素上的 aria-sort 设置为适当值。
• 如果存在某些行或列在 DOM 中隐藏或不存在的条件，例如，页面上有用于隐藏行或列的 widget，则按照网格和表格属性一节所述，应用以下属性：
  • aria-colcount 或 aria-rowcount 分别设置为列或行的总数。
  • aria-colindex 或 aria-rowindex 分别设置为行或列中单元格的位置。
• 如果表包含跨多行或多列的单元格，则按照网格和表格属性中所述，应用 aria-rowspan 或 aria-colspan 属性。

示例

• 自动激活的选项卡：选项卡 widget，获取焦点时选项卡自动激活，同时展示其关联面板。
• 手动激活的选项卡：选项卡 widget，用户通过按 Space 或 Enter 键激活选项卡并显示其面板。

键盘交互

对于选项卡列表：

• Tab：
  • 当焦点移至选项卡列表时，将焦点置于激活的 tab 元素上。
  • 当选项卡列表包含焦点时，除非选项卡面板内包含有意义内容的第一个元素是可聚焦的，否则将焦点移至选项卡列表之外页面 tab sequence 中的下一个元素。
• 焦点在水平选项卡列表中的选项卡元素上时：
  • Left Arrow：将焦点移至前一个选项卡。如果焦点在第一个选项卡元素上，则将焦点移至最后一个选项卡。（可选）激活新的焦点选项卡（见下面的“说明”）。
  • Right Arrow：将焦点移至后一个选项卡。如果焦点在最后一个选项卡元素上，将焦点移至第一个选项卡。（可选）激活新的焦点选项卡（见下面的“说明”）。
• 焦点在水平或垂直方向的选项卡列表中的选项卡上时：
  • Space or Enter：如果选项卡在聚焦时没有被自动激活，则激活该选项卡。
  • Home（可选）：将焦点移至第一个选项卡。也可以激活新的焦点选项卡（见下面的“说明”）。
  • End（可选）：将焦点移至最后一个选项卡。也可以激活新的焦点选项卡（见下面的“说明”）。
  • Shift + F10：如果选项卡有一个联动的弹出式菜单（popup menu），则打开该菜单。
  • Delete（可选）：如果允许删除，则删除（关闭）当前选项卡元素及其关联的选项卡面板，将焦点设置在被删除的选项卡之后的选项卡上，（可选）激活新的焦点选项卡。如果被删除的选项卡后面没有选项卡，例如，被删除的选项卡是一个从左到右的水平选项卡列表中最右边的选项卡，则将焦点设置在被删除的选项卡前面，（可选）激活该选项卡。如果应用程序允许删除所有的选项卡，并且用户删除了选项卡列表中剩下的最后一个选项卡，应用程序会将焦点移至另一个提供逻辑工作流的元素上。作为 Delete 的替代方案，或者除了支持 Delete 之外，删除功能可以在上下文菜单中使用。

WAI-ARIA 角色、状态和属性

• 作为选项卡容器的元素具有 tablist 角色。
• 每个作为选项卡的元素都具有 tab 角色，并且包含在具有 tablist 角色的元素中。
• 每个包含 tab （关联的）内容面板的元素都具有 tabpanel 角色。
• 如果选项卡列表有一个可见的标签，那么 tablist 角色元素的 aria-labelledby 设置为指向标签元素的值。否则，tablist 元素通过 aria-label 来设置标签。
• 每个具有 tab 角色的元素都有指向其关联 tabpanel 元素的 aria-controls 属性。
• 已激活选项卡元素上的 aria-selected 状态置为 true，所有其他选项卡元素上则将其置为 false。
• 每个具有 tabpanel 角色的元素都有指向其关联 tab 元素的 aria-labelledby 属性。
• 如果 tab 元素有弹出式菜单，其 aria-haspopup 属性设置为 menu 或 true。
• 如果 tablist 元素是垂直方向呈现的，其 aria-orientation 属性设置为 vertical。tablist 元素的 aria-orientation 属性默认值是 horizontal。

示例

工具栏示例：通过 roving tabindex 来管理焦点的工具栏，并包含以下几种类型的控件，包括切换按钮、单选按钮、一个菜单按钮、一个调节按钮（spin button）、一个多选框和一个链接。

键盘交互

• Tab 和 Shift + Tab：将焦点移入和移出工具栏。当焦点进入工具栏时：
  • 如果焦点第一次进入工具栏，焦点设置在第一个未被禁用的控件上。
  • 如果工具栏以前有被聚焦过，则焦点可以设置在上一次拥有焦点的控件上。或者设置在第一个未被禁用的控件上。
• 对于水平工具栏（默认）：
  • Left Arrow：将焦点移到前一个控件。（可选）焦点可以从第一个元素跳转到最后一个元素。
  • Right Arrow：将焦点移到后一个控件。（可选）焦点可以从最后一个元素跳转到第一个元素。
• Home（可选）：将焦点移至第一个元素。
• End（可选）：将焦点移至最后一个元素。

WAI-ARIA 角色、状态和属性

• 作为工具栏容器的元素具有 toolbar 角色。
• 如果工具栏有一个可见的标签，则由工具栏元素上的 aria-labelledby 属性所引用。否则，工具栏元素由 aria-label 属性提供标签。
• 如果控件是垂直排列的，那么工具栏元素的 aria-orientation 设置为 vertical。默认情况下工具栏是水平排列的。

示例

文字提示的开发示例相关工作请看 issue 127。

键盘交互

Escape：关闭文字提示。

WAI-ARIA 角色、状态和属性

• 作为 Tooltip 容器的元素具有角色 tooltip。
• 触发 Tooltip 的元素使用 aria-describedby 索引文字提示元素。

示例

• 使用计算属性的文件目录树形视图示例：一个文件选择器树，展示了浏览器根据 DOM 结构自动计算 aria-level、aria-posinset 和 aria-setsize 属性。
• 使用声明的属性的文件目录树形视图示例：一个文件选择器树，演示了如何明确定义 aria-level、aria-posinset 和 aria-setsize 的值。
• 导航树形视图示例：该示例是一个支持一组网页导航的树形组件，并展示了浏览器根据 DOM 结构自动计算 aria-level、aria-posinset 和 aria-setsize 属性。

键盘交互

对于一个垂直方向的树形组件：

• 单选树获得焦点时：
  • 如果在树获得焦点之前没有选择任何节点，则将焦点置于第一个节点上。
  • 如果在树获得焦点之前选择了一个节点，则将焦点置于选中的节点上。
• 多选树获得焦点时：
  • 如果在树获得焦点之前没有选择任何节点，则将焦点置于第一个节点上。
  • 如果在树收到焦点之前已选中一个或多个节点，则将焦点置于第一个选中的节点上。
• Right arrow：
  • 焦点在闭节点上时，打开该节点，且焦点不移动。
  • 焦点在开节点上时，焦点移到第一个子节点上。
  • 焦点在端节点上时，不做任何事情。
• Left arrow：
  • 焦点在开节点上时，关闭该节点。
  • 焦点在子节点上，而这个子节点同时也是端节点或闭节点时，焦点移至其父节点。
  • 焦点在根节点上，而这个根节点同时也是端节点或闭节点时，不做任何事情。
• Down Arrow：将焦点移动到下一个可聚焦的节点，而无须打开或关闭节点。
• Up Arrow：将焦点移动到上一个可聚焦的节点，而无须打开或关闭节点。
• Home：将焦点移动到第一个可聚焦的节点，而无须打开或关闭节点。
• End：将焦点移动到最后一个可聚焦的节点，而无须打开或关闭节点。
• Enter：激活一个节点，即执行其默认动作。对于父节点，一个可能的默认动作是打开或关闭节点。在一个选项不跟随焦点（见下面的“说明”）的单选树中，默认的操作通常是选择焦点节点。
• 建议所有树结构支持 Type-ahead，特别是那些超过 7 个节点的树结构：
  • 键入一个字符：焦点移动到下一个名称以键入的字符开头的节点。
  • 快速连续地输入多个字符：焦点移动到下一个名称以键入的字符串开头的节点。
• *（可选的）：展开与当前节点同级的所有兄弟节点。
• 在多选树中选择：作者可以实现两种交互模式中的任何一种来支持多重选择：一种是不要求用户在浏览列表时按住修饰键（如 Shift 或 Control）的推荐模式，另一种是要求在浏览时按住修饰键的替代模式，以避免丢失选中状态。
  • 推荐选择模式——无须按下修饰键：
    • Space：切换焦点节点的选择状态。
    • Shift + Down Arrow（可选）：将焦点移动到下一个节点，并且切换其选择状态。
    • Shift + Up Arrow（可选）：将焦点移动到上一个节点，并且切换其选择状态。
    • Shift + Space（可选）：选择从最近选中的节点到焦点节点的连续节点。
    • Control + Shift + Home（可选）：选择从焦点节点到第一个节点的所有节点，（可选）将焦点移到第一个节点上。
    • Control + Shift + End（可选）：选择从焦点节点到最后一个节点的所有节点，（可选）将焦点移到最后一个节点。
    • Control + A（可选）：选择列表中的所有节点。（可选）如果所有节点是选中状态，它也可能取消选中所有节点。
  • 替代选择模式——在不按住 Shift 或 Control 修饰键的情况下移动焦点，会取消选中除了焦点节点以外所有已选中的节点：
    • Shift + Down Arrow：将焦点移到下一个节点并切换节点的选择状态。
    • Shift + Up Arrow：将焦点移到上一个节点并切换节点的选择状态。
    • Control + Down Arrow：将焦点移到下一个节点但不改变节点的选择状态。
    • Control + Up Arrow：将焦点移到上一个节点但不改变节点的选择状态。
    • Control + Space：改变焦点节点的选择状态。
    • Shift + Space（可选）：选择从最近选中的节点到焦点节点的连续节点。
    • Control + Shift + Home（可选）：选择从焦点节点到第一个节点的所有的节点。
    • Control + Shift + End（可选）：选择从焦点节点到最后一个节点的所有节点。
    • Control + A（可选）：选择列表中的所有节点。（可选）如果所有节点是选中状态，它也可能取消选中所有节点。

WAI-ARIA 角色、状态和属性

• 所有的树节点都包含在一个具有 tree 角色的元素中或为其所有。
• 每个树节点元素都有 treeitem 角色。
• 每个根节点都包含在具有 tree 角色的元素中，或者由 tree 元素上设置的 aria-owns 属性引用。
• 每个父节点都包含或拥有一个具有 group 角色的元素。
• 每个子节点都包含在一个具有 group 角色的元素中或为其所有，并且该元素包含在该子节点的父节点中或为其所有。
• 每个具有 treeitem 角色的父节点元素，节点关闭时 aria-expanded 属性置为 false，节点打开时置为 true。端节点没有 aria-expanded 属性，因为如果它们有这个属性，辅助技术会错误地将它们描述为父节点。
• 如果树支持选择多个的节点，则具有 tree 角色元素的 aria-multiselectable 属性设置为 true。否则，aria-multiselectable 属性置为 false，或者隐含默认值为 false。
• 每个可选择的节点的选择状态都用 aria-selected 或 aria-checked 表示：
  • 如果选择状态用 aria-selected 表示，则不为任何节点指定 aria-checked。或者，如果选择状态用 aria-checked 表示，则不为任何节点指定 aria-selected。关于具体应该使用哪个属性，以及在同一个树形组件中可能允许同时使用两种属性的不寻常条件的细节，请参见下面的“说明”。
  • 如果选中任何节点，每个已选中的节点都有 aria-selected 或 aria-checked 设置为 true。如果具有 tree 角色元素 aria-multiselectable 不为 true，则每次只能选择一个节点。
  • 所有可选择但未被选中的节点，其 aria-selected 或 aria-checked 置为 false。
  • 如果树中包含不可选择的节点，那么这些节点上无须设置 aria-selected、aria-checked 属性。
  • 注意，除了在选择状态跟随焦点的树形组件中，选中状态一般与焦点（在样式上）存在差异。更多的细节，请参阅关于聚焦和选中之间差异的描述，以及决定何时让选择自动跟随焦点。
• 具有 tree 角色的元素有一个由 aria-labelledby 引用的可见标签或为 aria-label 指定的值。
• 如果由于用户在树中移动焦点或滚动而发生动态加载，DOM 中未能展示可用节点的完整集合，则需要为每个节点指定 aria-level、aria-setsize 和 aria-posinset 属性。
• 如果 tree 元素是水平方向的，其 aria-orientation 设置为 horizontal。tree 元素的 aria-orientation 属性的默认值是 vertical。

示例

• E-mail 收件箱 treegrid 示例：用于导航 e-mail 收件箱的树形网格，演示了三种键盘导航模型——优先聚焦行、优先聚焦单元格和仅聚焦单元格。

键盘交互

以下按键通过在网格的行和单元格中移动焦点来提供 treegrid 导航。 当网格中的元素获得焦点时，例如用户用 Tab 将焦点移至网格后，实现 treegrid （模式）使这些按键命令可用。 将焦点移至网格中可能会聚焦第一个单元格或第一行。 焦点是在单元格还是行上取决于作者的偏好以及是否支持行焦点，因为某些 treegrid 可能不支持为行提供焦点。

• Enter：如果仅支持聚焦单元格（cell-only focus），并且焦点位于第一个具有 aria-expanded 属性的单元格上，则打开或关闭子行。否则，执行单元格的默认操作。
• Tab：如果包含焦点的行包含可聚焦元素（例如，输入栏、按钮、链接等），将焦点移至行中的下一个输入。如果焦点在行中的最后一个可聚焦元素上，则将焦点从 treegrid widget 移至下一个可聚焦元素。
• Right Arrow：
  • 如果焦点在折叠的行上，则展开该行。
  • 如果焦点在展开的行上或在没有子行的行上，则将焦点移至行中的第一个单元格。
  • 如果焦点在一行中最右边的单元格上，则焦点不移动。
  • 如果焦点在任何其他单元格上，则将焦点向右移动一个单元格。
• Left Arrow：
  • 如果焦点在展开的行上，则折叠该行。
  • 如果焦点在折叠的行上或没有子行的行上，则焦点不移动。
  • 如果焦点在行中的第一个单元格上，并且支持行焦点，则将焦点移至该行。
  • 如果焦点在行中的第一个单元格上，并且不支持行焦点，则焦点不移动。
  • 如果焦点在任何其他单元格上，则将焦点向左移动一个单元格。
• Down Arrow：
  • 如果焦点在行上，则将焦点向下移动一行。如果焦点在最后一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点向下移动一个单元格。如果焦点在列的最后一个单元格上，则焦点不移动。
• Up Arrow：
  • 如果焦点在行上，则将焦点向上移动一行。如果焦点位于第一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点向上移动一个单元格。如果焦点在列的第一个单元格上，则焦点不移动。
• Page Down：
  • 如果焦点在行上，将焦点向下移动到作者指定的行数，通常表现为当前可见行中处于底部位置的行（bottom row）滚动至成为顶部位置的可见行之一。如果焦点在最后一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点向下移动作者指定的单元格数量，通常表现为当前可见行中处于底部位置的行（bottom row）滚动至成为顶部位置的可见行之一。如果焦点在最后一行，则焦点不移动。
• Page Up：
  • 如果焦点在行上，则将焦点向上移动到作者指定的行数，通常表现为当前可见行中处于顶部位置的行（top row）滚动至成为底部位置的可见行之一。如果焦点在第一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点向上移动作者指定的单元格数量，通常表现为当前可见行中处于顶部位置的行（top row）滚动至成为底部位置的可见行之一。如果焦点在第一行，则焦点不移动。
• Home：
  • 如果焦点在行上，则将焦点移至第一行。如果焦点在第一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点移至行中的第一个单元格。如果焦点在行的第一个单元格上，则焦点不移动。
• End：
  • 如果焦点在行上，则将焦点移至最后一行。如果焦点在最后一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点移至行中的最后一个单元格。如果焦点在行的最后一个单元格上，则焦点不移动。
• Control + Home：
  • 如果焦点在行上，则将焦点移至第一行。如果焦点在第一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点移至列中的第一个单元格。如果焦点在第一行，则焦点不移动。
• Control + End：
  • 如果焦点在行上，则将焦点移至最后一行。如果焦点在最后一行，则焦点不移动。
  • 如果焦点在单元格上，则将焦点移至所在列的最后一个单元格上。如果焦点在最后一行上，则焦点不移动。

如果树形网格支持选择单元格、行或列，则以下按键通常用于这些功能。

• Control + Space：
  • 如果焦点在行上，则选择所有单元格。
  • 如果焦点在单元格上，则选择包含焦点的列。
• Shift + Space：
  • 如果焦点在行上，则选择该行。
  • 如果焦点在单元格上，则选择包含焦点的行。如果树形网格包含一列用于选择行的多选框，当焦点不在多选框上时，此组合键可以用作选中多选框的快捷方式。
• Control + A：选择所有单元格。
• Shift + Right Arrow：
  • 如果焦点在行上，则不更改选择。
  • 如果焦点在单元格上，则将选择范围向右扩展一个单元格。
• Shift + Left Arrow：
  • 如果焦点在行上，则不更改选择。
  • 如果焦点在单元格上，则将选择范围向左扩展一个单元格。
• Shift + Down Arrow：
  • 如果焦点在行上，则将选择范围扩展到下一行中的所有单元格。
  • 如果焦点在单元格上，则将选择范围向下扩展一个单元格。
• Shift + Up Arrow：
  • 如果焦点在行上，则将选择范围扩展到上一行中的所有单元格。
  • 如果焦点在单元格上，则将选择范围向上扩展一个单元格。

WAI-ARIA 角色、状态和属性

• 树形网格容器具有 treegrid 角色。
• 每个行容器都具有 row 角色，并且是 treegrid 元素或具有 rowgroup 角色元素的 DOM 子元素或由其拥有。
• 每个单元格都是 row 元素的 DOM 子元素或被其拥有，并且具有以下角色之一：
  • 如果单元格包含列的标题或标题信息，则为 columnheader。
  • 如果单元格包含行的标题或标题信息，则为 rowheader。
  • 如果单元格不包含列或行的标题信息，则为 gridcell。
• 一个可以展开或折叠以显示或隐藏一组子行的 row 是一个父行（parent row）。每个父行都在 row 元素或 row 中包含的单元格上设置了 aria-expanded 状态。未显示子行时 aria-expanded 属性设置为 false，显示子行时设置为 true。不控制子行显示的行没有 aria-expanded 属性，因为如果它们拥有这个属性，辅助技术将会错误地将其描述为父行。
• 如果树形网格支持选择多个行或单元格，则称为具有 treegrid 角色的多选树形网格，并且 aria-multiselectable 属性设置为 true。否则，则称为单选树形网格，并且 aria-multiselectable 属性设置为 false，或隐含默认值为 false。
• 如果树形网格是单选树形网格，则在所选行或单元格上设置 aria-selected 属性为 true，并且它不会出现在树形网格中的任何其他行或单元格上。
• 如果树形网格是多选树形网格：
  • 所有选中的行或单元格的 aria-selected 设置为 true。
  • 所有未选中的行和单元格的 aria-selected 设置为 false。
• 如果用户界面中有一个元素用作树形网格的标签，则在网格元素上设置 aria-labelledby，其值指向标签元素。否则，使用 aria-label 为网格元素指定标签。
• 如果树形网格有标题或描述，则在网格元素上设置 aria-describedby，其值指向包含描述的元素。
• 如果树形网格提供排序功能，则按照网格和表格属性所述，需要在已排序行或列的标题单元格元素上，为 aria-sort 属性设置为一个适当的值。
• 如果树形网格提供内容编辑功能，并且包含在某些条件下可能禁用编辑功能的单元格，则在禁用编辑的单元格上将 aria-readonly 属性设置为 true。 如果禁用所有单元格的编辑功能，与其在每个单元格上设置 aria-readonly 为 true，不如直接在树形网格元素上将 aria-readonly 设置为 true。 不提供单元格内容编辑功能的树形网格中任何元素都不设置 aria-readonly 属性。
• 如果存在某些行或列在 DOM 中隐藏或不存在的情况，例如，滚动时动态加载数据，或者网格提供隐藏行或列的功能，那么按照网格和表格属性所述，应用以下属性：
  • 分别设置 aria-colcount 或 aria-rowcount 为列或行的总数。
  • 分别设置 aria-colindex 或 aria-rowindex 为单元格在列或行中的位置。
• 如果树形网格包含跨越多行或多列的单元格，并且如果 treegrid 角色未应用于 HTML table 元素，那么按照网格和表格属性所述，应该应用 aria-rowspan 或 aria-colspan 属性。

示例

开发窗口拆分器 widget 示例的工作请参考 issue 130。

键盘交互

• Left Arrow：向左移动垂直拆分器。
• Right Arrow：向右移动垂直拆分器。
• Up Arrow：向上移动水平拆分器。
• Down Arrow：向下移动水平拆分器。
• Enter：如果主窗格未折叠，则折叠窗格。如果窗格已折叠，则将拆分器还原到其先前的位置。
• Home（可选）：将拆分器移动到为主窗格提供最小尺寸的位置。这可能会完全折叠主窗格。
• End（可选）：将拆分器移动到为主窗格提供最大尺寸的位置。这可能会完全折叠辅助窗格。
• F6（可选）：在窗格间循环切换。

WAI-ARIA 角色、状态和属性

• 用作可聚焦拆分器的元素具有 separator 角色。
• 具有 separator 角色元素的 aria-valuenow 属性被设置为一个十进制值，该值表示分隔器的当前位置。
• 具有 separator 角色元素的 aria-valuemin 属性被设置为一个十进制值，该值表示主窗格具有最小尺寸的位置。这通常是 0。
• 具有 separator 角色元素的 aria-valuemax 属性被设置为一个十进制值，该值表示主窗格具有最大尺寸的位置。这通常是 100。
• 如果主窗格具有可见标签，则它由分隔器元素上的 aria-labelledby 引用。 否则，则由 aria-label 定义分隔器元素的标签。
• 具有 separator 元素的 aria-controls 属性指向主窗格。