無障礙功能參考資料

Kayce Basques

Sofia Emelianova

本頁將針對 Chrome 開發人員工具中的無障礙功能提供詳盡參考。適用對象：

• 具備開發人員工具的基本知識，例如如何開啟這項工具。
• 熟悉無障礙原則和最佳做法。

本參考資料的目的是協助您探索開發人員工具中的所有工具，協助您檢查頁面的無障礙功能。

如要瞭解如何透過螢幕閱讀器等輔助技術瀏覽 DevTools，請參閱「使用輔助技術導覽 Chrome 開發人員工具」。

如要瞭解開發無障礙網站的方法，請參閱瞭解無障礙工具。

Chrome 開發人員工具的無障礙功能總覽

本節將說明開發人員工具如何在整體無障礙工具工具包中發揮作用。

判斷網頁是否可供存取時，請謹記 2 個一般問題：

1. 我可以使用鍵盤或螢幕閱讀器來瀏覽頁面嗎？
2. 是否已正確標記網頁元素，可供螢幕閱讀器使用？

一般來說，開發人員工具可協助您修正與第 2 題相關的錯誤，因為這類錯誤可以自動且容易偵測。第 1 題也很重要，但開發人員工具無法幫助您。找出第 1 題相關錯誤的唯一方法，就是嘗試自行嘗試使用具有鍵盤或螢幕閱讀器的頁面。詳情請參閱如何進行無障礙功能審查。

稽核網頁的無障礙功能

一般來說，請使用「Lighthouse」面板下方的無障礙檢查功能，判斷以下事項：

• 已為螢幕閱讀器正確標記網頁。
• 網頁上的文字元素具有足夠的對比度。另請參閱「打造更清楚易讀的網站」一文。

如何稽核網頁：

1. 前往要稽核的網址。

2. 在開發人員工具中，按一下「Lighthouse」分頁標籤。開發人員工具會顯示多種設定選項。

   

3. 如果您想模擬行動裝置，請在「裝置」部分選取「行動裝置」。這個選項會改變使用者代理程式字串及調整可視區域的大小。如果行動版網頁與電腦版網頁的顯示方式不同，這個選項可能會對稽核結果造成顯著影響。

4. 在「Lighthouse」區段中，確認已啟用「Accessibility」。如果要從報表中排除其他類別，請停用。如果你想瞭解其他改善網頁品質的方法，請保持啟用狀態。

5. 「Throttling」區段可讓您限制網路和 CPU，以便在分析負載效能時派上用場。這個選項應與無障礙功能分數無關，因此您可以視需要使用。

6. [Clear Storage] (清除儲存空間) 核取方塊可讓您在載入頁面前清除所有儲存空間，或保留網頁載入之間的儲存空間。這個選項可能也與您的無障礙分數無關，因此您可以使用任何偏好。

7. 按一下「產生報表」。開發人員工具會在 10 到 30 秒後提供報告。報表提供了多種訣竅，協助提升網頁的無障礙程度。

   

8. 點選稽核報告即可瞭解詳情。

   

9. 如要查看稽核說明文件，請按一下「瞭解詳情」。

   

另請參閱：aXe 擴充功能

建議您使用 aXe 擴充功能或 Lighthouse 擴充功能，不要使用 Chrome 預設提供的 Lighthouse 面板。 且通常會提供相同的資訊，因為 aXe 是 Lighthouse 面板採用的基礎引擎。aXe 擴充功能有不同的 UI，描述的稽核方式也稍有不同。

aXe 擴充功能擁有「Audits」面板的優點之一，就是可以讓您檢查並找出失敗的節點。

無障礙窗格

「無障礙」窗格可讓您查看 DOM 節點的無障礙樹狀結構、ARIA 屬性和計算出的無障礙屬性。

如要開啟「無障礙」窗格，請按照下列步驟操作：

1. 按一下「元素」分頁標籤。
2. 在「DOM 樹狀結構」中，選取要檢查的元素。
3. 按一下「無障礙設定」分頁標籤。這個分頁可能會隱藏在「更多分頁」按鈕 下方。

查看元素在無障礙樹狀結構中的位置

無障礙樹狀結構是 DOM 樹狀結構的子集。僅包含 DOM 樹狀結構中的元素，這些元素與透過螢幕閱讀器顯示網頁內容相關且有用。

透過「無障礙窗格」檢查元素在無障礙樹狀結構中的位置。

在這個檢視畫面中，您可以只探索單一節點及其祖系。如要探索整個無障礙樹狀結構，請按照下列步驟操作。

(預先發布版) 探索整頁的無障礙功能樹狀結構

您可以運用無障礙樹狀結構的整頁模式探索整個樹狀結構，進一步瞭解輔助技術對於您網頁內容的暴露程度。

如何探索無障礙功能樹狀結構：

1. 勾選「啟用整頁模式無障礙功能樹狀結構」。

2. 在頂端的動作列中，按一下「Reload DevTools」。

   

3. 在「Elements」面板右上角，切換 「Switch to Accessibility Tree view」按鈕。

   

4. 瀏覽無障礙功能樹狀結構。您可以展開節點，或按一下「運算屬性」下方查看詳細資料。

5. 選取節點並按一下「 切換至 DOM 樹狀檢視」按鈕，即可切換回 DOM 樹狀結構。

   現在已選取相應的 DOM 節點。如要瞭解 DOM 節點及其無障礙樹狀結構節點之間的對應關係，這是一個絕佳的方式。

查看元素的 ARIA 屬性

ARIA 屬性可確保螢幕閱讀器能取得所需資訊，以便正確呈現網頁內容。

在無障礙窗格中查看元素的 ARIA 屬性。

查看畫面上的元素來源順序

網頁上的元素不一定會按照來源中的順序顯示。這可能會混淆仰賴輔助技術瀏覽網路的使用者。

如何查看網站上的來源順序並進行偵錯：

1. 檢查頁面中的元素。
2. 在「Elements」 >「Accessibility」 >「Source Order Viewer」中，勾選 「Show source order」。

在可視區域中，開發人員工具會使用邊框醒目顯示巢狀元素，並以數字對應於這些元素的來源順序。

查看元素的無障礙功能屬性

部分無障礙屬性是由瀏覽器動態計算。您可以在「Accessibility」窗格的「Computed Properties」部分中查看這些屬性。

在「無障礙」窗格中查看元素的運算無障礙屬性。

找出並修正低對比度文字

開發人員工具可以自動找出低對比度的問題，並建議更好的顏色來修正這些問題。請參閱「打造更易讀的網站」一文，瞭解詳情。