ARIA：treegrid 角色

treegrid 是一個分層資料網格或表格，由可編輯或可互動的表格資訊組成。treegrid 是 tree 和 grid 角色的組合。與 grid 相似，treegrid 由行、列和網格單元格組成。與 tree 相似，treegrid 中的父節點可展開和摺疊。treegrid 小部件包含一個或多個 row 元素，可選地包含 rowgroup 元素對行進行分組。每行反過來包含一個或多個單元格。每個單元格都是行元素的 DOM 後代或被其擁有，並且是 columnheader、rowheader 或 gridcell 元素，其中 gridcell 角色用於所有不包含列或行標題資訊的單元格。

可以展開或摺疊以顯示或隱藏一組子行的 row 是一個**父行**。每個父行都在行元素或行中包含的單元格上設定了 aria-expanded 狀態。

當子行顯示時，aria-expanded 狀態設定為 true，當子行隱藏時設定為 false。不控制子行顯示的元素不應具有 aria-expanded 屬性，因為該屬性的存在表明輔助技術該元素具有該屬性是父級。

當您的網格 UI 需要支援 aria-expanded 的行或您的網格需要支援 aria-posinset、aria-setsize 或 aria-level 時，請使用 treegrid 而不是 grid。

treegrid 中的每個 row 或 gridcell 應可使用鍵盤獲取焦點，並且必須管理所有這些 treegrid 後代的鍵盤焦點。此規則的例外情況是列標題單元格，如果它們不提供排序或篩選等功能，則不需要可獲取焦點。每行和每個單元格都應包含一個可獲取焦點的元素，或者本身可獲取焦點，無論單個單元格內容是否可編輯或可互動。

如果 treegrid 允許使用者為操作選擇一項，則稱為單選 treegrid。在單選 treegrid 中，具有焦點的專案也具有使用 aria-selected 設定的選中狀態。

如果 treegrid 支援選擇多行或多個單元格，則稱為多選 treegrid。在多選 treegrid 中，選中狀態與焦點無關。視覺設計和輔助技術必須區分已選專案和具有焦點的專案。

對於多選 treegrid，在具有 treegrid 角色的元素上包含 aria-multiselectable="true"。所有選中的行或單元格都具有設定為 true 的 aria-selected。所有可選中但當前未選中的行和單元格都具有設定為 false 的 aria-selected。不要在不可單獨選中的行和單元格上包含 aria-selected 屬性，因為該屬性的存在表明輔助技術該行或單元格可選中。

在子 row 或 rowgroup 未巢狀在 DOM 中的 treegrid 內的情況下，必須在 treegrid 元素上設定引用所有非後代子級 ID 的 aria-owns 屬性。如果行或單元格透過 aria-owns 包含在 treegrid 中，則它們將在 treegrid 元素的 DOM 後代之後呈現給輔助技術，除非網格的實際 DOM 後代也包含在 aria-owns 屬性中。

如果某些行或列不在 DOM 中，並且是在滾動時動態載入的，則 aria-colcount、aria-rowcount、aria-colindex 和 aria-rowindex 會發揮作用。aria-colcount 和 aria-rowcount 屬性將設定在 treegrid 上。它們的值分別為完全載入的網格的總列數和總行數。每個行和列的索引將設定在單個單元格上，而不是在 treegrid 元素上。

具有 treegrid 角色的元素必須具有可訪問名稱。如果內容中存在合適的標籤，請透過 aria-labelledby 提供名稱。換句話說，如果使用者介面中存在用作樹形網格標籤的元素，請在具有 treegrid 角色的元素上包含 aria-labelledby 作為屬性，並將該屬性的值設定為標記元素或元素的 id。如果不存在可見標籤，請使用 aria-label。不要同時使用兩者。

如果內容包含 treegrid 的標題或描述，請在 treegrid 元素上包含 aria-describedby，其屬性值為包含描述的元素的 id。

如果 treegrid 容器本身獲得了焦點，則其 aria-activedescendant 屬性的值應引用所選 row、columnheader、rowheader 或 gridcell 的 id，除非使用 roving tabindex 來管理這些角色之間的焦點，在這種情況下，不應使用 aria-activedescendant。

