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 個樹專案，建議包含型別預輸入功能。

規範