Makzan

我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。

使用 WAVE 檢視網站無障礙錯誤

至於對比色符合,很多人以為是太嚴格所以很困難,會讓設計師選擇減少云云。但其實不用追求 AAA 級,只需符合 AA 級。

今日為大家介紹一個稱為 WAVE 的無障礙工具。

工具網址為:https://wave.webaim.org

這個工具可以讓我們對一版網頁生成基本無障礙報告,包括顏色對比、大標題順序、圖片說明文字、空白連結等。

以下是對現有 Makzan.net 進行的檢測。可以從報告中看到有一個表單輸入框沒有 <label> 標記說明,另外在底部 <footer> 區域的連結顏色不合格。

WAVE 檢查 makzan.net

全版唯一一個輸入框我也望了 <label>,實在抵打。至於對比色符合,很多人以為是太嚴格所以很困難,會讓設計師選擇減少云云。但其實不用追求 AAA 級,只需符合 AA 級。例如以下的 “Newsletter” 字眼,是調整成符合細文字 AA 級別的,和旁邊未調整的 “Archives” 字,你看得出有差別嗎?

使用 WAVE 調試對比色

例子:Whatsapp 官網

舉另一個例子,whatsapp 官網。可以看到右上角的漢堡包導航列(Hamburger menu)是空白沒有任何文字的,所以視障人士便難於觸發這個按鈕了。

使用 WAVE 檢查 WhatsApp 網站,發現數個對比度偏低錯誤。

再看對比色。中間主要宣傳區域的綠色底白色字,不符合細字最低要求。由於文字已經是白色,我們可以嘗試將底色稍後調深,便可以得出 AA 級合格的顏色,比當初的綠色稍後深少少,但整幅應用的話,視覺上不會有很大的區別,卻能符合對比度要求。至於灰色那行文字,灰字綠底,根本就是刻意將對比度調低,希望讀者不能讀到。

一個為白色字綠色底修正對比度的可行數值調試。

那麼,有沒有網站是零錯誤的?

有不少的,例如 Starbucks 美國官網,及我工作的生產力中心網站等。

Starbucks 官網,沒有任何錯誤。
澳門生產力暨科技轉移中心官網,沒有任何錯誤,但有一堆 Warning 提示。

零錯誤就行了?

非也,無障礙包括可機器檢測的部份,和實際應用的部份。零錯誤只是一些基本檢測,例如漏文字、對比度低、標題重要級別順序錯誤等,但圖片的說明文字描述得如何,就算有人工智能讀圖也未能判斷,這個我再用一篇文章介紹甚麼是好的圖片說明文字。另外實際操作上是否能用,包括流程上及操作反饋上,也是需要人去判斷及調試的。

所以無障礙檢測零錯誤不是完成,是有個好開始。

WAVE 不是萬能

但對於一些使用 JavaScript 渲染生成的網頁,WAVE 有時會載入不了。這時便需要使用其他無障礙報告掛件來檢視,稍後再介紹不同的瀏覽器檢測外掛。

WAVE 載入 Matters.news 不成功

倒過來說,由於沒有使用伺服器端渲染生成(SSR, Server-side rendering),導致網頁內容其實是有特定環境才能被存取,否則則一片空白,所有內容皆消失,其實是無障礙的最大忌,因為若果沒有內容,遑論甚麼規則了。當然,WAVE 無法載入也不能說明現實環境不能載入,但就表示已經有可能會不能載入內容,即已經不是內容至上的策略。

— 麥誠 Makzan,2021-11-18。


我是麥誠軒(Makzan),除了正職外,平常我要麼辦本地賽與辦世界賽,要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等,至今撰寫了 7 本書, 2 個視頻教學課程。

我逢星期四會不定期推出 #無障礙星期四,介紹網站無障礙的檢測工具及應用貼士。

如果我的文章有價值,請訂閱贊助我持續創作分享。

訂閱贊助:https://liker.land/thomasmak/civic




Like my work??
Don't forget to support or like, so I know you are with me..

CC BY-NC-ND 2.0

教學文系列

好康分享 2021 第 26 週—無障礙、Web Workers、Indiepen、實用工具庫

4

Want to read more ?

Login with one click and join the most diverse creator community.