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

Accesserty DevCheck

在本機開發頁、測試站或登入後畫面直接檢查無障礙，也能檢查 PDF 結構。先用本機掃描找線索，再用人工檢視確認；AI 語意檢測是選用功能，會傳送取樣內容。

安裝 Chrome / Edge 安裝 Firefox
DevCheck 掃描頁籤實際畫面：上方有四種工具頁籤，掃描頁提供 axe-core 掃描按鈕與本機 PDF 檔案選擇器。
從掃描開始，再用人工檢視與鍵盤確認。PDF 留在本機處理；AI 是另外啟動的選用功能。

直接檢查你正在操作的頁面

DevCheck 不取代無障礙專業。它讓需要檢查頁面的人在發現疑慮時，可以先做初步檢查，留下可討論的線索。

你可以檢查公開頁、本機頁、測試站、登入後流程、互動狀態與 PDF 文件，不必先把頁面交給外部 URL 掃描服務。

例如展開表單錯誤訊息、登入測試帳號或開啟對話框後再掃描；修正後回到同一狀態重測。PDF 則從掃描頁籤選取本機檔案，不需上傳到伺服器。

大部分檢查都在瀏覽器內執行。只有選用的 AI 語意檢測會在你主動執行後，把有限量的可見文字、連結名稱與頁面允許讀取的選定圖片送往 Google Gemini 分析；不會傳送頁面 URL、連結目的地或圖片來源 URL。

可以先檢查什麼？

先把問題變具體，再讓需要處理的人判斷與修正。

  • 自動化無障礙掃描

    使用 axe-core 檢查可被機器偵測的 WCAG A/AA 與最佳實務問題，分開呈現確定的問題和待人工確認項目，列出各個受影響元素，並可複製摘要。

  • 視覺與感官情境

    切換色覺、文字間距、視野缺損、老花、近視與白內障等情境，檢查資訊是否仍然可讀、可理解。

  • 人工檢視輔助

    用焦點路徑、標題結構、地標區域、圖片替代文字概覽與觸控目標大小，把頁面結構與常見操作風險畫出來；橘色提示代表需要人工檢查，不是自動判定錯誤。

  • AI 輔助語意檢測

    依連結名稱與周邊文字判斷用途是否清楚，檢視語言標記與圖片 alt，並提供修改建議。不會讀取連結目的地來驗證內容；結果列出實際取樣與略過數量，不代表整頁都檢查過。

  • PDF 結構訊號

    檢查 PDF 是否具備語言、標籤、連結、圖片、表單欄位、書籤等基本結構線索。

誰適合使用 DevCheck？

誰適合使用 DevCheck？

  • 設計師

    使用情境模擬重新檢查色覺、文字間距、視覺條件與觸控目標，作為設計審查與跨職能討論的具體參考。

  • PM 與產品人員

    將檢查摘要複製到團隊既有的議題管理工具，再討論、追蹤與分派；DevCheck 本身不提供議題管理。

  • 工程師與 QA

    在本機、測試站、登入後流程與回歸測試中執行掃描與模擬，讓問題更早被發現、修正後也能快速重測。

它不能取代完整檢測

DevCheck 適合用來做初步檢查、溝通問題與修正後重測。正式無障礙檢測仍需要人工判斷、鍵盤操作測試、輔助科技測試與情境理解。

AI 語意檢測提供的是輔助建議，不是符合證明。請勿在機密頁面或未授權頁面上使用，並在採納建議前再次確認。

如何開始檢查？

安裝瀏覽器擴充功能（Chrome／Edge 或 Firefox）後，開啟要檢查的頁面即可開始。

  • 步驟 1. 安裝 Accesserty DevCheck

    從 Chrome 線上應用程式商店或 Firefox 附加元件商店安裝擴充功能。

  • 步驟 2. 開啟要檢查的頁面

    可以是公開頁、本機頁、測試站、登入後流程、互動狀態或 PDF 文件。

  • 步驟 3. 選擇掃描、人工檢視、情境模擬或語意檢測

    先選「掃描」，再用「人工檢視」與實際鍵盤操作確認結果；需要語意建議且頁面不含機密資料時，再選用 AI。把摘要貼入既有議題工具，修正後回到相同畫面重測。

