ARIA: treegrid 角色

描述

treegrid 是一个分层数据网格或表格，由可编辑或交互式的表格信息组成。treegrid 是 tree 和 grid 角色 的组合。与 grid 一样，treegrid 由行、列和网格单元格组成。与 tree 一样，treegrid 中的父节点是可展开和可折叠的。treegrid 小部件包含一个或多个 row 元素，可选地带 rowgroup 元素对行进行分组。每个行又包含一个或多个单元格。每个单元格要么是行元素的 DOM 后代，要么由行元素拥有，并且是 columnheader、rowheader 或 gridcell 元素，其中 gridcell 角色用于所有不包含列或行标题信息的单元格。

可以展开或折叠以显示或隐藏一组子行的 row 是一个父行。每个父行都在行元素或行中包含的单元格上设置了 aria-expanded 状态。

当子行显示时，aria-expanded 状态设置为 true，当子行隐藏时，设置为 false。不控制子行显示的元素不应具有 aria-expanded 属性，因为该属性的存在表示辅助技术该元素是父元素。

当你的网格 UI 需要支持 aria-expanded 的行，或者如果你的网格需要支持 aria-posinset、aria-setsize 或 aria-level 时，请使用 treegrid 而不是 grid。

行中的每个 row 或 gridcell 都应该是键盘可聚焦的，并且必须管理所有这些树形网格后代的键盘焦点。此规则的例外是列标题单元格，如果它们不提供排序或过滤等功能，则不需要可聚焦。每个行和单元格都应该包含一个可聚焦元素或本身可聚焦，无论单个单元格内容是否可编辑或交互。

单选和多选树形网格

如果 treegrid 允许用户只选择一项进行操作，那么它被称为单选树形网格。在单选树形网格中，具有焦点的项目也设置了带有 aria-selected 的选定状态。

如果树形网格支持选择多行或多单元格，它就是一个多选树形网格。在多选树形网格中，选定状态独立于焦点。视觉设计和辅助技术必须区分选定的项目和具有焦点的项目。

对于多选树形网格，请在具有 treegrid 角色的元素上包含 aria-multiselectable="true"。所有选定的行或单元格都将 aria-selected 设置为 true。所有可选择但当前未选定的行和单元格都将 aria-selected 设置为 false。不要在不可单独选择的行和单元格上包含 aria-selected 属性，因为该属性的存在会向辅助技术指示该行或单元格是可选择的。

孤立行

在子 row 或 rowgroup 未嵌套在 DOM 中的 treegrid 中时，必须在 treegrid 元素上设置 aria-owns 属性，引用所有非后代子代的 ID。如果通过 aria-owns 将行或单元格包含在树形网格中，除非网格的实际 DOM 后代也包含在 aria-owns 属性中，否则它们将显示在 treegrid 元素的 DOM 后代之后。

带动态加载内容的树形网格

如果某些行或列不在 DOM 中，并且在滚动时动态加载，则 aria-colcount、aria-rowcount、aria-colindex 和 aria-rowindex 将发挥作用。aria-colcount 和 aria-rowcount 属性在 treegrid 上设置。这些值分别表示完全加载的网格的总列数和行数。每个行和列的索引在各个单元格上设置，而不是在 treegrid 元素上。

树形网格的无障碍名称、描述和焦点

具有 treegrid 角色的元素必须具有无障碍名称。如果内容中可见合适的标签，请通过 aria-labelledby 提供名称。换句话说，如果用户界面中有一个元素充当树形网格的标签，则在具有 treegrid 角色的元素上包含 aria-labelledby 作为属性，并将该属性的值设置为标签元素或元素的 id。如果没有可见标签，请改用 aria-label。不要同时使用。

如果内容包含 treegrid 的标题或描述，请在 treegrid 元素上包含 aria-describedby，其属性值是包含描述的元素的 id。

