ARIA：treeitem 角色

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

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

在树形层次结构中，根节点 的角色为 tree。除根节点以外的所有其他节点的角色都为 treeitem，无论它们是否具有子节点。具有子节点的 treeitem 是一个父节点。不具有子节点的 treeitem 是一个末节点。

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

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

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

任何具有 treeitem 角色的元素都必须嵌套在具有 tree 角色的元素中，或由其拥有。树项可以是 tree、treeitem 或角色为 group 的元素的子节点，该元素包含在具有 tree 或 treeitem 角色的元素中，或由其拥有。如果 treeitem 未嵌套在 tree 中，或未嵌套在由 tree 拥有的 group 中，请将 treeitem 的 id 包含在拥有 tree、treeitem 或 group 元素的 aria-owns 属性值中。

树可以是“单选”的，允许用户为操作选择一个 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的含义和目的，每个状态的含义和目的都显而易见，并且用户界面提供了一种单独的方法来控制每个状态。

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

如果由于动态加载，完整的可用treeitem集合没有出现在DOM中，因为用户移动焦点或滚动树，则每个treeitem都应指定aria-level、aria-setsize和aria-posinset。

treeitem需要有一个可访问的名称。通常情况下，这个名称来自treeitem的内容。可访问的名称也可以通过aria-label或aria-labelledby设置。

tree角色

用于层次列表的根节点，该列表包含可以展开和折叠的父treeitem节点和子treeitem节点

group角色

标识一组treeitem子节点。

aria-expanded

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

aria-selected

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

aria-checked

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

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

* 建议为所有树使用键入提示，尤其是对于具有超过 7 个根节点的树

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

推荐的多用户选择模型

以下是将 web 开发课程的目录列表标记为树视图的一种方法

<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 个树项，建议包含键入提示功能。