多項 DevTools 功能會檢查是否支援鍵盤與螢幕閱讀器。 使用 Inspect 工具逐一檢查每個頁面元素的無障礙性可能會相當耗時。 另一種檢查網頁的方法是使用 無障礙樹。 無障礙樹會顯示該頁面提供給輔助科技(如螢幕閱讀器)的資訊。
無障礙樹是 DOM 樹的子集,包含來自 DOM 樹的元素,這些元素對於在螢幕閱讀器中顯示頁面內容具有相關性與實用性。 無障礙樹位於元素工具的無障礙標籤, (靠近樣式標籤) 。
探索使用無障礙樹的方法:
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
要開啟 DevTools,請右鍵點擊網頁,然後選擇 檢查。 或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
在 DevTools 左上角的
) 按鈕中選擇 Inspect (,讓該按鈕 (藍色) 被高亮亮出。在渲染的網頁中,在 捐款 區塊,將滑鼠移到 100 按鈕上。 檢查 工具的 覆蓋層會出現。
在渲染後的網頁中,點擊 100 按鈕。 在 DevTools 中, Elements 工具會被顯示出來。 DOM 樹上顯示了 100 按鈕的
<div class="donationbutton">100</div>元素。 樣 式 面板顯示適用於該元素的 CSS 規則。
在 樣式 標籤的右側,選擇 「無障礙 」標籤。該元素的 無障礙樹 會顯示並展開:
樹中任何沒有名稱或具有 (角色 generic 的元素(如 <div class="donationbutton">100</div> 元素) )都會有問題,因為該元素不會對鍵盤使用者或使用輔助科技的使用者開放。