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。

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

如果 treegrid 允许用户为操作选择一项，则称为单选 treegrid。在单选 treegrid 中，具有焦点的项目也具有使用 aria-selected 设置的选中状态。

如果 treegrid 支持选择多行或多个单元格，则称为多选 treegrid。在多选 treegrid 中，选中状态与焦点无关。视觉设计和辅助技术必须区分已选项目和具有焦点的项目。

对于多选 treegrid，在具有 treegrid 角色的元素上包含 aria-multiselectable="true"。所有选中的行或单元格都具有设置为 true 的 aria-selected。所有可选中但当前未选中的行和单元格都具有设置为 false 的 aria-selected。不要在不可单独选中的行和单元格上包含 aria-selected 属性，因为该属性的存在表明辅助技术该行或单元格可选中。

在子 row 或 rowgroup 未嵌套在 DOM 中的 treegrid 内的情况下，必须在 treegrid 元素上设置引用所有非后代子级 ID 的 aria-owns 属性。如果行或单元格通过 aria-owns 包含在 treegrid 中，则它们将在 treegrid 元素的 DOM 后代之后呈现给辅助技术，除非网格的实际 DOM 后代也包含在 aria-owns 属性中。

如果某些行或列不在 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 完成。

row 角色

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

rowgroup 角色

表格结构中的一组 row。

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 属性的第一个单元格上，则打开或关闭子行。否则，执行单元格的默认操作。

Tab

如果包含焦点的行包含可聚焦元素，如 <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 中的最后一行，而不是后端数据中可用的最后一行。

当导航键（如箭头键）将焦点从一个单元格移动到另一个单元格时，它们不可用于执行诸如操作组合框或在单元格内移动编辑光标之类的操作。如果需要此功能，请参阅 在单元格内编辑和导航。

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