如果 treegrid 容器本身接收焦点，其 aria-activedescendant 属性的值应引用所选 row、columnheader、rowheader 或 gridcell 的 id，除非使用 roving tabindex 来管理这些角色之间的焦点，在这种情况下不应使用 aria-activedescendant。

如果 treegrid 已禁用，请使其禁用状态在视觉上显而易见、以编程方式强制执行，并在 treegrid 本身包含 aria-disabled 属性，以通知辅助技术其禁用状态。

树形网格排序

如果树形网格提供排序功能，则 aria-sort 属性包含在相关的标题单元格元素上，而不是在网格本身上。

树形网格菜单

如果 treegrid 具有在右键单击时打开的附加 menu，请在 treegrid 元素上包含 aria-haspopup="true"。这会通知辅助技术 treegrid 具有关联的弹出窗口。键盘和指针设备用户打开和设置菜单焦点的能力必须通过 JavaScript 添加。

只读树形网格

默认情况下，树形网格假定为可编辑。如果树形网格不可编辑，请使用 aria-readonly 属性通知辅助技术 treegrid 是只读的。当在具有 treegrid 角色的元素上设置属性值时，它会传播到所有 columnheader、rowheader 和 gridcell 元素。可以通过在单个树形网格元素后代上包含 aria-readonly 来覆盖该全局值，以用于单个 gridcell 元素。

像所有 ARIA 属性一样，添加 aria-readonly 只会通知辅助技术内容是否可编辑，但它不会启用或禁用交互性。这必须通过 HTML 的全局 contenteditable 属性或 JavaScript 来完成。

关联的 WAI-ARIA 角色、状态和属性

row 角色

表格结构中的一排单元格，可选地在 rowgroup 中。包含一个或多个网格单元格、列标题或行标题行。

rowgroup 角色

表格结构中的一组 行。

gridcell 角色

旨在模仿 HTML <td> 元素的功能，存在于 grid 和 treegrid 角色中，并且必须是 row 的直接子元素。

columnheader 角色

行中包含列标题信息的单元格，类似于带有列作用域的本地 <th> 元素

rowheader 角色

表格结构中包含 row 标题信息的单元格。

aria-expanded

对于可展开项，值为 true 或 false。也表示该项是可展开的，因此如果该项无法展开，则不应出现。

aria-owns

当 DOM 层次结构不能用于表示父元素与其子元素之间的关系时，标识它们之间的上下文关系

aria-labelledby

使用此属性标记 treegrid。aria-labelledby 属性通常是用于为树形网格添加标题的元素的 id。

aria-label

标识 treegrid 的人类可读字符串值。如果存在可见标签，则应改用 aria-labelledby。

键盘交互

为了创建可访问的树形网格，必须实现使用键盘在网格的行和单元格之间移动焦点的功能。将焦点移入网格可能会导致第一个单元格或第一行获得焦点。焦点是移到下一个相邻单元格还是移到行取决于其内容要求，某些树形网格不向行提供焦点。

当网格中的元素获得焦点后，例如用户使用 Tab 键将焦点移到网格后，需要支持以下键盘交互。

Enter

如果启用了仅单元格焦点且焦点位于具有 aria-expanded 属性的第一个单元格上，则打开或关闭子行。否则，执行单元格的默认操作。

制表符

如果包含焦点的行包含可聚焦元素，例如 <input>、<button> 或 <a>，则将焦点移到行中的下一个输入。如果焦点位于行中的最后一个可聚焦元素上，则将焦点从树形网格小部件移出到下一个可聚焦元素。

右箭头

如果焦点位于折叠的行上，则展开该行。如果焦点位于展开的行上或不具有子行的行上，则将焦点移到该行中的第一个单元格。如果焦点位于行中最右侧的单元格上，则焦点不移动。如果焦点位于任何其他单元格上，则将焦点向右移动一个单元格。

左箭头

