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