ARIA: treeitem 角色

描述

tree 是一个层级列表，包含可展开和折叠的父节点和子节点。treeitem 是 tree 中的一个节点。树的根是 tree，但所有树节点都是 treeitem 元素，即使它们自身嵌套了 treeitem 节点。

tree 的一个示例是文件系统选择用户界面：一个显示文件夹和文件的树视图。每个文件夹和文件都是一个 treeitem。文件夹项目，即 treeitem 元素，可以展开以显示文件夹的内容——这些内容可能是文件、文件夹，或两者兼有，并且都是 treeitem——也可以折叠以隐藏其内容。

在树层级结构中，根节点的角色是 tree。所有其他节点，除了根节点，都具有 treeitem 角色，无论它们是否有子节点。作为父节点的 treeitem 是父节点。不作为父节点的 treeitem 是叶节点。

具有子节点的树项目可以展开或折叠，以显示和隐藏其子节点。展开以显示其子节点的父节点是打开节点。折叠以隐藏其子节点的父节点是关闭节点。

每个父节点包含或拥有一个带有 group 角色的元素。父节点是 treeitem 元素的可扩展集合。这些子节点不是父节点的直接后代：相反，它们应该包含在一个带有 group 角色的元素中。

每个父节点都应该包含 aria-expanded 属性。关闭时设置为 false，打开时设置为 true。叶节点不应包含 aria-expanded 属性，因为该属性的存在表示辅助技术该节点是一个父节点。

任何带有 treeitem 角色的元素都必须嵌套在带有 tree 角色的元素中，或由其拥有。树项目可以是 tree、treeitem 的子级，也可以是包含在带有 tree 或 treeitem 角色的元素中，或由其拥有的带有 group 角色的元素的子级。如果 treeitem 没有嵌套在 tree 中，或者没有嵌套在由 tree 拥有的 group 中，则在拥有 tree、treeitem 或 group 元素的 aria-owns 属性值中包含 treeitem 的 id。

树可以是“单选”的，允许用户只选择一个 treeitem 执行操作；也可以是“多选”的，用户可以为操作选择多个 treeitem 节点。在这两种情况下，为了实现键盘可访问性，必须管理所有树后代的焦点。

在单选树中，只有一个 treeitem 可以将 aria-selected（或 aria-checked）设置为 true。当单选树获得焦点时，如果树获得焦点之前没有选择 treeitem，则焦点会设置在第一个 treeitem 上。如果树获得焦点之前已选择 treeitem，则焦点会设置在唯一一个已设置 aria-selected="true" 的 treeitem 上。

所有可选但未选中的节点都将 aria-selected 或 aria-checked 设置为 false。如果树包含不可选的节点，请不要包含 aria-selected 或 aria-checked，因为任一属性的存在都表示辅助技术该节点是可选的。

一次只能选择一个节点，除非 tree 节点设置了 aria-multiselectable="true"。

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

在多选树中，所有选中的树项目都将 aria-selected="true"（或 aria-checked="true"）设置为。所有可选但当前未选中的树项目节点都应将 aria-selected="false"（或 aria-checked="false"）设置为。

aria-selected 或 aria-checked 都可以用于指示 treeitem 元素的选中状态。某些用户界面在单选树中使用 aria-selected 来指示选择，在多选树中使用 aria-checked 来指示选择。

强烈不鼓励在同一个 tree 中同时使用 aria-selected 和 aria-checked。不要在单个树的树项目上同时使用 aria-selected 和 aria-checked，除非 aria-selected 的含义和目的与 aria-checked 的含义和目的不同，并且每个状态的含义和目的都很明显，并且用户界面为控制每个状态提供了单独的方法。

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

如果由于用户在树中移动焦点或滚动时动态加载，DOM 中不存在完整的可用树项目集，则每个 treeitem 都应指定 aria-level、aria-setsize 和 aria-posinset。

treeitem 必须具有可访问名称。通常，该名称来自 treeitem 的内容。可访问名称也可以通过 aria-label 或 aria-labelledby 设置。

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

tree 角色

可展开和折叠的父子 treeitem 节点分层列表的根节点

group 角色

标识一组 treeitem 子节点。

aria-expanded

设置在根 tree 和作为 treeitem 节点父级的 group 节点上，以指示树视图是展开 (true) 还是折叠 (false)。

aria-selected

设置为 true 或 false，表示 treeitem 是可选的，以及它当前是否被选中。

aria-checked

设置为 true 或 false，表示 treeitem 可以被选中（checked），以及它当前是否被选中（checked）。

键盘交互

对于垂直方向的 tree，这是默认方向

* 建议所有树都使用类型预输入功能，特别是对于根节点超过 7 个的树

多选键盘交互

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

推荐的多用户选择模型

示例

以下是如何将网络开发课程的目录列表标记为树视图

<div>
  <h3 id="treeLabel">Developer Learning Path</h3>
  <ul role="tree" aria-labelledby="treeLabel">
    <li role="treeitem" aria-expanded="true">
      <span>Web</span>
      <ul role="group">
        <li role="treeitem" aria-expanded="false">
          <span>Languages</span>
          <ul role="group">
            <li role="treeitem" aria-expanded="false">
              <span>HTML</span>
              <ul role="group">
                <li role="treeitem">Document structure</li>
                <li role="treeitem">Head elements</li>
                <li role="treeitem">Semantic elements</li>
                <li role="treeitem">Attributes</li>
                <li role="treeitem">Web forms</li>
              </ul>
            </li>
            <li role="treeitem">CSS</li>
            <li role="treeitem">JavaScript</li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false">
          <span>Accessibility</span>
          <ul role="group">
            <li role="treeitem" aria-label="accessibility object model">AOM</li>
            <li role="treeitem">WCAG</li>
            <li role="treeitem">ARIA</li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false">
          <span>Web Performance</span>
          <ul role="group">
            <li role="treeitem">Load time</li>
          </ul>
        </li>
        <li role="treeitem">APIs</li>
      </ul>
    </li>
  </ul>
</div>

以上提供了树视图的语义，但没有提供任何交互性。这必须通过 JavaScript 添加。

如果树项目默认不可聚焦，可以使用 JavaScript 将 tabIndex="-1" 设置给除了当用户通过 Tab 键进入树时应获得焦点的树项目之外的所有树项目，该树项目应设置为 tabIndex="0"。

所有键盘交互中的键盘功能和所有指针事件都需要编程，包括焦点管理、树的上下移动、父节点的展开和折叠以及选择管理。

如果树包含超过 7 个树项目，建议包含类型预输入功能。

规范