無障礙功能

了解樹狀檢視如何實作無障礙功能與指南，包含遵循國際標準的鍵盤導航。

指南

通用的無障礙功能一致性指南包含

• 全球接受的標準： WCAG
• 美國
  • ADA - 美國司法部
  • Section 508 - 美國聯邦機構
• 歐洲： EAA (歐洲無障礙法案)

WCAG 2.1 具有三個等級的一致性：A、AA 和 AAA。AA 級超越了無障礙功能的基本標準，是大多數組織的常見目標，因此這也是我們的目標支援。

WAI-ARIA Authoring Practices 提供了關於如何最佳化樹狀檢視無障礙功能的寶貴資訊。

鍵盤互動

按鍵	描述
Enter	啟用焦點項目。 如果項目有子項目，則展開或摺疊 如果項目沒有子項目，則選取該項目
向上箭頭	將焦點移至前一個可聚焦項目，而無需展開或摺疊它
向下箭頭	將焦點移至下一個可聚焦項目，而無需展開或摺疊它
向右箭頭 + RTL 關閉 向左箭頭 + RTL 開啟	如果焦點在摺疊的項目上，則展開項目而不移動焦點 如果焦點在展開的項目上，則將焦點移至第一個子項目 如果焦點在末端項目上，則不會發生任何事情
向左箭頭 + RTL 關閉 向右箭頭 RTL 開啟	如果焦點在展開的項目上，則摺疊該項目 如果焦點在具有父項目的摺疊項目上，則將焦點移至其父項目 如果焦點在根項目上，則不會發生任何事情
Home	將焦點放在樹狀結構中的第一個項目
End	將焦點放在樹狀結構中的最後一個項目
*	展開與焦點項目位於同一層級的所有同層項目，而無需移動焦點

支援單字元的預先輸入。當輸入字元時，焦點會移至標籤以輸入字元開頭的下一個項目。

選取

樹狀檢視同時支援單選和多選。若要深入瞭解選取 API，請造訪 簡易樹狀檢視 或 豐富樹狀檢視 的專用頁面。

若要閱讀更多關於選取和焦點之間區別的資訊，您可以參考 WAI-ARIA Authoring Practices 指南。

在單選樹狀結構上

當單選樹狀結構收到焦點時

• 如果在樹狀結構收到焦點時未選取任何項目，則焦點會設定在第一個項目上。
• 如果在樹狀結構收到焦點之前已選取項目，則焦點會設定在選取的項目上。

按鍵	描述
空白鍵	選取焦點項目。
Enter	如果項目沒有子項目，則選取焦點項目。

在多選樹狀結構上

當多選樹狀結構收到焦點時

• 如果在樹狀結構收到焦點時未選取任何項目，則焦點會設定在第一個項目上。
• 如果在樹狀結構收到焦點之前已選取一個或多個項目，則焦點會設定在
  • 如果是首次渲染，則設定在第一個選取的項目上
  • 否則設定在上次選取的項目上

按鍵	描述
空白鍵	切換焦點項目的選取狀態。
Shift+向上箭頭	移動焦點並切換前一個項目的選取狀態。
Shift+向下箭頭	移動焦點並切換下一個項目的選取狀態。
Ctrl+Shift+Home	選取焦點項目和直到第一個項目的所有項目。
Ctrl+Shift+End	選取焦點項目和直到最後一個項目的所有項目。
Ctrl+A	選取所有項目。