使用輔助技術瀏覽 Chrome 開發人員工具

Rob Dodson

本指南旨在協助主要依賴螢幕閱讀器等輔助技術的使用者，存取及使用 Chrome 開發人員工具。Chrome 開發人員工具是內建於 Google Chrome 瀏覽器的一套網頁程式開發人員工具，如要瞭解與改善網頁無障礙程度相關的開發人員工具功能，請參閱「無障礙功能參考資料」。

開發人員工具的無障礙功能仍在開發階段。部分面板和分頁標籤較適合搭配輔助技術使用，本指南將逐步說明最容易存取的面板，並醒目顯示您可能遇到的特定問題。

總覽

開始之前，建議您先瞭解開發人員工具的 UI 結構。開發人員工具會分成一系列的「面板」，並以「ARIA tablist」排列。例如：

  • 您可以在「元素」面板中查看及變更 DOM 節點或 CSS。
  • 您可以在控制台面板中讀取 JavaScript 記錄，並即時編輯物件。

每個面板的內容區域內都有許多不同的工具，在說明文件中通常稱為「分頁」或「窗格」。舉例來說，「元素」面板包含其他分頁，可檢查事件監聽器、無障礙樹狀結構等。分頁和窗格之間的區別有些隨意。您只會看到其中一個字詞，這是為了與其他官方開發人員工具說明文件保持一致。

鍵盤快速鍵

開發人員工具鍵盤快速鍵參考資料是實用的速查表。請務必將這篇文章加入書籤，並在探索不同面板時參考。

開啟開發人員工具

如要開始使用，請先閱讀開啟 Chrome 開發人員工具。您可以透過鍵盤快速鍵或選單項目開啟開發人員工具。

瀏覽不同面板

