ARIA：tree 角色

描述

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

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

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

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

DOM 佈局和存在

所有樹專案都包含在或由一個角色為 tree 的元素所擁有。如果標記中有任何樹專案不是 tree 的直接後代，應在擁有它們的樹容器上包含 aria-owns，以包含那些不是容器的 DOM 子元素的元素。這些非子節點的被擁有元素將按照它們被引用的順序，在任何作為 DOM 子節點的樹專案之後出現在閱讀順序中。管理焦點的指令碼需要確保視覺焦點順序與這種輔助技術的閱讀順序相匹配。

如果由於使用者在樹中移動焦點或滾動時動態載入，導致完整的可用節點集未出現在 DOM 中，則每個節點都應指定 aria-level、aria-setsize 和 aria-posinset。

可訪問名稱

必須為 tree 提供一個無障礙名稱。可以使用 aria-labelledby 引用一個可見的標籤，或者使用 aria-label 指定一個標籤。

菜單方向

角色為 tree 的元素具有一個隱含的 aria-orientation 值為 vertical。如果樹元素是水平方向的，則應包含 aria-orientation="horizontal"。

關聯的 WAI-ARIA 角色、狀態和屬性

role="treeitem"

樹中的一個專案。

role="group"

一組可展開的樹專案。

aria-labelledby

當存在可見標籤時，標識用於標記 tree 的元素，從而提供必需的無障礙名稱。否則，請使用 aria-label。

aria-label

當沒有可見標籤時，定義一個用於標記 tree 的字串值。

aria-orientation

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

aria-multiselectable

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

鍵盤互動

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

* 建議所有樹都支援鍵入預讀功能，特別是對於超過 7 個根節點的樹。

多選鍵盤互動

多選樹有兩種互動模型：一種是要求使用者在導航列表時按住修飾鍵（如 Shift 或 Control）以避免丟失選擇狀態；另一種是不需要使用者按住修飾鍵的模型，我們推薦使用後者。

推薦的多使用者選擇模型

備選多選模型

備選多選模型是一種修飾鍵模型，其中在不按住修飾鍵（如 Shift 或 Control）的情況下移動焦點，會取消除聚焦節點外的所有已選節點的選中狀態。

規範