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

羅伯杜森

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

開發人員工具的無障礙功能仍在開發中，某些面板和分頁搭配輔助技術的效果較佳。本指南將逐步說明最為方便使用的面板，並點出您在過程中可能會遇到的特定問題。

總覽

開始之前，最好先瞭解開發人員工具 UI 的結構，開發人員工具分為一系列面板，整理成 ARIA tablist。例如：

每個面板的內容區域都有幾種不同的工具，通常在說明文件中稱為「分頁」或「窗格」。舉例來說，「Elements」(元素) 面板包含其他分頁，供您檢查事件監聽器、無障礙功能樹狀結構等。分頁與窗格之間的差別有點像。系統只會顯示某個字詞或其他字詞，藉此與官方開發人員工具說明文件的其餘部分保持一致。

鍵盤快速鍵

開發人員工具鍵盤快速鍵參考資料是一項實用的一覽表。瀏覽不同面板時，請務必將小工具加入書籤，方便日後參考。

開啟開發人員工具

首先，請詳閱開啟 Chrome 開發人員工具。您可以透過鍵盤快速鍵或選單項目開啟開發人員工具。

瀏覽不同面板

依鍵盤瀏覽

  • 開啟開發人員工具後，按下 Control + ] 鍵或 Command + ] 鍵 (Mac)，即可將焦點移至下一個面板。
  • 按下 Control + [ 鍵或 Command + [ 鍵 (Mac) 即可將焦點移至上一個面板。
  • 您也可以使用 Shift + Tab 鍵，將焦點移至面板的 tablist，然後使用方向鍵變更面板，不過使用上述快速鍵可能會比較快。

已知問題

  • 部分面板 (例如「Console」(主控台) 和「Performance」(效能) 面板) 可能會在啟用後立即移至內容區域。這可能會導致使用者難以透過方向鍵瀏覽。
  • 系統會朗讀所選面板的名稱，但必須先在面板中讀取聚焦的內容後。不容易遭到忽略。

瀏覽指令選單

如要將焦點移至特定面板，請使用指令選單：

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

舉例來說，如要開啟「Elements」(元素) 面板：

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

使用這種開啟面板的方式，即可將焦點移至面板本身的內容。在「Elements」面板上，焦點會移至「DOM Tree」。

元素面板

檢查網頁上的元素

  1. 使用螢幕閱讀器的遊標，瀏覽至您要檢查的元素。
  2. 在元素上模擬右鍵按一下，即可開啟內容選單。
  3. 選擇「檢查」選項。這個動作會開啟「Elements」(元素) 面板，並聚焦在「DOM Tree」(DOM 樹狀結構) 中的元素。

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

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

  1. 關注 DOM 樹狀結構中的節點時，顯示右鍵內容選單。
  2. 展開「Copy」選項。
  3. 選取「複製 outerHTML」。

已知問題

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

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

  • 焦點位於 DOM 樹狀結構中的節點時，按下 Enter 鍵即可編輯。
  • 按 Tab 鍵可在屬性值之間移動。當您聽到「space」出現在空白文字輸入中，可以輸入新的屬性值。
  • 按下 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 Tree」中目前選取的節點的樣式。舉例來說，假設您已檢查 <header> 節點的樣式，但現在想查看 <footer> 節點的樣式。如要這麼做，您必須先在「DOM 樹狀結構」中選取 <footer> 節點。您可能會發現，利用「Inspect」(檢查) 工作流程檢查一般位於 footer 節點一般位置的節點 (例如頁尾中的連結)，並聚焦於 DOM Tree，然後使用鍵盤前往想查看的節點，就能解決問題。

瀏覽「Styles」窗格

由於所有樣式工具都是以單向或另一個方式連線，返回「Styles」窗格，因此需要先成為這項工具的專家。

  • 當焦點位於「Styles」窗格時，按下 Tab 鍵即可將焦點移至內部並探索其內容。
  • 持續按 Tab 鍵，直到第一個樣式生效。如果使用螢幕閱讀器，這個第一個樣式會宣告為「element.style {}」。
  • 按向下鍵依特定順序瀏覽樣式清單。螢幕閱讀器會以 CSS 檔案名稱、顯示樣式的行號和樣式名稱開頭來朗讀每種樣式。例如：「main.css:233 .card__img {}」
  • 按下 Enter 鍵即可詳細檢查樣式。焦點會從樣式名稱的可編輯版本開始。
  • 按下 Tab 鍵，即可在各個 CSS 屬性的可編輯版本及其對應的值之間移動。每個樣式區塊結尾都是空白的可編輯文字欄位，可用於新增其他 CSS 屬性。
  • 您可以繼續按下 Tab 鍵來瀏覽樣式清單，或按下 Esc 鍵退出這個模式，然後返回按方向鍵瀏覽。

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

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

切換元素狀態

如何切換元素的狀態 (例如 :active 或 :focus)：

  1. 前往「Styles」窗格，然後按下 Tab 鍵，直到焦點移至「Toggle Element State」(切換元素狀態) 按鈕。
  2. 按下 Enter 鍵即可展開元素狀態集合。元素狀態以核取方塊群組表示。
  3. 按下 Tab 鍵，直到第一個狀態 (:active) 處於焦點狀態。
  4. 按空格鍵即可啟用。如果目前在 DOM 樹狀結構中選取的元素具有 :active 樣式，則系統會套用該樣式。
  5. 繼續按下 Tab 鍵來探索所有可用狀態。

新增離開課程

「Toggle Element State」(切換元素狀態) 按鈕旁邊的是「Element Classes」(元素類別) 按鈕。按下 Tab 鍵和 Enter 鍵，將焦點移至該項目。焦點會移至標示「Add New Class」的編輯文字欄位。

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

新增樣式規則

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

運算分頁

焦點位於「Computed」(運算) 分頁時，按下 Tab 鍵可將焦點移至內部並探索其內容。在「運算」分頁中，您可以透過控制項探索實際將哪些 CSS 屬性套用至元素。

探索所有運算樣式

按 Tab 鍵，直到移至「運算樣式」集合。會以 ARIA tree 的形式呈現。展開清單方塊會顯示哪些 CSS 選取器套用了計算的樣式。這些選取器是按照特定性排序。螢幕閱讀器會讀出計算的值，包括目前比對的 CSS 選取器、包含選取器的樣式表檔案名稱，以及選取器的行號。

已知問題

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

事件監聽器分頁

在「Elements」面板中，您可以使用「Event Listeners」分頁標籤，檢查套用至元素的事件監聽器。當焦點位於「Styles」(樣式) 窗格時，按下向右鍵即可前往「Event Listeners」(事件監聽器) 分頁。

探索事件監聽器

事件監聽器會顯示為 ARIA tree。可使用方向鍵瀏覽。螢幕閱讀器會朗讀要附加事件監聽器的 DOM 物件名稱，以及定義事件監聽器的檔案名稱和行號。

無障礙窗格

當焦點位於「Accessibility」窗格時，按下 Tab 鍵即可將焦點移至內部，並探索其內容。「Accessibility」窗格中的控制項可用於探索無障礙樹狀結構、套用至元素的 ARIA 屬性，以及該元素的經過計算的無障礙功能屬性。

無障礙樹狀結構

無障礙功能樹狀結構會以 ARIA tree 的形式呈現，其中每個 treeitem 都對應 DOM 中的元素。樹狀結構會公告所選節點的運算角色。一般元素 (例如 div 和 span) 會在樹狀結構中宣告為「GenericContainer」。使用方向鍵即可掃遍樹狀結構，並探索父項-子項關係。

已知問題

  • 「Accessibility」窗格使用的 ARIA 樹狀結構類型可能無法在 Chrome 中正確顯示 macOS 螢幕閱讀器 (例如 VoiceOver)。訂閱 Chromium 問題 #868480，進一步瞭解這個問題的處理進度。
  • 「ARIA 屬性」和「運算屬性」部分會標示為 ARIA 樹狀結構，但他們目前沒有聚焦管理，因此無法使用鍵盤。

稽核面板

「稽核」面板可讓您針對網站執行一系列測試，針對效能、無障礙功能、搜尋引擎最佳化 (SEO) 和其他多種類別找出常見問題。

設定並執行稽核

  1. 初次開啟「Audits」(稽核) 面板時，焦點會放在表單末端的「Run Audit」(執行稽核) 按鈕上。根據預設，表單會設定為在模擬 3G 連線上使用行動裝置模擬，為每個類別執行稽核。
  2. 使用 Shift + Tab 鍵，或在「瀏覽模式」中返回，變更稽核設定。
  3. 準備好執行稽核時，請返回 [Run Audit] (執行稽核) 按鈕，然後按下 Enter 鍵。
  4. 將焦點移至互動視窗，並按下「Cancel」按鈕，結束稽核作業。在稽核執行並多次重新整理頁面時，您可能會聽到一連串音效。

已知問題

  • 設定表單的不同部分目前並未使用 fieldset 元素加上標記。在「瀏覽」模式中瀏覽這些項目時，您更容易找出與各個區段相關聯的控制項。
  • 稽核完成之後，系統不會發出提示音效或即時區域通知。一般來說，約需 30 秒的時間，之後您應該就能瀏覽結果。如要取得結果，使用瀏覽模式可能最簡單。

瀏覽稽核報告

稽核報告是依照各個稽核類別而分為不同的區段。報表會隨即開啟，並顯示每個類別的分數清單。這些分數也可供點選的連結，可直接跳到相關章節。每個區段中都是可展開的 details 元素，其中包含已通過或失敗稽核的相關資訊。根據預設，系統只會顯示失敗的稽核結果。每個區段都有最終的 details 元素，其中包含所有通過的稽核。

如要執行新稽核，請使用 Shift + Tab 鍵退出報表，然後找出「Perform An Audit」按鈕。