當初我學習了實作的技術之後,下一步就是檢驗自己寫的程式對不對,
所以就開始學習測試。
測試分為機器測試與人工測試,工具其實超多,以下簡要說明就好:
機器測試:
人工檢測:
目前機器檢測工具發展成熟歸成熟,
但有些線上工具網址一下子就失效了,或是擴充程式一下就沒在維護了,
因為這些通常是被拿來當作練習寫程式碼,或是專案常用簡易建起來的,
所以我後來都是先簡易使用瀏覽器內建的 Dev Tool 先掃過一次,因為他們檢測的都是最基礎的,
Dev Tool 沒問題後,才會使用其他工具。
人工檢測第一部分就需要熟讀規則,
否則即便是開啟了工具,你也不知道要怎麼檢查。
因為機器檢測有時候會漏掉一些規則,舉個例子,
機器檢測可以檢測 H 系列是否有正確的巢狀結構,
但是他不一定能檢測到 <article> 這個標籤裡,其實可以重置 H 系列順序,
因為 <article> 的內容可以視為可獨立出來的完整網頁內容,
所以裡面再重新從 H1 開始,這部分有些機器檢測就會漏掉。
再舉個例子,機器檢測也許可以偵測出 Focus 焦點,
但是不會跟你說你在 TAB 時,焦點順序是否正確、是否被困在 Dialog 裡沒辦法關掉 Dialog。
人工檢測第二部分是熟悉作業系統內建的螢幕報讀軟體以及主流螢幕報讀軟體操作也是很重要,
舉個例子,當沒有開啟螢幕報讀軟體時,使用 TAB 只能 Focus 到可以聚焦的東西(例如按鈕、連結等可以互動的),
但是開啟後,是有辦法選擇到文字內容的細節,
報讀出來的內容可能會一直重複讓使用者被迫聽好幾次重複的東西,或是一直聽 Emoji 的代表內容,
如果沒有開啟螢幕報讀軟體來聽,是永遠無法知道這種問題。
機器檢測也沒辦法檢測出來,因為這是「語意」問題,非「規則」問題。
同理,<img> 的 alt 也是如此。
當然還有其他的,例如也要知道瀏覽器能設定的東西有哪些,但因為會去設定的人太少了,所以這裡先不提,
例如 Firefox 有一個設定是只縮放文字大小,
如果切版底子不好的人,RWD 時可能容器就爆炸了。
我在這個階段花了很多時間學習,而且有一種學不完的感覺,推薦還是要熟讀規則,
這樣子不管是在機器測試報錯時可以判斷怎麼修(有時可能是報 A 錯了,但實際上追到源頭是 B錯),
還是在人工測試時判斷語意等問題,都不會感到無能為力,
附帶的好處是在切版時,就會自然而然地把無障礙的知識應用到實作上,後續修改的時間明顯會變少。
現在,因為 AI 的崛起,現在很多無障礙網頁的 Skills 和測試工具,可以偵測語意等問題,
不過本質上仍是「輔助」,無法相信。
舉個例子,一張圖的 alt ,可能因為前後文的關係,alt 的內容可能就會不一樣,
以現在 AI 的成本去做全站掃描可能是划不來的,
這部分只能期待未來 AI 成本可以降到多少。