跳至中央內容區塊 :::
:::

無障礙網頁檢測工具：瀏覽器內檢查網站無障礙

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

為什麼用瀏覽器內的網頁無障礙檢測工具？

選單展開後、表單出現錯誤時，畫面的內容與操作可能不同。DevCheck 能檢查你目前開啟的狀態，不需要公開網址；其他頁面與互動狀態仍要分別檢查。

  • 檢查本機與測試站頁面

    在尚未公開的頁面上執行檢查，不需要把網址交給外部掃描服務。

  • 檢查登入後與互動狀態

    在使用者流程、表單狀態、彈窗或動態內容出現後執行無障礙檢查。

  • 定位可修正的頁面元素

    用 axe-core 找出常見問題，並把結果對應到頁面元素，方便修正後重新檢查。

  • 補上視覺情境檢查

    搭配色盲、文字間距、視野缺損、老花、近視與白內障模擬，檢查設計可讀性。

  • 選用：檢查文字與圖片描述

    選用 AI 檢查連結名稱是否說明用途、語言標記和圖片替代文字的品質。它只分析取樣內容，不會檢查連結目的地；取樣內容會傳送給 Google Gemini，不能取代人工確認。請勿在含機密或未授權內容的頁面啟用。

如何用 DevCheck 做無障礙網頁檢測

這個起步流程使用本機掃描與人工檢視，不需要公開網址或啟用 AI。請在你有權測試的頁面操作；會送出訂單或訊息的流程，使用受控測試環境。

  1. 步驟 1

    安裝瀏覽器擴充功能（Chrome／Edge 或 Firefox）。

  2. 步驟 2

    開啟要檢查的公開頁、本機頁、測試站或登入後流程。

  3. 步驟 3

    在 DevCheck 選「掃描」→「掃描這個頁面」。

  4. 步驟 4

    查看問題類型、嚴重度與對應元素。

  5. 步驟 5

    用鍵盤走完主要任務，搭配「人工檢視」確認結構與焦點。修正後重新掃描相同狀態；AI 是選用功能，這個起步流程不需要啟用。

安裝 Chrome / Edge 安裝 Firefox 查看 DevCheck 產品頁

無障礙檢測工具不能取代完整人工檢測

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

試做一次：找出沒有名稱的按鈕

不用寫程式：打開練習頁，用 DevCheck 掃描、找到沒有名稱的按鈕，再在頁面上套用修正後重測。練習頁是虛構的示範內容，也不需要啟用 AI。

打開 DevCheck 練習頁

「需要人工確認」不是已確定的錯誤；掃描沒有發現問題，也不等於整頁通過 WCAG。無法定位元素時，回到相同頁面狀態重新掃描；受保護的框架或封閉 Shadow DOM 仍可能無法定位。需要交給同事時，可用「複製摘要」，先確認內容再分享。

想在自己的測試頁試試？看 HTML 範例

把第一段 HTML 放在你能修改的測試頁，例如 localhost 開發頁；按鈕沒有新增資料的功能。

檢查前：只有被輔助科技忽略的圖示

<button type="button"><span aria-hidden="true">＋</span></button>
  1. 開啟測試頁與 DevCheck，選「掃描」→「掃描這個頁面」。不要在瀏覽器設定頁或擴充功能商店頁測試。
  2. 在結果中找按鈕名稱相關項目（規則 ID：button-name）。檢視列出的元素；點選元素項目可嘗試在頁面標示位置。這裡缺少名稱，是因為唯一的內容被 aria-hidden 排除了。
  3. 先確認按鈕用途，再改成下方有可見文字的版本。不要只為了消除警告而填入「按鈕」這類沒有用途的名稱。
  4. 重新載入修改後的頁面，再掃描同一狀態。這個按鈕不應再出現 button-name 問題；但仍要用鍵盤確認能到達與操作，並用螢幕閱讀器確認名稱。正式功能還要另外測試新增流程。

修正後：用可見文字說明用途

<button type="button">新增聯絡人</button>
接著用鍵盤走完一個任務

網頁上線前的檢查路徑

