本頁面是 Chrome 開發人員工具無障礙功能的完整參考資料。這項功能適用於以下網頁程式開發人員：
- 對開發人員工具有基本瞭解，例如如何開啟。
- 熟悉無障礙原則和最佳做法。
這份參考資料的目的是協助您探索開發人員工具中的所有工具，以便檢查網頁的無障礙功能。
如需使用螢幕閱讀器等輔助技術瀏覽開發人員工具的說明，請參閱「使用輔助技術瀏覽 Chrome 開發人員工具」。
如要瞭解如何開發無障礙網站，請參閱「瞭解無障礙功能」。
Chrome 開發人員工具的無障礙功能總覽
本節說明開發人員工具在整體無障礙工具包中的作用。
判斷網頁是否可存取時，請注意以下 2 個一般問題：
- 我可以使用鍵盤或螢幕閱讀器瀏覽頁面嗎？
- 網頁元素是否已正確標記，可供螢幕閱讀器使用？
一般來說，開發人員工具可協助修正與問題 #2 相關的錯誤，因為這些錯誤很容易以自動方式偵測到。問題 1 同樣重要，但很抱歉，開發人員工具無法提供協助。如要找出與問題 1 相關的錯誤，唯一方法是親自使用鍵盤或螢幕閱讀器瀏覽網頁。詳情請參閱「如何進行無障礙審查」。
稽核網頁的無障礙程度
一般來說，您可以使用「Lighthouse」面板下的無障礙檢查，判斷：
- 網頁已正確標記，可供螢幕閱讀器使用。
- 網頁上的文字元素具有足夠的對比度。另請參閱「讓網站更容易閱讀」。
如要稽核網頁，請按照下列步驟操作：
- 前往要稽核的網址。
在開發人員工具中，按一下「Lighthouse」面板。開發人員工具會顯示各種設定選項。
如要模擬行動裝置，請在「裝置」部分選取「行動裝置」。這個選項會變更使用者代理程式字串，並調整檢視區塊大小。如果網頁的行動版和電腦版顯示方式不同，這個選項可能會大幅影響稽核結果。
在「Lighthouse」部分，確認已啟用「無障礙」。如要從報表中排除其他類別，請停用這些類別。如要瞭解其他提升網頁品質的方法，請保持啟用狀態。
您可以在「節流」部分節流網路和 CPU，這有助於分析載入效能。這個選項與無障礙分數無關，因此您可以選擇偏好的方式。
勾選「清除儲存空間」核取方塊，即可在載入頁面前清除所有儲存空間，或是在頁面載入之間保留儲存空間。這個選項可能也與無障礙分數無關，因此您可以選擇偏好的做法。
按一下「產生報表」。10 到 30 秒後，開發人員工具就會提供報告。報表會提供各種提示，協助您改善網頁的無障礙功能。
按一下稽核項目即可瞭解詳情。
按一下「瞭解詳情」，即可查看該稽核的說明文件。
另請參閱：aXe 擴充功能
您可能偏好使用 aXe 擴充功能或 Lighthouse 擴充功能，而非 Chrome 預設提供的 Lighthouse 面板。 由於 aXe 是 Lighthouse 面板的基礎引擎，因此這兩者通常會提供相同資訊。aXe 擴充功能的 UI 不同，且稽核的描述方式略有差異。
相較於「稽核」面板，aXe 擴充功能的一項優點是可檢查並醒目顯示失敗的節點。
使用裝置工具列測試內容重排
無障礙網頁規範 (WCAG) 重排準則建議，即使視埠大小或方向改變，網頁內容仍應可供檢視，且不會遺失資訊。將內容對齊單一欄位，即可支援使用放大文字的使用者。如要測試內容的重排方式，請在 Lighthouse 面板中，使用裝置工具列動態調整可視區域大小。
如要調整可視區域大小，請將控點拖曳至所需尺寸。如要瞭解具體測試的尺寸，請參閱 WCAG 重排成功標準。
「無障礙」分頁
您可以在「無障礙」分頁中，查看 DOM 節點的無障礙樹狀結構、ARIA 屬性和計算出的無障礙屬性。
如要開啟「無障礙」分頁，請按照下列步驟操作：
- 按一下「元素」面板。
- 在「DOM Tree」中，選取要檢查的元素。
- 按一下「無障礙功能」分頁標籤。這個分頁可能隱藏在「更多分頁」keyboard_double_arrow_right 按鈕後方。
你可以將「無障礙」分頁拖曳到最前面，方便日後快速存取。
查看元素在無障礙樹狀結構中的位置
無障礙功能樹狀結構是 DOM 樹狀結構的子集。其中只包含 DOM 樹狀結構中與在螢幕閱讀器中顯示網頁內容相關且實用的元素。
如要從「無障礙」分頁檢查元素在無障礙樹狀結構中的位置，請切換「顯示無障礙樹狀結構」。
這個切換鈕會以整頁無障礙功能樹狀結構，取代「元素」面板中的 DOM 樹狀結構。這個樹狀結構有助於您進一步瞭解網頁內容如何向輔助技術公開。
如要瀏覽無障礙樹狀結構，可以展開及選取節點，在「Computed properties」(計算屬性)下方查看詳細資料。
您隨時可以切換回 DOM 樹狀結構。對應的 DOM 節點會保持選取狀態。這項功能可協助您瞭解 DOM 節點與無障礙樹狀結構節點之間的對應關係。
查看元素的 ARIA 屬性
ARIA 屬性可確保螢幕閱讀器擁有所有必要資訊，以便正確呈現網頁內容。
在「無障礙」分頁中查看元素的 ARIA 屬性。
查看畫面上的元素來源順序
網頁上的元素不一定會按照來源中的順序顯示。這可能會讓依賴輔助技術瀏覽網路的使用者感到困惑。
如要在網站上查看及偵錯來源訂單，請按照下列步驟操作：
- 檢查網頁上的元素。
- 在「元素」>「無障礙」>「來源順序檢視器」中，勾選「顯示來源順序」check_box。
在檢視區中，開發人員工具會以邊框標示巢狀元素，並標上與來源順序對應的數字。
查看元素的已計算無障礙屬性
瀏覽器會動態計算部分無障礙屬性。您可以在「無障礙」分頁的「計算屬性」部分查看這些屬性。
在「無障礙」分頁中，查看元素的計算無障礙屬性。
「顯示」分頁
使用「算繪」分頁，即可模擬特定 CSS 媒體功能，不必在程式碼或測試環境中手動指定這些功能。這些媒體功能會根據使用者的裝置偏好設定，變更網頁的外觀。如要測試網頁的視覺無障礙功能，請開啟「Rendering」(算繪) 分頁，然後探索下列選項：
- 模擬視覺障礙：透過幾種不同的模擬視覺障礙，查看網頁的呈現方式。
- 模擬 CSS 媒體功能
prefers-color-scheme，查看網頁在啟用深色或淺色模式時的樣貌。許多人認為深色模式是美學選擇，但深色模式做為無障礙工具，證明瞭它在其他方面的實用性。 - 模擬 CSS 媒體類型，以列印或螢幕媒體樣式查看網頁。
- 模擬 CSS 媒體功能
forced-colors，查看使用者代理程式啟用強制色彩模式時，網頁的顯示效果。 - 模擬 CSS 媒體功能
prefers-contrast，以較高、較低或特定對比值查看網頁內容。 - 模擬 CSS 媒體功能
prefers-reduced-motion，以減少動態效果的方式查看網頁內容。部分使用者會因動畫內容而分心或感到噁心。使用這個選項，即可查看網頁在沒有動畫或平滑捲動等功能時的樣貌。 - 模擬 CSS 媒體功能
prefers-reduced-transparency，瞭解使用者要求減少裝置上使用的透明或半透明圖層效果時，網頁內容的顯示方式。
找出並修正低對比文字
開發人員工具可自動找出低對比問題，並建議更合適的顏色，協助您修正問題。詳情請參閱「讓網站更容易閱讀」。