# Accesserty DevCheck

Accesserty DevCheck 是免費的瀏覽器擴充功能，給發布或交付前要自己先檢查頁面的人使用，不需要無障礙背景：在真正的頁面上找出問題，判斷掃描工具判斷不了的地方，也能讓團隊或客戶看懂為什麼要修。

英文版本：https://accesserty.com/en/ai/products/devcheck.md

## 試做第一次檢查

產品頁有簡化的按鈕名稱範例：https://accesserty.com/devcheck/#first-check

不用寫程式也能練習：https://accesserty.com/devcheck-practice/ 是虛構的示範頁，刻意留了沒有名稱的按鈕、沒有替代文字的圖片與只靠顏色的狀態。用 DevCheck 掃描、找到問題，按「套用修正」後再掃描一次。這一頁不列入搜尋結果，也不會送出任何資料。

想在自己的測試頁試試：

在能修改的測試頁（例如 localhost），只有 aria-hidden 圖示的按鈕沒有可及名稱。選「掃描」→「掃描這個頁面」，查看 button-name 項目，點選元素項目嘗試標示位置。加上「新增聯絡人」等可見文字後，重新載入並掃描同一狀態，這個按鈕應不再出現此項問題；鍵盤操作、螢幕閱讀器朗讀與實際功能仍要測試。教學按鈕不會新增資料，也不需要啟用 AI。

「需要人工確認」不是已確定錯誤；沒有發現問題不代表通過 WCAG。複製摘要後先確認內容再分享。PDF 請從「掃描」中的 PDF 檢查入口選取電腦上的檔案，不是直接掃描瀏覽器內建 PDF 閱讀器。

## 目的

測試站、登入後畫面或本機開發頁，也能在自己的瀏覽器裡檢查，不必把頁面交給線上掃描服務。先找出可自動偵測的問題，再確認需要人工判斷的項目。選用 AI 會另外傳送取樣內容；請先確認內容適合傳送，再看完整資料說明。

表單出現錯誤、開啟對話框，或修正問題後，都可以回到同一個畫面重測，並把結果交給團隊討論。

AI 會傳送哪些內容？https://accesserty.com/devcheck/#devcheck-ai-disclosure

主要對象是發布前要檢查頁面的人：設計師、PM、QA、內容編輯與工程師，不需要無障礙背景。替客戶交付網站的團隊，也可以在交付前於測試站先找出問題，收到稽核報告後在同一個畫面重現與重測。DevCheck 可直接檢查 localhost、測試站、登入後頁面、CMS 預覽與本機 PDF。先掃描，再用人工檢視與鍵盤操作確認；可複製摘要到團隊的問題追蹤工具，DevCheck 本身不提供追蹤或分派系統。

## 能力

- 找出問題：以 axe-core 檢查 WCAG 2.0～2.2 A/AA 與最佳實務，分開呈現確定的問題與待人工確認項目，受影響元素以可讀名稱列出並可在頁面上標示，列出定位失敗提示。
- 判斷掃描工具判斷不了的地方：焦點路徑以編號、連線與縮圖呈現推估的候選焦點順序；標題結構顯示 h1–h6 大綱並包含螢幕閱讀器專用標題；地標區域把 header、nav、main 等 landmark 畫成區塊；另有可及名稱檢視、表單標籤與錯誤訊息、朗讀預覽與停止動態。橘色提示代表需要人工確認，不是自動判定的 WCAG 違規。
- 讓別人看懂為什麼要修：色覺差異、低視力、視野缺損、文字間距、閱讀困難與觸控目標等情境模擬，跟著游標與焦點移動的放大鏡，手部顫抖模擬，以及會提示聲音並列出無字幕媒體的無聲模式。
- PDF 不用上傳也能檢查：本機檔案的標籤、書籤、連結、圖片、表單欄位與頁面尺寸一致性等結構訊號。文件語言請先到 PDF 閱讀器或編輯工具的文件屬性確認，不要只憑 DevCheck 顯示的「未設定語言」判定有問題。
- AI 語意檢測（選用）：依連結名稱與周邊文字檢視用途是否清楚、語言標記與圖片 alt 品質。不會讀取連結目的地來驗證內容。結果顯示取樣、排除與略過數量；未發現問題只限本次取樣。
- 透過 Chrome / Edge 與 Firefox extension 進行檢查。

