本頁將針對 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」部分中查看這些屬性。
在「無障礙」窗格中查看元素的運算無障礙屬性。
找出並修正低對比度文字
開發人員工具可以自動找出低對比度的問題，並建議更好的顏色來修正這些問題。請參閱「打造更易讀的網站」一文，瞭解詳情。