ARIA：tree 角色

描述

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 节点。

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

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

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

DOM 布局和存在

所有树项目都包含在或由一个角色为 tree 的元素所拥有。如果标记中有任何树项目不是 tree 的直接后代，应在拥有它们的树容器上包含 aria-owns，以包含那些不是容器的 DOM 子元素的元素。这些非子节点的被拥有元素将按照它们被引用的顺序，在任何作为 DOM 子节点的树项目之后出现在阅读顺序中。管理焦点的脚本需要确保视觉焦点顺序与这种辅助技术的阅读顺序相匹配。

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

可访问名称

必须为 tree 提供一个无障碍名称。可以使用 aria-labelledby 引用一个可见的标签，或者使用 aria-label 指定一个标签。

菜单方向

角色为 tree 的元素具有一个隐含的 aria-orientation 值为 vertical。如果树元素是水平方向的，则应包含 aria-orientation="horizontal"。

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

role="treeitem"

树中的一个项目。

role="group"

一组可展开的树项目。

aria-labelledby

当存在可见标签时，标识用于标记 tree 的元素，从而提供必需的无障碍名称。否则，请使用 aria-label。

aria-label

当没有可见标签时，定义一个用于标记 tree 的字符串值。

aria-orientation

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

aria-multiselectable

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

键盘交互

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

* 建议所有树都支持键入预读功能，特别是对于超过 7 个根节点的树。

多选键盘交互

多选树有两种交互模型：一种是要求用户在导航列表时按住修饰键（如 Shift 或 Control）以避免丢失选择状态；另一种是不需要用户按住修饰键的模型，我们推荐使用后者。

推荐的多用户选择模型

备选多选模型

备选多选模型是一种修饰键模型，其中在不按住修饰键（如 Shift 或 Control）的情况下移动焦点，会取消除聚焦节点外的所有已选节点的选中状态。

规范