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

Rob Dodson

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

開發人員工具的無障礙功能仍在開發階段。部分面板和分頁的 AT 支援度較高，本指南將逐步說明最容易存取的面板，並醒目顯示您可能遇到的特定問題。

總覽

開發人員工具會分成一系列「面板」，並以「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 並按下 Ctrl+Enter 鍵或 Command+Enter 鍵 (Mac)，即可將元素的開始和結束標記變更為 h3。

「元素」面板分頁

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

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

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

已知問題

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

「樣式」窗格

在「樣式」窗格中，您可以找到篩選樣式、切換元素狀態 (例如 :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」。使用方向鍵即可在樹狀結構中移動，並探索父項與子項之間的關係。

已知問題

  • macOS 螢幕閱讀器 (例如 VoiceOver) 可能無法使用「無障礙」窗格所用的 ARIA 樹狀結構類型。訂閱 Chromium 問題 #868480，即可掌握這個問題的進展。
  • 「ARIA 屬性」和「計算屬性」部分會標示為 ARIA 樹狀結構，但不包含焦點管理。這表示這些區段無法透過鍵盤操作。

「稽核」面板

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

設定及執行稽核

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

已知問題

  • 設定表單的不同區段未以 fieldset 元素標記。建議使用「瀏覽」模式瀏覽這些控制項，找出與各節相關的控制項。
  • 稽核完成時，不會有耳標或即時區域公告。一般來說，這項作業大約需要 30 秒，完成後您應該就能前往查看結果。使用「瀏覽」模式快速查看結果。

瀏覽稽核報告

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

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