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 個樹項，建議包含鍵入提示功能。