# 無障礙網頁檢測工具

英文版本：[https://accesserty.com/en/ai/products/web-accessibility-checker.md](https://accesserty.com/en/ai/products/web-accessibility-checker.md)

使用 DevCheck 檢查瀏覽器目前開啟的網頁，包括本機、測試站與登入後的畫面。先執行掃描、查看受影響元素，再用鍵盤確認操作，修正後重測相同狀態。

## 試做與重測

不用寫程式的練習頁：https://accesserty.com/devcheck-practice/（虛構示範內容，掃描、套用修正後重測）。也可以依照 https://accesserty.com/web-accessibility-checker/#first-check 的按鈕名稱範例，在能修改的測試頁選「掃描」→「掃描這個頁面」，檢查元素，補上可見名稱，再重新載入與掃描相同狀態。AI 是選用功能，這個流程不需要啟用。接著進行鍵盤測試：https://accesserty.com/guides/keyboard-accessibility-testing/

## 為什麼用瀏覽器內的 accessibility checker

選單展開後、表單出現錯誤時，畫面的內容與操作可能不同。DevCheck 能檢查你目前開啟的狀態，不需要公開網址；其他頁面與互動狀態仍要分別檢查。起步流程使用本機掃描與人工檢視，不必啟用 AI。請只在有權測試的頁面操作；會送出訂單或訊息的流程，使用受控測試環境。

## 可以檢查什麼

- 透過 axe-core 檢查 WCAG 2 A、WCAG 2 AA 與最佳實務相關的自動化問題。
- 將可被機器偵測的問題定位到頁面元素，協助修正後再次驗證。
- 使用人工檢視輔助檢查焦點路徑、標題結構、地標區域、圖片替代文字概覽與觸控目標大小；橘色提示代表需要人工確認，不是自動判定錯誤。
- 使用色盲、文字間距、視野缺損、老花、近視與白內障模擬檢查可讀性。
- 選用 AI 檢查連結名稱是否說明用途、語言標記和圖片替代文字的品質。它只分析取樣內容，不會檢查連結目的地；取樣內容會傳送給 Google Gemini，不能取代人工確認。請勿在含機密或未授權內容的頁面啟用。
- 另可檢查本機 PDF 的標籤、圖片、連結、表單欄位與書籤等結構訊號。文件語言請到 PDF 閱讀器或編輯工具的文件屬性確認。

## 適用流程

- PM、設計、QA、工程、內容與營運的初步檢查。
- 前端開發與元件修正。
- QA release 前檢查與回歸測試。
- 設計審查與可讀性檢查。
- 本機、測試站、登入後頁面與互動流程檢查。

## Release 前檢查路徑

你可以依以下順序檢查；沒有出現在頁面上的內容，例如 PDF，就不需要檢查該項：

1. 先確認 release 範圍與目前頁面狀態。
2. 執行自動化檢查，同時保留工具限制。
3. 檢查鍵盤焦點路徑。
4. 檢查可及名稱。
5. 檢查圖片替代文字。
6. 檢查色彩、狀態與可讀性。
7. 若任務包含 PDF，檢查 PDF 結構訊號。
8. 把發現整理成修復計畫並重新檢查。

## 選免費無障礙檢測工具，先看什麼？

先確認能否檢查你要測的頁面與互動狀態、指出受影響元素、說明檢查範圍，並讓你記錄結果與重測。再確認資料傳送方式、使用額度及選用功能的條件。免費或付費都不代表能完成所有評估；仍需人工檢視完整任務。

## 和線上 URL checker 的差異

輸入公開網址的工具適合從公開頁開始。DevCheck 在你目前的瀏覽器狀態執行，方便檢查本機頁、測試站、登入後流程、展開的選單與表單錯誤。其他工具若提供授權測試或瀏覽器自動化，也可能檢查這些情境；請依實際能力選擇，不只按工具類型判斷。

## 限制

DevCheck 可以加速找出常見、可被機器偵測的問題，但不能保證完整 WCAG、ADA 或法規要求。正式審查仍需要人工檢查、鍵盤操作測試、輔助科技測試與實際情境判斷。

## 相關頁面

- [Web accessibility checker](https://accesserty.com/web-accessibility-checker/)
- [Accesserty DevCheck](https://accesserty.com/devcheck/)
- [看懂 WCAG 檢測結果](https://accesserty.com/wcag-compliance-tool/)
- [PDF 無障礙檢查工具](https://accesserty.com/pdf-accessibility-checker/)
- [網站上線前如何做無障礙檢測](https://accesserty.com/guides/accessibility-testing-before-launch/)
- [色彩對比檢查指南](https://accesserty.com/guides/color-contrast-checks-before-release/)
- [自動化無障礙檢測限制](https://accesserty.com/guides/automated-accessibility-checks-limits/)
- [Chrome Web Store](https://chromewebstore.google.com/detail/accesserty-devcheck/ompbhahmipenipgiiiehbkiibkonoeec)
- [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/accesserty-devcheck/)