ARIA：树形角色

tree 部件是一个分层列表，包含可以展开和折叠的父节点和子节点。层次结构中的任何项目都可以具有子树项目，并使用role="treeitem"设置。具有子节点的树形项目可以展开或折叠，从而显示和隐藏其子节点。

tree 的一个示例是文件系统选择用户界面：显示文件夹和文件的树形视图。可以展开文件夹项目以显示文件夹的内容（可能是文件、文件夹或两者），并可以折叠以隐藏其内容。

ARIA 树形视图主要使用键盘上的方向键进行导航，而不是Tab键。这种导航方式在大多数浏览器内容中并不常见，但在原生应用程序中则很常见且预期。因此，在创建树形视图之前，请考虑其他替代方案来解决您所需的功能。

树可以是“单选”的，允许用户仅选择一个项目进行操作，也可以是“多选”的，允许用户选择多个项目进行操作。在多选树中，tree 的aria-multiselectable 属性设置为 true。否则，aria-multiselectable 属性设置为 false 或隐含默认值 false。在这两种情况下，为了实现键盘可访问性，必须为所有树形后代管理焦点。

在某些单选树的实现中，聚焦的项目也具有选定状态；这被称为“选择跟随焦点”。当单选树获得焦点时，如果在树获得焦点之前没有任何树形项目被选中，则焦点将设置在第一个节点上。如果在树获得焦点之前某个树形项目被选中，则焦点将设置在选定的树形项目上。在单选树中，aria-selected 属性对于选定的树形项目设置为 true，并且在树中任何其他树形项目上都不存在。

在多选树中，所有选定的树形项目都设置了 aria-selected="true"，所有可选择但当前未选中的树形项目节点都设置了 aria-selected="false"。不要在不可选择的树形项目上包含 aria-selected 属性。

当多选树获得焦点时，如果在树获得焦点之前没有任何树形项目被选中，则焦点将设置在第一个树形项目上。如果在树获得焦点之前一个或多个树形项目被选中，则焦点将设置在第一个选定的节点上。

在多选树中，选定状态始终独立于焦点。例如，在典型文件系统导航器中，用户可以移动焦点以选择任意数量的文件以进行操作，例如复制或移动。视觉设计应清楚地表明哪些项目被选中以及哪个项目具有焦点。

在树形视图中，tree 节点是根节点；它可以具有子节点、孙节点以及更深层次的后代 treeitem 节点。

每个用作树节点的元素都具有 treeitem 角色，除了根树节点，其角色为 tree。tree 没有父 tree 节点 - 它就是根节点。如果某个节点嵌套在树中并且具有后代树形项目，则它具有 treeitem 角色和aria-expanded 属性；当节点处于关闭状态时，aria-expanded="false" 设置；当节点处于打开状态时，aria-expanded="true" 设置。

treeitem 节点可以是 tree 根节点的直接子节点，嵌套在 treeitem 节点中，或者（可选）嵌套在group 元素中，当嵌套在 tree 中时，它是一个可展开的 treeitem 元素集合。

不要在没有树形项目子节点的末端节点上包含 aria-expanded，因为这会错误地将节点描述为辅助技术的父节点。

所有树形项目（treeitem）都包含在或属于具有 tree 角色的元素中。如果任何树形项目在标记中不是 tree 的直接后代，请在拥有树形容器上包含 aria-owns 以包含不是容器的 DOM 子元素的元素。这些非子元素拥有的元素将按其引用的顺序出现在阅读顺序中，并在任何作为 DOM 子元素的树形项目之后。管理焦点的脚本需要确保视觉焦点顺序与辅助技术阅读顺序匹配。

如果由于动态加载，完整的可用节点集未出现在 DOM 中（例如，当用户在树中移动焦点或滚动时），则每个节点都指定了 aria-level、aria-setsize 和 aria-posinset。

必须为 tree 提供可访问名称。请参考使用 aria-labelledby 引用的可见标签，或使用 aria-label 指定标签。

具有 tree 角色的元素具有垂直的隐式 aria-orientation 值。如果树形元素为水平方向，则包含 aria-orientation="horizontal"。

role="treeitem"

树中的一个项目。

role="group"

可扩展的树形项目集合。

aria-labelledby

标识标记 tree 的元素（或元素），在存在可见标签时提供所需的可访问名称。否则使用 aria-label。

aria-label

定义一个字符串值，在不存在可见标签时标记 tree。

aria-orientation

指示树的方向是水平还是垂直；如果省略，则默认为 vertical。

aria-multiselectable

设置为 true 时，表示用户可以从树的当前可选后代中选择多个树形项目。

对于垂直方向的 tree（默认方向）

* 建议所有树都使用键入前瞻，特别是对于根节点超过 7 个的树。

多选树有两种交互模型：虽然您可以要求用户在导航列表时按住修饰键（如 Shift 或 Control）以避免丢失选择状态，但建议使用不需要用户按住修饰键的模型。

推荐的多用户选择模型

替代多选模型

替代多选模型是修饰键模型，其中在不按住修饰键（如 Shift 或 Control）的情况下移动焦点会取消选择所有选定的节点，除了焦点节点。