返回作品列表
瀏覽器擴充套件 · 網頁無障礙 商店上架中

Ramp

網頁無障礙檢測 Chrome / Edge 擴充套件

一鍵掃出網頁的 WCAG 無障礙問題,以繁體中文說明成因與修法、對應台灣「網站無障礙規範」——還讓不會操作報讀軟體的開發者,「看見」NVDA 會怎麼念你的網頁。

類型
瀏覽器擴充套件(Manifest V3)
平台
Chrome / Edge
檢測引擎
axe-core v4.10.3(本地打包)
對應標準
台灣「網站無障礙規範」110.07 版 / 115 年修正版
隱私
全程本機檢測 · 不外傳任何資料
Ramp 檢測結果畫面:違規總數與 A / AA / AAA 統計列,違規項目依等級分組列出
實際檢測畫面 · 違規依 A / AA / AAA 分組,附統計列與繁中規則名稱
為什麼做這個

無障礙檢測工具很多,講台灣規範的很少

網頁無障礙的自動化檢測工具其實不缺——但它們幾乎都說英文、對應的是 WCAG 條號。台灣開發者實際面對的,是行政院訂定的「網站無障礙規範」:有自己的準則編號、A / AA / AAA 檢測等級與官方檢測碼,還正處於 110.07 版與 115 年修正版的新舊版過渡期。查一條違規,往往要在英文報告、WCAG 原文與台灣規範 PDF 之間來回對照。

另一個更根本的斷層是:多數開發者沒用過報讀軟體。就算工具告訴你「缺少替代文字」,你還是很難想像視障使用者實際「聽到」的網頁長什麼樣子。

Ramp 把這兩個斷層接起來:繁中解說直接對應台灣準則,並模擬出 NVDA 會怎麼念出你的頁面——讓看得見的人,也能「看見」聽出來的網頁。

Ramp 掃描的是 JavaScript 執行後的實際 DOM,登入後的頁面天然支援;點擊任何受影響元素,會在原網頁上高亮定位並自動捲過去。工具本身也以 AA 標準要求自己:深色模式下所有文字對比維持 ≥ 4.5:1、動畫尊重使用者的減少動態效果設定。

核心賣點

三種預覽,模擬報讀軟體的視角

01

報讀預覽

每個受影響元素下方,顯示 NVDA 會怎麼念它——名稱+角色+值+狀態+集合位置+描述+表格座標,如「音量 滑桿 『30』」「關於我們 清單項目 6 之 2」。用詞逐條校對自 NVDA 官方正體中文翻譯。

02

朗讀順序

把整頁線性化成 NVDA 實際念出的先後順序,標出地標與表格的進入/離開邊界,並偵測「順序落差」——畫面由左到右、朗讀卻相反的 WCAG 1.3.2 問題(flex orderfloat:right、RTL…)。

03

動態播報

MutationObserver 監看即時區域(aria-liverole=alert…),表單錯誤、儲存提示等動態變化發生時,NVDA 會自動播報的內容依時間軸列出,並標示打斷/依序的優先度。

工程重點

幾個值得一提的技術決定

1

模擬報讀,用「真的 NVDA」驗證

報讀預覽如果念錯,比沒有更糟。Ramp 以 Guidepup 驅動真實 NVDA 走過測試頁、擷取實際語音,與模擬結果並排比對——Tab 走訪與瀏覽模式逐行兩種模式皆驗證吻合,過程中抓出並修正 6 個與真實播報的用詞落差(編輯區、功能表按鈕、表格語序、進度值、清單項目數、地標後綴)。名稱計算則直接複用 axe 的 accessible name 引擎,不自己重造。

2

對應台灣規範,含新舊版過渡期

自建 73 條 axe 規則 → 台灣準則的對應表,34 條標示官方檢測碼、可與官方工具 Freego 逐碼對照。規範正值交替:4.1.1「語法分析」現行版有、115 年修正版刪除(Ramp 因此重新啟用 axe 已預設停用的 duplicate-id 規則);2.5.8「目標尺寸」則是新版新增。兩版差異都在結果中附註說明,並排好了生效日當天的版本切換待辦。

3

權限最小化:不要求「所有網站」

