自我檢測及工具檢測

台灣的無障礙標章申請,在數位發展部掛牌後,終於有比較明確的權責單位,最近也提供了多場課程(線上),有興趣可以去看看;這裡提供我們實務的經驗,讓想要申請的單位,能更快速、清楚知道,如何進行。

Best Web Accessibility Testing Tools

在申請標章前,最好先自我檢測,本文介紹幾個好用的工具


會取 a11y 這個名字是因為,accessibility a到y中間共11個字,所以叫a11y.

Lighthouse

它是Chrome 的內建的外掛(F12打開就會看到),嚴格講起來,它主要功能並不是無障礙檢測,無障礙檢測只是其中一項(說明);用法如下:

點選 Desktop、Accessibility 如下圖; 選好後按下 Analyze page load.


Lighthouse操作畫面

再按下 Analyze page load 後,稍等一下就會產生報告(如右圖)。

報告內會指出目前網站的問題,分類說明及改善建議。

也有通過的項目、不適用清單...等。

另外,如要保留報告,可以將報告滙出,在右上角選擇滙出的方式。


使用Lighthouse 無障礙測試100%通過

另外,在數位發展部也有一套工具 - 單機版檢測工具 Freego(適用「網站無障礙規範(110.07)」)下載位置

這套工具是數位發展部官方工具,而且是符合110年7月版本發佈的標準。換句話說要在台灣申請無障礙標章,一定要用這個工具。

但是,因為操作介面、問題說明並不是很簡潔明確,常常讓人一頭霧水,反而逾看逾模糊;所以,如果您是第一次要申請,還是建議先使用我們建議的工具。

目前 Freego 在目前當下,還在發展中,還是有所多問題, 以下是筆者在最新版本(Freego_Mar132023),必須用 Java 1.8 版本(太高不行, 筆者是用11.0.19);另外還有許多需改進的,相信官方也很努力的更新中,期待下一版會更好。


FreegoJRE錯誤訊息

axe DevTools

另一個 Chrome 外掛 - axe,axe 除了適合網站開發工程師,也適合網站擁有者用來自我檢測。


axe DevTools

安裝方法

是到 Chrome web store(Chrome 線上應用程式商店) ,找到 axe,進入 axe 後,點選加入'加入Chrome'。

安裝後,在網址鍵入你要測試的網站(與 Lighthoust相同);然後點 F12, 在最上方頁籤選axe-DevTools

開啟 axe DevTools 後(如右圖),點選左邊的 Scan ALL of my page,就會開始測試目前網站。


F12開啟axe DevTools

測試結果/報告。

Total Issues.

這份報告指出有2個 Moderate, 只有 Moderate(相對於 Critical、Serious 是較緩和/建議的);這樣的結果當然可以發起申請標章;但如果您的報告是有問題的話,您需要尋找專業人士處理了。

(Best Practices: ON 的結果)

You have (0) automatic issues, nice!