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。

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

單選和多選樹形網格

如果 treegrid 允許使用者只選擇一項進行操作，那麼它被稱為單選樹形網格。在單選樹形網格中，具有焦點的專案也設定了帶有 aria-selected 的選定狀態。

如果樹形網格支援選擇多行或多單元格，它就是一個多選樹形網格。在多選樹形網格中，選定狀態獨立於焦點。視覺設計和輔助技術必須區分選定的專案和具有焦點的專案。

對於多選樹形網格，請在具有 treegrid 角色的元素上包含 aria-multiselectable="true"。所有選定的行或單元格都將 aria-selected 設定為 true。所有可選擇但當前未選定的行和單元格都將 aria-selected 設定為 false。不要在不可單獨選擇的行和單元格上包含 aria-selected 屬性，因為該屬性的存在會向輔助技術指示該行或單元格是可選擇的。

孤立行

在子 row 或 rowgroup 未巢狀在 DOM 中的 treegrid 中時，必須在 treegrid 元素上設定 aria-owns 屬性，引用所有非後代子代的 ID。如果透過 aria-owns 將行或單元格包含在樹形網格中，除非網格的實際 DOM 後代也包含在 aria-owns 屬性中，否則它們將顯示在 treegrid 元素的 DOM 後代之後。

帶動態載入內容的樹形網格

如果某些行或列不在 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 來完成。

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

row 角色

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

rowgroup 角色

表格結構中的一組 行。

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 屬性的第一個單元格上，則開啟或關閉子行。否則，執行單元格的預設操作。

製表符

如果包含焦點的行包含可聚焦元素，例如 <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 中的最後一行，而不是後端資料中可用的最後一行。

雖然導航鍵（例如箭頭鍵）在單元格之間移動焦點時，它們無法用於執行諸如操作組合框或在單元格內移動編輯插入符之類的操作。如果需要此功能，請參閱 單元格內的編輯和導航。

可訪問性考慮

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

規範