如果 treegrid 被停用，請使該停用狀態在視覺上明顯、以程式設計方式強制執行，並在 treegrid 本身上包含 aria-disabled 屬性，以告知輔助技術其停用狀態。

如果樹形網格提供排序功能，則 aria-sort 屬性包含在相關標題單元格元素上，而不是在網格本身。

如果 treegrid 附帶一個 menu，該選單在右鍵單擊時開啟，請在 treegrid 元素上包含 aria-haspopup="true"。這將告知輔助技術 treegrid 有一個關聯的彈出視窗。必須使用 JavaScript 新增鍵盤和指標裝置使用者開啟選單和設定選單焦點的功能。

預設情況下，假設樹形網格是可編輯的。如果樹形網格不可編輯，請使用 aria-readonly 屬性告知輔助技術 treegrid 是隻讀的。當該屬性值設定在具有 treegrid 角色的元素上時，它會向下傳播到所有 columnheader、rowheader 和 gridcell 元素。可以透過在單個樹形網格元素後代上包含 aria-readonly 來覆蓋該全域性值以用於單個 gridcell 元素。

與所有 ARIA 屬性一樣，新增 aria-readonly 只是告知輔助技術內容是否可編輯，但不會啟用或停用互動性。這必須使用 HTML 的全域性 contenteditable 屬性或使用 JavaScript 完成。

row 角色

表格結構中的一行單元格，可選地在 rowgroup 中。包含一個或多個網格單元格、列標題或行標題。

rowgroup 角色

表格結構中的一組 row。

gridcell 角色

旨在模仿 HTML <td> 元素的功能，位於 grid 和 treegrid 角色中，並且必須是 row 的直接子元素。

columnheader 角色

一行中包含列標題資訊的單元格，類似於具有列範圍的本機 <th> 元素

rowheader 角色

包含表格結構中 row 標題資訊的單元格。

aria-expanded

對於可擴充套件專案，值為 true 或 false。還表示該專案是可擴充套件的，因此如果該專案不可擴充套件，則不應存在。

aria-owns

當 DOM 層次結構無法用於表示關係時，標識父元素及其子元素之間的上下文關係

aria-labelledby

使用此屬性來標記 treegrid。aria-labelledby 屬性通常是用於為樹形網格設定標題的元素的 id。

aria-label

一個可讀的字串值，用於標識 treegrid。如果存在可見標籤，則應使用 aria-labelledby。

為了建立可訪問的樹形網格，必須實現使用鍵盤在網格的行和單元格之間移動焦點的功能。將焦點移動到網格中可能會導致第一個單元格或第一行獲得焦點。焦點是移動到下一個相鄰單元格還是行取決於其內容要求，一些樹形網格不會將焦點提供給行。

當網格中的元素獲得焦點時，例如，在使用者使用 Tab 將焦點移動到網格後，需要支援以下鍵盤互動。

Enter

如果啟用僅單元格焦點，並且焦點位於具有 aria-expanded 屬性的第一個單元格上，則開啟或關閉子行。否則，執行單元格的預設操作。

Tab

如果包含焦點的行包含可聚焦元素，如 <input>、<button> 或 <a>，則將焦點移動到行中的下一個輸入。如果焦點位於行中的最後一個可聚焦元素上，則將焦點從樹形網格小部件移動到下一個可聚焦元素。

向右箭頭

如果焦點位於摺疊的行上，則展開該行。如果焦點位於展開的行上或位於沒有子行的行上，則將焦點移動到行中的第一個單元格。如果焦點位於一行中最右邊的單元格上，則焦點不會移動。如果焦點位於任何其他單元格上，則將焦點向右移動一個單元格。

向左箭頭

如果焦點位於展開的行上，則摺疊該行。如果焦點位於摺疊的行上或位於沒有子行的行上，則焦點不會移動。如果焦點位於一行中的第一個單元格上，並且支援行焦點，則將焦點移動到該行。如果焦點位於一行中的第一個單元格上，並且不支援行焦點，則焦點不會移動。如果焦點位於任何其他單元格上，則將焦點向左移動一個單元格。