安裝 Chrome / Edge安裝 Firefox

Release 前的 DevCheck 檢查路徑

如果你不是要讀一堆文章，而是要真的檢查一個頁面，可以依照這條路徑把自動化檢查、鍵盤、語意、內容、視覺、PDF 與修復工作串起來。

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

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

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

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

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

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

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

    如何檢查鍵盤焦點路徑

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

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

    如何實作可及名稱

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

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

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

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

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

    色彩對比檢查：Release 前不只看主色

    檢查文字、焦點、錯誤、hover、disabled、圖示與元件邊界等真實狀態。

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

    PDF 無障礙結構訊號檢查

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

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

    網站無障礙修復計畫

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

延伸閱讀

常見問題

AI 檢查會傳送什麼？不完整結果代表沒有問題嗎？

只有主動啟動 AI 才會傳送取樣文字、連結／alt 資訊及頁面可讀取的圖片；取樣可能包含 CSS 裁切文字、隱藏的 ARIA 引用文字與 SVG title；取樣內容裡的網址不會自動遮除。共用 AI 經 Accesserty 控管額度，自備 Key 則直接送往 Google。依 Google 未付費服務條款，輸入與回覆可能用於改善模型及人工審閱；自己的 Key 仍依該專案帳務狀態及適用地區條款處理。請勿將機密、未授權或個人資訊送至未付費 AI。結果會區分完整、部分可用與無可用結果；不完整不代表沒有問題，已送出的共用請求仍計入額度。複製／下載的本機報告可能包含頁面網址與取樣文字，分享前請檢查。

哪些頁面或內容不能完整檢查？

瀏覽器內部頁與商店頁會限制擴充功能；本機開發請用 localhost 網頁。頁面互動或內容變動後，請重新掃描或重新整理人工檢視。受保護框架與封閉 Shadow DOM 可能無法定位。PDF 只提供結構訊號，不是 PDF/UA 符合性驗證。AI 是有限取樣，排除可編輯內容與部分 CSS 隱藏文字，但裁切文字、可及名稱與 SVG title 仍可能送出；取樣內容裡的網址不會自動遮除。部分圖片及超過上限的項目會略過；跨來源保護、載入失敗或編碼限制也可能使圖片被略過。

Accesserty DevCheck 是什麼？

Accesserty DevCheck 是免費的瀏覽器內網頁無障礙檢測工具，結合 axe-core 自動化掃描、WCAG 相關問題定位、焦點路徑、標題結構、地標區域、感官模擬、AI 語意檢測、圖片 alt 建議與 PDF 結構訊號檢查，讓不同職能都能更早發現障礙。

DevCheck 要付費嗎？

本機掃描、人工檢視、情境模擬與 PDF 檢查免費，不需要 DevCheck 付費方案。選用的共用 AI 有每日額度與速率限制；使用自己的 Gemini API Key 則適用 Google 的額度、費率與資料使用條款，不代表無限或免費。

可以檢查登入後、本機或測試站的頁面嗎？

可以。DevCheck 的 axe-core 掃描、焦點路徑、標題結構、地標區域、情境模擬與 PDF 檢查在你的瀏覽器內執行，不需要把頁面交給外部 URL 掃描服務。選用的 AI 語意檢測只會在你主動執行後，將有限量的可見文字、連結名稱與頁面允許讀取的選定圖片送往 Google Gemini；不另傳頁面／連結目的地／圖片來源 URL 欄位；取樣文字、名稱或圖片內的網址仍可能送出。

DevCheck 是 ADA compliance checker 嗎？

不是。DevCheck 可以協助初步找出無障礙風險並做修正後重測，但它不提供 ADA 法律符合性判定，也不取代正式稽核、輔助科技測試或法律建議。

DevCheck 適合誰用？會取代專家檢測嗎？

適合 PM、設計師、QA、工程師、內容與營運等需要檢查頁面的人，讓更多人在發現疑慮的當下先動手確認。它的目的是讓初步檢查提早發生，而非取代無障礙專家或實際使用者測試。