從檢查範圍開始，依頁面內容選擇自動化、鍵盤、名稱、圖片與視覺狀態的檢查，再整理修正與重測。只有包含 PDF 的任務才需要另外檢查文件。

  1. 步驟 1. 先建立上線前檢查範圍

    網站上線前如何做無障礙檢測？

    先確認要檢查的是公開頁、本機、測試站、登入後流程、互動狀態或 PDF。

  2. 步驟 2. 跑初步自動化檢查

    自動化無障礙檢測能找到什麼，又找不到什麼

    用掃描結果找出可機器偵測的問題，同時保留需要人工判斷的部分。

  3. 步驟 3. 檢查鍵盤與焦點路徑

    如何檢查鍵盤焦點路徑

    確認焦點是否可到達、順序是否合理、是否被困住，以及操作路徑是否符合頁面脈絡。

  4. 步驟 4. 檢查可及名稱

    如何實作可及名稱

    確認按鈕、連結、表單控制項與互動元件是否有可理解的名稱。

  5. 步驟 5. 檢查圖片替代文字

    如何寫出有意義的圖片替代文字

    依圖片在頁面中的用途判斷 alt，而不是只描述畫面上有什麼。

  6. 步驟 6. 檢查色彩、狀態與可讀性

    網頁上線前，色彩對比要檢查哪些狀態？

    檢查文字、焦點、錯誤與選取狀態；區分必要的圖示／邊界、裝飾，以及真正停用元件的例外。

  7. 步驟 7. 如果有 PDF，檢查結構訊號

    PDF 無障礙結構訊號檢查

    檢查語言、標籤、圖片、連結、表單、書籤與頁面一致性等線索。

  8. 步驟 8. 把發現整理成修復計畫

    網站無障礙修復計畫

    依使用者任務、影響範圍、負責角色、修復層級與回測方式整理下一步。

誰適合使用這個網頁無障礙檢測工具？

  • 開發者與接案團隊

    交付或驗收前，在測試站與登入後的畫面先找出常見問題；收到稽核報告後，在同一個畫面重現並重測。

  • QA 與測試人員

    把無障礙檢查加入 release 前與回歸測試流程。

  • PM、內容與營運人員

    查看回報發生時的畫面，記下受影響元素與操作，和負責修正的人討論下一步。

  • 設計與產品人員

    在設計審查時檢視色彩、可讀性、不同視覺條件與操作是否順暢。

接下來想檢查什麼？

  • Accesserty DevCheck

    了解各項檢查功能、哪些內容留在本機，以及如何安裝使用。

  • 檢查 PDF 文件

    如果要檢查的是檔案而不是網頁，查看本機 PDF 結構檢查的操作與限制。

  • 看懂 WCAG 檢測結果

    看懂檢測結果中的成功準則與嚴重度，確認哪些項目需要人工檢查，以及修正後如何重測。

  • 色彩對比檢查指南

    如果問題是文字、狀態、焦點提示、圖示與元件邊界是否清楚，這篇指南說明 release 前的實務檢查順序。

常見問題

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

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

Accesserty DevCheck 是無障礙網頁檢測工具嗎？

是。DevCheck 是瀏覽器內使用的無障礙網頁檢測工具，適合需要檢查頁面的人檢查公開頁、本機頁、測試站、登入後頁面、焦點路徑、AI 語意品質與 PDF 結構訊號。

它和線上輸入網址的 accessibility checker 有什麼不同？

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

DevCheck 可以檢查 localhost 或 staging 環境嗎？

可以。DevCheck 在瀏覽器內執行，因此適合檢查 localhost、staging、內部測試頁與尚未公開的頁面。

DevCheck 可以檢查登入後頁面嗎？

可以。只要你能在瀏覽器中開啟該狀態，就能用 DevCheck 執行檢查，這是它和許多線上 URL checker 的主要差異。

DevCheck 是 ADA compliance checker 嗎？

DevCheck 可以協助初步找出網頁與文件中的無障礙風險，但它不是法律符合性認證工具，也不能保證符合 ADA、WCAG 或其他法規要求。