焦點路徑圖依目前頁面的候選元素、DOM 與 tabindex 推估，不是每次按 Tab 的實際紀錄。單選群組與複合元件不一定每個點都能逐次 Tab 到；請用 Tab、Shift + Tab 及適用的方向鍵完成任務。開放 Shadow DOM 可納入路徑，iframe 內部與封閉 Shadow DOM 仍需另行檢查。

## 選用 AI 的資料與結果界線

情境模擬、人工檢視輔助、axe-core 檢查與 PDF 檢查主要在瀏覽器本機執行。AI 語意檢測是例外：只有在使用者主動執行時，才會將有限量的頁面文字、連結名稱與周邊文字，以及頁面允許讀取的選定圖片、alt 與所在連結或按鈕的名稱資訊送往 Google Gemini 分析。不另附頁面、連結目的地或圖片來源的獨立 URL 欄位，但取樣文字、名稱或圖片中的網址仍可能傳送。

名稱資訊可能包含視覺上隱藏的 ARIA 引用文字與 SVG title；可編輯內容與部分 CSS 隱藏文字會排除，但裁切或移出畫面的文字仍可能被取樣；這不是敏感資料辨識工具。共用 AI 經過 Accesserty，使用實例 ID 與 IP 雜湊控管額度；自己的 Key 則直接送往 Google。依 Google 未付費服務條款，輸入與回覆可能用於改善模型及人工審閱；自行提供 Key 不代表排除這些用途，仍依該專案帳務狀態及適用地區條款處理。請勿提交機密、未授權或個人資訊至未付費 AI。使用者主動匯出的本機報告可能包含頁面網址與取樣文字，分享前請檢查。詳見 https://accesserty.com/privacy/ 與 https://ai.google.dev/gemini-api/terms。

AI 會取樣文件與開放的 Shadow DOM，但不遍歷框架或封閉的 Shadow DOM。部分圖片會因跨來源保護、載入或編碼限制被略過。

AI 另會標示結果完整、部分可用或無可用結果。部分紀錄被排除時仍保留有效結果，並揭露缺少的圖片回報；不完整或無可用結果不代表沒有問題，複製與 JSON 匯出也保留這個區別。

## 按需要深入的檢查指南

不必一次看完。按你正在檢查的內容選擇指南；有 PDF 時，再另外檢查文件。

1. 確認頁面與 release 範圍：https://accesserty.com/guides/accessibility-testing-before-launch/
2. 檢查鍵盤與焦點路徑：https://accesserty.com/guides/how-to-check-keyboard-focus-path/
3. 把發現整理成修復計畫：https://accesserty.com/guides/web-accessibility-remediation-plan/

查看所有無障礙指南：https://accesserty.com/guides/

## 適用對象

- 發布前要檢查頁面的人：設計師、PM、QA、內容編輯與工程師，不需要無障礙背景（主要對象）
- 替客戶交付網站的團隊
- 政府與公部門網站的承接團隊：送無障礙標章檢測或驗收前先自我檢查，可搭配 Freego 等既有工具
- 元件庫與設計系統維護者

## 定位限制

DevCheck 不是完整人工檢測、輔助科技測試或法規判定的替代品。它的價值是讓發布前的自我檢查提早發生，分清楚哪些已經確認、哪些還要人工判斷，並留下可討論、可追蹤、可重測的線索。人工檢視輔助中的橘色提示只是人工檢查提示，不是自動判定的 WCAG 違規。

模擬提供檢查線索，不代表身障者的完整使用經驗，也不取代實際使用者測試。

## 目前入口

先選「掃描」，再用「人工檢視」與實際鍵盤操作確認結果，不必啟用 AI。分享摘要前先確認內容，再貼入團隊的問題追蹤工具；修正後回到相同畫面重測。

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

瀏覽器內部頁與商店頁受保護。頁面變動後需重新掃描或重新整理人工檢視。受保護框架與封閉 Shadow DOM 可能無法定位。PDF 是結構訊號檢查，不是 PDF/UA 符合性驗證。

- 產品頁：https://accesserty.com/devcheck/
- 網頁無障礙檢測工具：https://accesserty.com/web-accessibility-checker/
- 看懂 WCAG 檢測結果：https://accesserty.com/wcag-compliance-tool/
- PDF 無障礙檢查工具：https://accesserty.com/pdf-accessibility-checker/
- WCAG 檢測清單：https://accesserty.com/guides/wcag-testing-checklist/
- Chrome Web Store：https://chromewebstore.google.com/detail/accesserty-devcheck/ompbhahmipenipgiiiehbkiibkonoeec
- Firefox Add-ons：https://addons.mozilla.org/firefox/addon/accesserty-devcheck/