本指南旨在協助主要依賴螢幕閱讀器等輔助技術的使用者存取及使用 Chrome 開發人員工具。Chrome 開發人員工具是一組內建於 Google Chrome 瀏覽器的網頁程式開發人員工具。如要瞭解與改善網頁無障礙程度相關的開發人員工具功能，請參閱無障礙功能參考資料。
我們正在努力改善開發人員工具的無障礙功能。部分面板和分頁與輔助技術的搭配效果比其他面板和分頁更好。本指南將逐步說明最容易存取的面板，並強調您可能會遇到的特定問題。
總覽
在開始之前，建議您先瞭解 DevTools UI 的結構。開發人員工具會分為一系列面板，並以 ARIA tablist 的形式進行分類。例如：
在每個面板的內容區域中，有許多不同的工具，在說明文件中通常稱為「分頁」或「窗格」。舉例來說，元素面板包含其他分頁，可用於檢查事件監聽器、無障礙樹狀結構等。分頁和窗格之間的差異相當模糊。您會看到這兩個術語的原因，是為了與其他官方開發人員工具說明文件保持一致。
鍵盤快速鍵
開發人員工具鍵盤快速鍵參考資料是實用的速查表。請務必將其加入書籤，並在探索不同面板時參考。
開啟開發人員工具
如要開始使用，請參閱「開啟 Chrome 開發人員工具」一文。您可以透過鍵盤快速鍵或選單項目開啟開發人員工具。
瀏覽不同面板
使用鍵盤導覽
- 開啟「開發人員工具」後，按下 Control + ] 或 Command + ] 鍵 (Mac)，即可將焦點移至下一個面板。
- 按下 Control + [ 或 Command + [ 鍵 (Mac)，即可將焦點移至上一個面板。
- 您也可以使用 Shift + Tab 鍵將焦點移至面板的
tablist，然後使用方向鍵變更面板，不過使用前述的快速鍵可能會更快。
已知問題
- 部分面板 (例如「控制台」和「成效」面板) 可能會在啟用後立即將焦點移至內容區域。這可能會導致使用方向鍵瀏覽時遇到困難。
- 系統會朗讀所選面板的名稱，但只有在朗讀面板中已聚焦的內容後才會朗讀。因此很容易錯過。
透過指令選單導覽
如要聚焦特定面板，請使用指令選單：
- 開啟開發人員工具後，按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac)，即可開啟指令選單。指令選單是模糊搜尋自動完成的組合方塊。
- 輸入要開啟的面板名稱，然後使用「向下箭頭」鍵盤前往正確的選項。
- 按下 Enter 鍵執行指令。
舉例來說，如要開啟「元素」面板，請按照下列步驟操作：
- 開啟指令選單。
- 輸入 E 後輸入 L。已選取「面板」>「顯示元素」選項。
- 按下 Enter 鍵執行指令，開啟面板。
以這種方式開啟面板會將焦點導向面板本身的內容。如果是「元素」面板，焦點會移至「DOM 樹狀結構」。
「元素」面板
檢查網頁上的元素
- 使用螢幕閱讀器的游標，前往要檢查的元素。
- 模擬在元素上按一下滑鼠右鍵，開啟內容選單。
- 選擇「檢查」選項。這會開啟「元素」面板，並將焦點放在「DOM 樹狀圖」中的元素。
DOM 樹狀結構會以 ARIA tree 的形式排版。如需範例，請參閱「使用鍵盤瀏覽 DOM 樹狀結構」。
複製 DOM 樹狀結構中元素的程式碼
- 將焦點放在 DOM 樹狀結構中的節點，即可顯示右鍵內容選單。
- 展開「複製」選項。
- 選取「複製 outerHTML」。
已知問題
- 複製 outerHTML 通常不會選取目前節點，而是選取其父項。不過，元素的內容仍應位於複製的 outerHTML 中。
修改 DOM 樹狀結構中元素的屬性
- 將焦點放在 DOM 樹狀結構中的節點上，然後按下 Enter 鍵，即可編輯該節點。
- 按下 Tab 鍵，即可在屬性值之間移動。當您聽到「空格」時，表示您正在空白文字輸入內容中，可以輸入新的屬性值。
- 按下 Control + Enter 鍵或 Command + Enter 鍵 (Mac) 即可接受變更，並聽取元素的完整內容。
已知問題
- 在文字輸入框中輸入內容時，您不會收到任何回饋。如果輸入錯字，並使用方向鍵瀏覽輸入內容，您也不會收到任何意見回饋。如要檢查您的工作，最簡單的方法是接受變更，然後等待整個元素的宣告。
編輯 DOM 樹狀結構中元素的 HTML
- 將焦點放在 DOM 樹狀結構中的節點上，然後按下 Enter 鍵，即可編輯該節點。
- 按下 Tab 鍵，即可在屬性值之間移動。當您聽到元素名稱 (例如「h2」) 時，表示您正在文字輸入內容中，可以變更元素類型。
- 按下 Control + Enter 鍵或 Command + Enter 鍵 (Mac) 即可接受變更。
舉例來說，輸入 h3 並按下 Control + Enter 鍵或 Command + Enter 鍵 (Mac)，即可將元素的開頭和結尾標記變更為 h3。
「元素」面板分頁
「Elements」面板包含其他分頁，可用於檢查 CSS 套用至元素的情況，或元素在無障礙樹狀結構中的位置。
- 當焦點位於 DOM 樹狀結構中的節點時，請按 Tab 鍵，直到聽到系統選取「Styles」窗格為止。
- 使用向右鍵可瀏覽其他可用分頁。
DOM 樹狀結構會將具有 href 屬性的元素轉換為可聚焦的連結，因此您可能需要按下 Tab 鍵多次，才能前往「樣式」窗格。
已知問題
無法透過鍵盤存取「DOM 中斷點」和「屬性」分頁。
「Styles」窗格
在「樣式」窗格中，您可以找到用於篩選樣式、切換元素狀態 (例如 :active 和 :focus)、切換類別，以及新增類別的控制項。此外，還有強大的樣式檢查工具，可探索及修改目前套用至 DOM 樹狀結構中焦點元素的樣式。
關於「Styles」窗格，您需要瞭解的重要概念是，它只會顯示 DOM 樹狀結構中目前所選節點的樣式。舉例來說，假設您已檢查 <header> 節點的樣式，現在想查看 <footer> 節點的樣式。為此，您必須先在 DOM 樹狀結構中選取 <footer> 節點。您可能會發現，使用檢查工作流程檢查 footer 節點附近的節點 (例如頁尾中的連結) 會比較快速，這可將焦點放在 DOM 樹狀結構上，然後使用鍵盤前往您感興趣的確切節點。
瀏覽「樣式」窗格
由於所有樣式工具都會以某種方式連結至「樣式」窗格，因此建議您先熟悉這個工具。
- 將焦點放在「Styles」窗格上，然後按下 Tab 鍵，即可將焦點移至內部並瀏覽內容。
- 按 Tab 鍵，直到第一個樣式啟用為止。如果您使用螢幕閱讀器，系統會以「element.style {}」的形式宣讀這第一個樣式。
- 按下向下鍵，即可依特定順序瀏覽樣式清單。螢幕閱讀器會以 CSS 檔案名稱、樣式出現的列數和樣式名稱開始，逐一朗讀每個樣式。例如："main.css:233 .card__img {}"
- 按下 Enter 鍵，即可進一步檢視樣式。焦點會從可編輯的樣式名稱版本開始。
- 按下 Tab 鍵，即可在每個 CSS 屬性的可編輯版本和對應值之間移動。每個樣式區塊的結尾都有一個可編輯的空白文字欄位，可用來新增其他 CSS 屬性。
- 您可以繼續按 Tab 鍵瀏覽樣式清單，也可以按 Escape 鍵退出這個模式，並改用方向鍵瀏覽。
如需其他快速鍵，請務必參閱 「Styles」窗格鍵盤參考資料。
已知問題
- 如果您使用「Filter」可編輯文字欄位，就無法再瀏覽樣式清單。
切換元素狀態
如要切換元素狀態 (例如 :active 或 :focus)，請按照下列步驟操作：
- 前往「Styles」窗格，然後按 Tab 鍵，直到「Toggle Element State」按鈕獲得焦點。
- 按下 Enter 鍵，展開元素狀態集合。元素狀態會以一組核取方塊呈現。
- 按下 Tab 鍵，直到第一個狀態
:active獲得焦點。 - 按下空格鍵即可啟用。如果 DOM 樹狀結構中目前選取的元素具有
:active樣式，系統現在會套用該樣式。 - 繼續按下 Tab 鍵，即可瀏覽所有可用的狀態。
新增退出類別
「切換元素狀態」按鈕旁邊是「元素類別」按鈕。按下 Tab 鍵，然後按 Enter 鍵，將焦點移至該按鈕。焦點會移至「Add New Class」標籤的編輯文字欄位。
「Element Classes」按鈕主要用於將現有類別新增至元素。舉例來說，如果樣式表包含名為 .clearfix 的輔助類別，您可以按下編輯文字欄中的 .，查看建議的類別清單，然後使用向下箭頭找出 .clearfix 建議。或者，您也可以自行輸入類別名稱，然後按下 Enter 鍵套用。
新增樣式規則
「元素類別」按鈕旁邊是「新增樣式規則」按鈕。按下 Tab 鍵，然後按下 Enter 鍵，將焦點移至該項目。焦點會移至樣式檢查器內的可編輯文字欄位。欄位的初始文字內容是 DOM 樹狀結構中所選元素的標記名稱。您可以在此欄位中輸入任何所需的類別名稱，然後按下 Tab 鍵，將 CSS 屬性指派給該類別。
「Computed」分頁
將焦點放在「Computed」分頁上，按下 Tab 鍵，將焦點移至內部並查看內容。在「Computed」分頁中，您可以透過控制項探索哪些 CSS 屬性實際套用至元素，並依特定順序排列。
探索所有計算樣式
按 Tab 鍵，直到看到已計算的樣式集合。這些會以 ARIA tree 的形式顯示。展開清單框後，即可查看哪些 CSS 選取器會套用計算式樣式。這些選取器會依據特定性排序。螢幕閱讀器會朗讀計算值、CSS 選取器目前比對的項目、包含選取器的樣式表格檔案名稱，以及選取器的行號。
已知問題
- 如果您使用「Filter」文字欄位，就無法再檢查樣式。
「事件監聽器」分頁
您可以在「元素」面板中，使用「事件監聽器」分頁檢查套用至元素的事件監聽器。將焦點放在「Styles」窗格上，按下「Right Arrow」，前往「Event Listener」分頁。
探索事件監聽器
事件監聽器會以 ARIA tree 的形式顯示。您可以使用方向鍵瀏覽這些項目。螢幕閱讀器會朗讀事件監聽器附加至的 DOM 物件名稱，以及定義事件監聽器的檔案名稱和行號。
無障礙窗格
將焦點放在「無障礙」窗格上，按下 Tab 鍵，將焦點移至該窗格並探索內容。在「無障礙」窗格中，您可以透過控制項探索無障礙樹狀圖、套用至元素的 ARIA 屬性，以及計算出的無障礙屬性。
無障礙功能樹狀結構
無障礙樹狀結構會以 ARIA tree 的形式呈現，其中每個 treeitem 都會對應至 DOM 中的元素。樹狀圖會宣告所選節點的計算角色。div 和 span 等通用元素會在樹狀結構中宣告為「GenericContainer」。使用方向鍵瀏覽樹狀結構，並探索父子關係。
已知問題
- 無障礙窗格使用的 ARIA 樹狀結構類型，可能無法在 Chrome for macOS 中正確顯示給 VoiceOver 等螢幕閱讀器。訂閱 Chromium 問題 #868480，即可瞭解這個問題的處理進度。
- 「ARIA 屬性」和「計算屬性」部分已標示為 ARIA 樹狀結構，但目前沒有焦點管理功能，因此無法透過鍵盤操作。
「稽核」面板
您可以使用「稽核」面板，針對網站執行一系列測試，檢查效能、無障礙設定、SEO 和其他類別的常見問題。
設定及執行稽核
- 首次開啟「稽核」面板時，焦點會放在表單結尾處的「執行稽核」按鈕。根據預設，表單會針對模擬 3G 連線的行動模擬，為每個類別執行稽核作業。
- 使用 Shift + Tab 鍵或在瀏覽模式下返回，即可變更稽核設定。
- 準備執行稽核作業時，請返回「執行稽核」按鈕，然後按下 Enter 鍵。
- 焦點會移至模態視窗，其中包含「取消」按鈕，可讓您退出稽核作業。稽核執行並重新整理網頁多次時，您可能會聽到一系列耳機符號。
已知問題
- 目前設定表單的不同部分並未標示
fieldset元素。在瀏覽模式下瀏覽這些設定可能會比較容易，這樣您就能瞭解哪些控制項與各個部分相關。 - 稽核作業完成後，系統不會播放耳機提示或直播區域公告。一般來說，這項作業大約需要 30 秒，之後您應該就能前往結果頁面。使用瀏覽模式可能是取得結果最簡單的方式。
瀏覽稽核報告
稽核報告會分成各個稽核類別的相關部分，報表會隨即開啟，並列出每個類別的評分。這些分數也是連結，可用於跳至相關章節。每個部分都包含可展開的 details 元素，其中包含通過或失敗的稽核相關資訊。根據預設，系統只會顯示失敗的稽核項目。每個部分結尾處都會包含最終的 details 元素，其中包含所有通過的稽核項目。
如要執行新的稽核作業，請按 Shift + Tab 鍵退出報表，然後找出「Perform An Audit」按鈕。