確認開發人員工具的存取便利性

已完成

測試不同用戶端與檢視中的網頁，與在瀏覽器中進行此測試一樣重要。 此測試可能無法在所有情境中執行，也可能遺漏掉使用者雖有使用瀏覽器，但可能有其他失能問題的狀況。 所幸仍有一些工具可以讓開發人員用於測量您頁面的存取便利性。

對比檢查程式

色盲人士可能完全無法分辨色彩，或不太能區分近似色。 萬維網聯合會（W3C）是網路的標準組織，建立了 色彩對比的分級系統。

手動選擇正確的色彩來確保您頁面的存取便利性，可能不易達成。 您可以使用下列工具產生適當的色彩並測試您的網站，確認其是否合規：

• 調色盤產生工具：
  • Adobe Color，這是測試色彩組合的互動式工具
  • 色彩安全，這是根據選取的背景色彩產生文字色彩的工具
• 合規性檢查程式：
  • 可用於測試頁面的瀏覽器延伸模組：
    • 邊緣：WCAG 色彩對比檢查工具
    • Firefox：WCAG 對比檢查工具
    • Chrome：色彩對比檢查工具
  • 應用程式：
    • 色彩對比分析器 （CCA）

燈塔

Lighthouse 是 Google 為分析網站所製作的工具。 因為這已是大多數人常用的工具，所以已包含在許多瀏覽器的開發人員工具中。 Lighthouse 可以檢查頁面的搜尋引擎最佳化 (SEO)、負載效能及其他最佳做法。 此外也可以分析頁面，為其目前的存取便利性評分。

注意

和其他自動化工具一樣，您不應將 Lighthouse 的分數作為頁面存取便利性的唯一指標， 但對於尋找問題加以補救而言，這是一個很好的入手點。

練習：產生頁面的 Lighthouse 存取便利性分數

在您的瀏覽器中測試 Lighthouse。 下列螢幕快照使用 Edge，但您可以在Chrome和其他許多瀏覽器中遵循相同的步驟。

1. 開啟瀏覽器並移至 主要Microsoft網頁。

2. 選取 F12 鍵以開啟開發人員工具。

3. 選取最上方的＞形箭號 (>>) 圖示，以開啟隱藏的索引標籤清單。

   

4. 從清單中選取 [Lighthouse]。

5. 在 [類別] 下，清除 [協助工具] 以外的所有項目。

6. 在 [裝置] 下，選取 [電腦]。

   

7. 選取 [產生報表]。

8. 請注意頁面的分數及其相關資訊。

9. 您可以在 Lighthouse 中選取 [全部清除]，再前往其他頁面，然後選取 [產生報表] 來測試其他頁面。

   

您現在已經了解如何使用 Lighthouse，以及該項工具所能提供的協助工具資訊。