本頁將針對 Chrome 開發人員工具中的無障礙功能提供詳盡參考。���用對象:
- 具備開發人員工具的基本知識,例如如何開啟這項工具。
- 熟悉無障礙原則和最佳做法。
本參考資料的目的是協助您探索開發人員工具中的所有工具,協助您檢查頁面的無障礙功能。
如要瞭解如何透過螢幕閱讀器等輔助技術瀏覽 DevTools,請參閱「使用輔助技術導覽 Chrome 開發人員工具」。
如要瞭解開發無障礙網站的方法,請參閱瞭解無障礙工具。
Chrome 開發人員工具的無障礙功能總覽
本節將說明開發人員工具如何在整體無障礙工具工具包中發揮作用。
判斷網頁是否可供存取時,請謹記 2 個一般問題:
- 我可以使用鍵盤或螢幕閱讀器來瀏覽頁面嗎?
- 是否已正確標記網頁元素,可供螢幕閱讀器使用?
一般來說,開發人員工具可協助您修正與第 2 題相關的錯誤,因為這類錯誤可以自動且容易偵測。第 1 題也很重要,但開發人員工具無法幫助您。找出第 1 題相關錯誤的唯一方法,就是嘗試自行嘗試使用具有鍵盤或螢幕閱讀器的頁面。詳情請參閱如何進行無障礙功能審查。
稽核網頁的無障礙功能
一般來說,請使用「Lighthouse」面板下方的無障礙檢查功能,判斷以下事項:
- 已為螢幕閱讀器正確標記網頁。
- 網頁上的文字元素具有足夠的對比度。另請參閱「打造更清楚易讀的網站」一文。
如何稽核網頁:
- 前往要稽核的網址。
在開發人員工具中,按一下「Lighthouse」分頁標籤。開發人員工具會顯示多種設定選項。
如果您想模擬行動裝置,請在「裝置」部分選取「行動裝置」。這個選項會改變使用者代理程式字串及調整可視區域的大小。如果行動版網頁與電腦版網頁的顯示方式不同,這個選項可能會對稽核結果造成顯著影響。
在「Lighthouse」區段中,確認已啟用「Accessibility」。如果要從報表中排除其他類別,請停用。如果你想瞭解其他改善網頁品質的方法,請保持啟用狀態。
「Throttling」區段可讓您限制網路和 CPU,以便在分析負載效能時派上用場。這個選項應與無障礙功能分數無關,因此您可以視需要使用。
[Clear Storage] (清除儲存空間) 核取方塊可讓您在載入頁面前清除所有儲存空間,或保留網頁載入之間的儲存空間。這個選項可能也與您的無障礙分數無關,因此您可以使用任何偏好。
按一下「產生報表」。開發人員工具會在 10 到 30 秒後提供報告。報表提供了多種訣竅,協助提升網頁的無障礙程度。
點選稽核報告即可瞭解詳情。
如要查看稽核說明文件,請按一下「瞭解詳情」。
另請參閱:aXe 擴充功能
建議您使用 aXe 擴充功能或 Lighthouse 擴充功能,不要使用 Chrome 預設提供的 Lighthouse 面板。 且通常會提供相同的資訊,因為 aXe 是 Lighthouse 面板採用的基礎引擎。aXe 擴充功能有不同的 UI,描述的稽核方式也稍有不同。
aXe 擴充功能擁有「Audits」面板的優點之一,就是可以讓您檢查並找出失敗的節點。
無障礙窗格
「無障礙」窗格可讓您查看 DOM 節點的無障礙樹狀結構、ARIA 屬性和計算出的無障礙屬性。
如要開啟「無障礙」窗格,請按照下列步驟操作:
- 按一下「元素」分頁標籤。
- 在「DOM 樹狀結構」中,選取要檢查的元素。
- 按一下「無障礙設定」分頁標籤。這個分頁可能會隱藏在「更多分頁」按鈕 下方。
查看元素在無障礙樹狀結構中的位置
無障礙樹狀結構是 DOM 樹狀結構的子集。僅包含 DOM 樹狀結構中的元素,這些元素與透過螢幕閱讀器顯示網頁內容相關且有用。
在這個檢視畫面中,您可以只探索單一節點及其祖系。如要探索整個無障礙樹狀結構,請按照下列步驟操作。
(預先發布版) 探索整頁的無障礙功能樹狀結構
您可以運用無障礙樹狀結構的整頁模式探索整個樹狀結構,進一步瞭解輔助技術對於您網頁內容的暴露程度。
如何探索無障礙功能樹狀結構:
- 勾選「啟用整頁模式無障礙功能樹狀結構」。
在頂端的動作列中,按一下「Reload DevTools」。
在「Elements」面板右上���,切換 「Switch to Accessibility Tree view」按鈕。
瀏覽無障礙功能樹狀結構。您可以展開節點,或按一下「運算屬性」下方查看詳細資料。
選取節點並按一下「 切換至 DOM 樹狀檢視」按鈕,即可切換回 DOM 樹狀結構。
現在已選取相應的 DOM 節點。如要瞭解 DOM 節點及其無障礙樹狀結構節點之間的對應關係,這是一個絕佳的方式。
查看元素的 ARIA 屬性
ARIA 屬性可確保螢幕閱讀器能取得所需資訊,以便正確呈現網頁內容。
在無障礙窗格中查看元素的 ARIA 屬性。
查看畫面上的元素來源順序
網頁上的元素不一定會按照來源中的順序顯示。這可能會混淆仰賴輔助技術瀏覽網路的使用者。
如何查看網站上的來源順序並進行偵錯:
- 檢查頁面中的元素。
- 在「Elements」 >「Accessibility」 >「Source Order Viewer」中,勾選 「Show source order」。
在可視區域中,開發人員工具會使用邊框醒目顯示巢狀元素,並以數字對應於這些元素的來源順序。
查看元素的無障礙功能屬性
部分無障礙屬性是由瀏覽器動態計算。您可以在「Accessibility」窗格的「Computed Properties」部分中查看這些屬性。
在「無障礙」窗格中查看元素的運算無障礙屬性。
找出並修正低對比度文字
開發人員工具可以自動找出低對比度的問題,並建議更好的顏色來修正這些問題。請參閱「打造更易讀的網站」一文,瞭解詳情。