ARIA：樹形角色

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 節點。

每個用作樹節點的元素都具有 treeitem 角色，除了根樹節點，其角色為 tree。tree 沒有父 tree 節點 - 它就是根節點。如果某個節點巢狀在樹中並且具有後代樹形專案，則它具有 treeitem 角色和aria-expanded 屬性；當節點處於關閉狀態時，aria-expanded="false" 設定；當節點處於開啟狀態時，aria-expanded="true" 設定。

treeitem 節點可以是 tree 根節點的直接子節點，巢狀在 treeitem 節點中，或者（可選）巢狀在group 元素中，當巢狀在 tree 中時，它是一個可展開的 treeitem 元素集合。

不要在沒有樹形專案子節點的末端節點上包含 aria-expanded，因為這會錯誤地將節點描述為輔助技術的父節點。

所有樹形專案（treeitem）都包含在或屬於具有 tree 角色的元素中。如果任何樹形專案在標記中不是 tree 的直接後代，請在擁有樹形容器上包含 aria-owns 以包含不是容器的 DOM 子元素的元素。這些非子元素擁有的元素將按其引用的順序出現在閱讀順序中，並在任何作為 DOM 子元素的樹形專案之後。管理焦點的指令碼需要確保視覺焦點順序與輔助技術閱讀順序匹配。

如果由於動態載入，完整的可用節點集未出現在 DOM 中（例如，當用戶在樹中移動焦點或滾動時），則每個節點都指定了 aria-level、aria-setsize 和 aria-posinset。

必須為 tree 提供可訪問名稱。請參考使用 aria-labelledby 引用的可見標籤，或使用 aria-label 指定標籤。

具有 tree 角色的元素具有垂直的隱式 aria-orientation 值。如果樹形元素為水平方向，則包含 aria-orientation="horizontal"。

role="treeitem"

樹中的一個專案。

role="group"

可擴充套件的樹形專案集合。

aria-labelledby

標識標記 tree 的元素（或元素），在存在可見標籤時提供所需的可訪問名稱。否則使用 aria-label。

aria-label

定義一個字串值，在不存在可見標籤時標記 tree。

aria-orientation

指示樹的方向是水平還是垂直；如果省略，則預設為 vertical。

aria-multiselectable

設定為 true 時，表示使用者可以從樹的當前可選後代中選擇多個樹形專案。

對於垂直方向的 tree（預設方向）

* 建議所有樹都使用鍵入前瞻，特別是對於根節點超過 7 個的樹。

多選樹有兩種互動模型：雖然您可以要求使用者在導航列表時按住修飾鍵（如 Shift 或 Control）以避免丟失選擇狀態，但建議使用不需要使用者按住修飾鍵的模型。

推薦的多使用者選擇模型

替代多選模型

替代多選模型是修飾鍵模型，其中在不按住修飾鍵（如 Shift 或 Control）的情況下移動焦點會取消選擇所有選定的節點，除了焦點節點。