如果焦点位于展开的行上，则折叠该行。如果焦点位于折叠的行上或不具有子行的行上，则焦点不移动。如果焦点位于行中的第一个单元格且支持行焦点，则将焦点移到该行。如果焦点位于行中的第一个单元格且不支持行焦点，则焦点不移动。如果焦点位于任何其他单元格上，则将焦点向左移动一个单元格。

向下箭头

如果焦点位于行上，则将焦点向下移动一行。如果焦点位于最后一行，则焦点不移动。如果焦点位于单元格上，则将焦点向下移动一个单元格。如果焦点位于列中的最底端单元格上，则焦点不移动。

向上箭头

如果焦点位于行上，则将焦点向上移动一行。如果焦点位于第一行，则焦点不移动。如果焦点位于单元格上，则将焦点向上移动一个单元格。如果焦点位于列中的最顶端单元格上，则焦点不移动。

Page Down

如果焦点位于行或单元格上，则将焦点向下移动预定数量的行或单元格。通常，它向下移动相当于树形网格高度的距离，滚动以便当前可见行集中的最后一行成为第一批可见行之一。如果焦点位于最后一行，则焦点不移动。

Page Up

如果焦点位于行或单元格上，则将焦点向上移动预定数量的行。通常，它向上移动相当于树形网格高度的距离，滚动以便当前可见行集中的第一行成为最后一批可见行之一。如果焦点位于第一行，则焦点不移动。

Home Control + Home

如果焦点位于行上，则将焦点移到第一行。如果焦点位于第一行，则焦点不移动。如果焦点位于单元格上，则将焦点移到该行中的第一个单元格。如果焦点位于该行中的第一个单元格中，则焦点不移动。

End Control + End

如果焦点位于行上，则将焦点移到最后一行。如果焦点位于最后一行，则焦点不移动。如果焦点位于单元格上，则将焦点移到该行中的最后一个单元格。如果焦点位于该行中的最后一个单元格中，则焦点不移动。如果并非所有行都存在于 DOM 中，则这可用于将焦点移到 DOM 中存在的最后一行，或者如果整个数据库都存在于 DOM 中，则移到可用的最后一行。

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

Control + Space

如果焦点位于行上，则选择所有单元格。如果焦点位于单元格上，则选择包含焦点的列。

Shift + Space

如果焦点位于行上，则选择该行。如果焦点位于单元格上，则选择包含焦点的行。如果树形网格包含带有复选框的列以选择行，则当焦点不在复选框上时，此键也可以用作选中复选框的快捷方式。

Control + A

选择所有单元格。

Shift + 右箭头

如果焦点位于单元格上，则向右扩展选择一个单元格。

Shift + 左箭头

如果焦点位于单元格上，则向左扩展选择一个单元格。

Shift + 向下箭头

如果焦点位于行上，则将选择扩展到下一行中的所有单元格。如果焦点位于单元格上，则将选择向下扩展一个单元格。

Shift + 向上箭头

如果焦点位于行上，则将选择扩展到上一行中的所有单元格。如果焦点位于单元格上，则将选择向上扩展一个单元格。

如果导航功能可以动态地向 DOM 添加更多行或列，则将焦点移到网格开头或结尾的按键事件（例如 control + End）可能会将焦点移到 DOM 中的最后一行，而不是后端数据中可用的最后一行。

虽然导航键（例如箭头键）在单元格之间移动焦点时，它们无法用于执行诸如操作组合框或在单元格内移动编辑插入符之类的操作。如果需要此功能，请参阅 单元格内的编辑和导航。

可访问性考虑

所有单元格都能够接收或包含键盘焦点非常重要，因为当用户与网格交互时，屏幕阅读器通常处于应用程序阅读模式，而不是其文档阅读模式。在应用程序模式下，屏幕阅读器用户只能听到可聚焦元素和标记可聚焦元素的内容。如果内容无法接收焦点，屏幕阅读器用户可能会无意中忽略树形网格中包含的元素。

规范