向下箭頭

如果焦點位於一行上，則將焦點向下移動一行。如果焦點位於最後一行上，則焦點不會移動。如果焦點位於一個單元格上，則將焦點向下移動一個單元格。如果焦點位於列中的最底部單元格上，則焦點不會移動。

向上箭頭

如果焦點位於一行上，則將焦點向上移動一行。如果焦點位於第一行上，則焦點不會移動。如果焦點位於一個單元格上，則將焦點向上移動一個單元格。如果焦點位於列中的最頂部單元格上，則焦點不會移動。

Page Down

如果焦點位於一行或單元格上，則將焦點向下移動預定數量的行或單元格。通常，它向下移動相當於樹形網格高度的距離，滾動使當前可見的行集中最底部的行成為第一個可見行之一。如果焦點位於最後一行，則焦點不會移動。

Page Up

如果焦點位於一行或單元格上，則將焦點向上移動預定數量的行。通常，它向上移動相當於樹形網格高度的距離，滾動使當前可見的行集中最頂部的行成為最後一個可見行之一。如果焦點位於第一行，則焦點不會移動。

Home Control + Home

如果焦點位於一行上，則將焦點移動到第一行。如果焦點位於第一行，則焦點不會移動。如果焦點位於一個單元格上，則將焦點移動到行中的第一個單元格。如果焦點位於行中的第一個單元格，則焦點不會移動。

End Control + End

如果焦點位於一行上，則將焦點移動到最後一行。如果焦點位於最後一行，則焦點不會移動。如果焦點位於一個單元格上，則將焦點移動到行中的最後一個單元格。如果焦點位於行中的最後一個單元格，則焦點不會移動。如果並非所有行都存在於 DOM 中，則可以使用此操作將焦點移動到 DOM 中存在的最後一行，或者如果整個資料庫都存在於 DOM 中，則移動到最後一行。

如果樹形網格支援選擇單元格、行或列，則以下鍵通常用於這些功能。

Control + Space

如果焦點位於一行上，則選擇所有單元格。如果焦點位於一個單元格上，則選擇包含該焦點的列。

Shift + Space

如果焦點位於一行上，則選擇該行。如果焦點位於一個單元格上，則選擇包含該焦點的行。如果樹形網格包含一列用於選擇行的複選框，則此鍵也可以用作選中該框的快捷鍵，前提是焦點不在該複選框上。

Control + A

選擇所有單元格。

Shift + 向右箭頭

如果焦點位於一個單元格上，則將選擇範圍擴充套件到右側一個單元格。

Shift + 向左箭頭

如果焦點位於一個單元格上，則將選擇範圍擴充套件到左側一個單元格。

Shift + 向下箭頭

如果焦點位於一行上，則將選擇範圍擴充套件到下一行中的所有單元格。如果焦點位於一個單元格上，則將選擇範圍向下擴充套件一個單元格。

Shift + 向上箭頭

如果焦點位於一行上，則將選擇範圍擴充套件到上一行中的所有單元格。如果焦點位於一個單元格上，則將選擇範圍向上擴充套件一個單元格。

如果導航功能可以動態地向 DOM 新增更多行或列，則將焦點移動到網格開頭或結尾的鍵事件，例如 control + End，可能會將焦點移動到 DOM 中的最後一行，而不是後端資料中可用的最後一行。

當導航鍵（如箭頭鍵）將焦點從一個單元格移動到另一個單元格時，它們不可用於執行諸如操作組合框或在單元格內移動編輯游標之類的操作。如果需要此功能，請參閱 在單元格內編輯和導航。

對於所有單元格來說，能夠接收或包含鍵盤焦點非常重要，因為當用戶與網格互動時，螢幕閱讀器通常處於應用程式閱讀模式，而不是文件閱讀模式。 在應用程式模式下，螢幕閱讀器使用者只能聽到可聚焦元素和為可聚焦元素新增標籤的內容。 如果內容無法接收焦點，螢幕閱讀器使用者可能會在不知情的情況下忽略樹形網格中包含的元素。