使用鍵盤操作

  • 開啟開發人員工具後，按下 Control+] 鍵或 Command+] 鍵 (Mac)，即可將焦點移至下一個面板。
  • 按下 Control + [ 鍵或 Command + [ 鍵 (Mac)，即可將焦點移至上一個面板。
  • 你也可以使用 Shift+Tab 鍵將焦點移至面板的 tablist，然後使用方向鍵變更面板，但使用先前提及的快速鍵可能更快。

已知問題

  • 部分面板 (例如「控制台」和「效能」面板) 啟用後，焦點可能會立即移至內容區域。這可能會導致難以使用方向鍵瀏覽。
  • 系統會朗讀所選面板的名稱，但前提是必須先朗讀面板中聚焦的內容。因此很容易錯過。

透過指令選單瀏覽

如要聚焦特定面板，請使用指令選單：

  1. 開啟開發人員工具後，按下 Control+Shift+P 鍵或 Command+Shift+P 鍵 (Mac)，開啟指令選單。「指令選單」是模糊搜尋自動完成下拉式方塊。
  2. 輸入要開啟的面板名稱，然後使用 向下鍵導覽至正確的選項。
  3. 按下 Enter 鍵執行指令。

舉例來說，如要開啟「元素」面板，請執行下列指令：

  1. 開啟指令選單。
  2. 依序輸入 E 和 L。已選取「面板」>「顯示元素」選項。
  3. 按下 Enter 鍵執行指令，開啟面板。

以這種方式開啟面板時，焦點會直接移至面板內容。如果是「元素」面板，焦點會移至 DOM 樹狀結構。

「元素」面板

檢查網頁上的元素

  1. 使用螢幕閱讀器的游標，前往要檢查的元素。
  2. 模擬在元素上按一下滑鼠右鍵，開啟內容選單。
  3. 選擇「檢查」選項。這會開啟「元素」面板，並將焦點放在 DOM 樹狀結構中的元素。

「DOM 樹狀結構」會以 ARIA tree 形式呈現。如需範例，請參閱「使用鍵盤瀏覽 DOM 樹狀結構」。

複製 DOM 樹狀結構中元素的程式碼

  1. 在 DOM 樹狀結構中，將焦點放在節點上，然後開啟右鍵內容選單。
  2. 展開「複製」選項。
  3. 選取「複製 outerHTML」。

已知問題

  • 複製 outerHTML 通常不會選取目前節點，而是選取父項節點。 不過，元素內容仍應位於複製的 outerHTML 中。

修改 DOM 樹狀結構中元素的屬性

  • 將焦點放在「DOM 樹狀結構」中的節點上，然後按下 Enter 鍵，即可編輯節點。
  • 按下 Tab 鍵即可在屬性值之間移動。聽到「空格」時，表示你位於空白文字輸入欄中，可以輸入新的屬性值。
  • 按下 Ctrl+Enter 鍵或 Command+Enter 鍵 (Mac)，即可接受變更並聆聽元素的所有內容。

已知問題

  • 在文字輸入框中輸入文字時，系統不會提供任何意見回饋。如果輸入內容有錯字，並使用方向鍵瀏覽輸入內容，系統也不會提供意見回饋。如要輕鬆檢查工作，請接受變更，然後聆聽系統朗讀整個元素。

編輯 DOM 樹狀結構中元素的 HTML

  • 將焦點放在「DOM 樹狀結構」中的節點上，然後按下 Enter 鍵，即可編輯節點。
  • 按下 Tab 鍵即可在屬性值之間移動。聽到元素名稱 (例如「h2」) 時，表示你位於文字輸入內容中，可以變更元素類型。
  • 按下 Ctrl+Enter 鍵或 Command+Enter 鍵 (Mac)，即可接受變更。

舉例來說，輸入 h3 並按下 Control+Enter 鍵或 Command+Enter 鍵 (Mac)，即可將元素的開始和結束標記變更為 h3。

「元素」面板分頁

「元素」面板包含其他分頁，可檢查套用至元素的 CSS 或元素在無障礙樹狀結構中的位置等項目。

  • 將焦點放在 DOM 樹狀結構中的節點上，然後按 Tab 鍵，直到聽到系統選取「樣式」窗格為止。
  • 使用向右鍵探索其他可用分頁。

DOM 樹狀結構會將含有 href 屬性的元素轉換為可聚焦的連結，因此您可能需要多次按下 Tab 鍵，才能前往「樣式」窗格。

已知問題

「DOM Breakpoints」(DOM 中斷點) 和「Properties」(屬性) 分頁無法透過鍵盤存取。

「樣式」窗格

在「樣式」窗格中，您可以找到篩選樣式、切換元素狀態 (例如 :active 和 :focus)、切換類別，以及新增類別的控制項。此外，您也可以使用強大的樣式檢查工具，探索及修改目前套用至DOM 樹狀結構中焦點元素的樣式。

瞭解「樣式」窗格的重要概念：這個窗格只會顯示 DOM 樹狀結構中目前所選節點的樣式。舉例來說，假設您已檢查完 <header> 節點的樣式，現在想查看 <footer> 節點的樣式。如要這麼做，請先在 DOM 樹狀結構中選取 <footer> 節點。您可能會發現，使用「檢查」工作流程檢查 footer 節點附近的一般節點 (例如頁尾中的連結)，可更快找出感興趣的確切節點，因為這樣會將焦點放在 DOM 樹狀結構上，然後您就能使用鍵盤導覽至該節點。

瀏覽「樣式」窗格

因為所有樣式工具都會以某種方式連結回「樣式」窗格，所以建議您先熟悉這個工具。

  • 將焦點放在「樣式」窗格上，然後按 Tab 鍵將焦點移至窗格內，並瀏覽內容。
  • 按 Tab 鍵，直到第一個樣式處於啟用狀態。如果您使用螢幕閱讀器，系統會將第一個樣式讀出為「element.style {}」。
  • 按向下鍵，依特定順序瀏覽樣式清單。螢幕閱讀器會朗讀每個樣式，從 CSS 檔案名稱、樣式出現的行號，以及樣式名稱本身開始。例如：「main.css:233 .card__img {}」
  • 按下 Enter 鍵，即可查看樣式的詳細資訊。焦點會移至可編輯的樣式名稱版本。
  • 按 Tab 鍵可在各個 CSS 屬性的可編輯版本及其對應值之間移動。每個樣式區塊的結尾都有空白的可編輯文字欄位，您可以在其中新增其他 CSS 屬性。
  • 你可以繼續按 Tab 鍵瀏覽樣式清單，或按 Escape 鍵結束這個模式，然後使用方向鍵瀏覽。

如需其他快速鍵，請務必詳閱樣式窗格鍵盤參考資料。

已知問題
  • 如果使用「篩選」可編輯文字欄位，將無法再瀏覽樣式清單。

切換元素狀態

如要切換元素狀態，例如 :active 或 :focus：

  1. 前往「樣式」窗格，然後按 Tab 鍵，直到焦點移至「切換元素狀態」按鈕。
  2. 按下 Enter 鍵，展開元素狀態集合。元素狀態會以一組核取方塊的形式呈現。
  3. 按 Tab 鍵，直到焦點移至第一個狀態 :active。
  4. 按下空格鍵即可啟用。如果 DOM 樹狀結構中目前選取的元素具有 :active 樣式，系統現在會套用該樣式。
  5. 繼續按 Tab 鍵，即可瀏覽所有可用狀態。

新增要退出的課程

「切換元素狀態」按鈕旁邊是「元素類別」按鈕。按下 Tab 鍵，然後按 Enter 鍵，將焦點移至該按鈕。焦點會移至標示為「新增類別」的編輯文字欄位。

「元素類別」按鈕主要用於將現有類別新增至元素。舉例來說，如果樣式表包含名為 .clearfix 的輔助類別，您可以在編輯文字欄位中按下 .，查看類別建議清單，並使用向下鍵尋找 .clearfix 建議。或者自行輸入類別名稱，然後按下 Enter 鍵套用。

新增樣式規則

「元素類別」按鈕旁邊是「新增樣式規則」按鈕。按下 Tab 鍵將焦點移至該按鈕，然後按下 Enter 鍵。焦點會移至樣式檢查器內的可編輯文字欄位。欄位的初始文字內容是 DOM 樹狀結構中選取元素的標記名稱。您可以在這個欄位中輸入任何類別名稱，然後按 Tab 鍵，為該類別指派 CSS 屬性。

「計算樣式」分頁

將焦點放在「已計算」分頁上，然後按 Tab 鍵將焦點移至該分頁內，並瀏覽內容。在「已計算」分頁中，您可以透過控制項，依據特定性探索實際套用至元素的 CSS 屬性。

探索所有計算樣式

按 Tab 鍵，直到移至計算樣式集合。這些項目會以 ARIA tree 呈現。展開清單方塊後，即可查看哪些 CSS 選擇器套用了計算樣式。這些選取器會依據特異性排序。螢幕閱讀器會朗讀計算值、目前相符的 CSS 選擇器、包含選擇器的樣式表檔案名稱，以及選擇器的行號。

已知問題

  • 如果使用「篩選器」文字欄位，您將無法再檢查樣式。

「事件監聽器」分頁

在「元素」面板中，您可以使用「事件監聽器」分頁標籤，檢查套用至元素的事件監聽器。將焦點放在「樣式」窗格上，然後按下「向右鍵」，即可前往「事件監聽器」分頁。

探索事件監聽器

事件監聽器會以 ARIA tree 呈現。你可以使用方向鍵瀏覽這些選項。螢幕閱讀器會播報事件監聽器附加的 DOM 物件名稱，以及定義事件監聽器的檔案名稱和行號。

「無障礙」窗格

將焦點放在「無障礙」窗格，然後按 Tab 鍵將焦點移至窗格內，並瀏覽內容。在「無障礙」窗格中，您可以透過控制項探索無障礙樹狀結構、套用至元素的 ARIA 屬性，以及計算出的無障礙屬性。

無障礙樹狀結構

無障礙樹狀結構會以 ARIA tree 呈現，其中每個 treeitem 都對應至 DOM 中的元素。樹狀結構會公布所選節點的計算角色。樹狀結構中的 div 和 span 等一般元素會宣告為「GenericContainer」。使用方向鍵即可遍歷樹狀結構，並探索父項與子項之間的關係。

已知問題

  • 無障礙窗格使用的 ARIA 樹狀結構類型，可能無法在 Chrome for macOS 螢幕閱讀器 (例如 VoiceOver) 中正確顯示。訂閱 Chromium 問題 #868480，即可掌握這個問題的進展。
  • 「ARIA 屬性」和「計算屬性」部分標示為 ARIA 樹狀結構，但目前沒有焦點管理功能，因此無法透過鍵盤操作。

「稽核」面板

您可以在「稽核」面板中對網站執行一系列測試，檢查與效能、無障礙、SEO 和其他類別相關的常見問題。

設定及執行稽核

  1. 首次開啟「稽核」面板時，焦點會放在表單結尾的「執行稽核」按鈕上。根據預設，表單會設定為使用模擬 3G 連線，在行動裝置上模擬執行各類別的稽核。
  2. 使用 Shift+Tab 鍵或在瀏覽模式中返回，即可變更稽核設定。
  3. 準備好執行稽核時，請返回「執行稽核」按鈕，然後按下 Enter 鍵。
  4. 焦點會移至含有「取消」按鈕的強制回應視窗，方便您結束稽核。稽核作業執行時，系統可能會發出一連串的音效，並多次重新整理頁面。

已知問題

  • 設定表單的不同部分目前並未以 fieldset 元素標記。建議使用「瀏覽」模式，找出與各節相關聯的控制項。
  • 稽核作業完成後，不會有音效或即時區域公告。一般來說，系統會在 30 秒內完成這項作業，屆時您應該就能前往查看結果。使用「瀏覽」模式可能是最簡單的結果存取方式。

瀏覽稽核報告

稽核報告會依稽核類別分成不同部分。報表隨即開啟，並列出各類別的分數。這些分數也是連結，可用於跳至相關章節。每個區段內都有可展開的 details 元素，其中包含通過或未通過稽核的相關資訊。根據預設，系統只會顯示失敗的稽核。 每個部分結尾都會有最終的 details 元素，其中包含所有通過的稽核。

如要執行新的稽核，請按 Shift+Tab 鍵離開報告，然後尋找「執行稽核」按鈕。