只用 activeTab(點圖示才臨時取得當前分頁)、scripting(注入 axe)與 storage(session 快取,關瀏覽器即清除)。所有檢測在本機完成,不傳送任何資料到外部伺服器——一個檢查別人網站隱私問題的工具,自己得先站得住腳。

4

誠實呈現,不灌水數字

axe 的純最佳實務規則獨立顯示為「建議」、不計入違規;無法自動判定的項目標示「需人工複核」,可逐項自評通過/不通過並納入報告。頁面與報告都明講:自動化檢測僅能涵蓋約三到四成的無障礙問題,檢測結果不等同官方標章。

5

順序落差偵測:寧可少報,不要誤報

朗讀順序與視覺順序的比對,用「同一視覺列以 top 分帶、列內以 left 排序」找出同列水平反序——刻意只做這種高信心、低誤報的判定;多欄版面的跨欄閱讀順序與純垂直重排暫不標示。檢測工具喊「狼來了」一次,開發者就不再信它了。

6

三層測試:單元、端對端、真實報讀

38 項單元測試以 jsdom 秒級驗證 scanner 的純函式(NVDA 值/狀態/表格、地標判定、落差偵測);53 項端對端測試啟動獨立 Chrome 跑完整流程;最上層是 Guidepup 驅動真 NVDA 的對照驗證。另備一頁故意塞滿已知違規的測試素材頁,覆蓋對應表的每一條規則。

功能總覽

從一鍵掃描到可交付的報告

分級檢測違規依 A / AA / AAA 等級分組、同組依嚴重度排序;頂部統計列一眼看懂全貌;目標等級預設 AA,超出目標的項目獨立分組不干擾。
繁中解說每項問題附「為什麼是障礙」與「如何修正」,標示台灣準則編號、四大原則類別與影響程度;內建 axe 官方 zh_TW 語言包,未對應的規則也以繁中顯示。
高亮定位點擊受影響元素,在原網頁高亮並自動捲動過去(尊重減少動態效果設定)。
人工複核自評需人工複核項目可逐項標記通過/不通過,依網址持久保存並納入報告——對應官方自我評量流程。
匯出報告一鍵下載自包含 HTML 檢測報告(統計、全部問題、限制聲明),開瀏覽器即讀、列印即轉 PDF;34 條規則標官方檢測碼,可與 Freego 逐碼對照。
順手體驗結果快取(popup 重開自動還原)、深色模式、掃描前延遲(應付動畫與延遲載入)、鍵盤快捷鍵 Ctrl+Shift+U、受保護頁面的明確繁中錯誤提示。
點擊受影響元素後,Ramp 在原網頁上以紅框高亮定位該元素
點擊受影響元素 → 在原網頁高亮定位並自動捲動過去
標準版本

跨在新舊規範交界上

台灣「網站無障礙規範」正處於過渡期,Ramp 同時對應兩版,差異條目在結果與報告中附註說明:

版本對齊成功準則適用期間
110.07 版WCAG 2.178 條現行,至 2026-11-29
115 年修正版WCAG 2.287 條(新增 9 條、刪除 4.1.1)2026-11-30 起生效

限制聲明,也是產品的一部分

自動化檢測僅能涵蓋約三到四成的無障礙問題——鍵盤動線、報讀實際體驗、內容語意仍須人工複核;檢測結果不等同任何官方無障礙標章。這些話直接寫在工具與報告裡:一個檢測工具的可信度,來自它誠實說出自己測不到什麼。

技術棧總覽

一個擴充套件,三層驗證

平台Chrome / Edge 擴充套件 · Manifest V3(僅 activeTab / scripting / storage 三項權限)
檢測引擎axe-core v4.10.3(MPL-2.0,本地打包)+ 官方 zh_TW 語言包
規範對應自建對應表:73 條 axe 規則 → 台灣「網站無障礙規範」準則(110.07 / 115 年修正版)· 34 條官方檢測碼
報讀模擬axe accessible name 引擎 + 校對自 NVDA 官方 zh_TW 翻譯的用詞對照表 · Guidepup 驅動真實 NVDA 驗證
測試38 項單元測試(jsdom)· 53 項端對端測試(獨立 Chrome)· 真實 NVDA 雙模式對照
隱私全程本機檢測 · 不外傳資料 · session storage 快取(關閉瀏覽器即清除)