檢查協助工具樹狀結構以取得鍵盤和螢幕助讀程式支援

數個 DevTools 功能會檢查鍵盤和螢幕助讀程式支援。 使用 檢查 工具個別檢查每個頁面元素的協助工具可能會變得相當耗時。 檢查網頁的替代方式是使用 協助工具樹狀結構。 協助工具樹狀結構會指出頁面提供哪些資訊給輔助技術，例如螢幕助讀程式。

協助工具樹狀結構是 DOM 樹狀結構的子集，其中包含來自 DOM 樹狀結構的元素，這些元素對於在螢幕助讀程式中顯示頁面內容相當相關且實用。 協助工具樹狀結構位於 [專案] 工具的[協助工具] 索引標籤中， (靠近 [樣式] 索引標籤) 。

若要使用協助工具樹狀結構進行探索：

1. 在新的視窗或索引標籤中開啟 輔助功能測試示範網頁 。

2. 若要開啟 DevTools，請以滑鼠右鍵按一下網頁，然後選取 [ 檢查]。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。

3. 選取 [ 檢查 ] (DevTools 左上角的 [ ) 按鈕，讓按鈕反白顯示 (藍色) 。

4. 在轉譯的網頁中 ，將鼠 標游標停留在 [ 100 ] 按鈕上。 [ 檢查] 工具重迭隨即出現。

5. 在轉譯的網頁中，按一下 [ 100] 按鈕。 在 DevTools 中，會顯示 Elements 工具。 DOM 樹狀結構會顯示 <div class="donationbutton">100</div>100 按鈕的專案。 [ 樣式] 窗格會顯示套用至 元素的 CSS 規則。

   

6. 在 [樣 式] 索引 標籤右側，選取 [ 協助工具] 索引 標籤。元素的 協助工具樹 狀結構隨即顯示，並展開：

   

樹狀結構中沒有名稱或具有 (角色 generic 的任何元素，例如 <div class="donationbutton">100</div> 元素) 是個問題，因為鍵盤使用者或使用輔助技術的使用者無法使用該專案。

另請參閱

• 檢視專案在協助工具樹狀結構中的位置