「無障礙網頁設計」這個詞,很多中小企業老闆或行銷人員第一次聽到,直覺反應是「我們又不是政府機關,應該用不到吧」。但實際上,無障礙網頁設計談的核心觀念很單純,就是「讓不同狀況的使用者都能順利瀏覽網站」,對象不只是視障或肢體不便的族群,還包含色盲色弱、年長者、暫時性受傷(例如手腕打石膏)、甚至只是在強烈陽光下用手機看網頁而畫面反光看不清楚的一般消費者。這篇文章不談法規條文的細節,也不深入講HTML5語意標籤或ARIA地標角色這類技術實作,而是用比較生活化的角度,說明無障礙網頁設計背後的四個大方向,以及中小企業可以從哪些基礎地方先著手。
無障礙網頁設計到底在談什麼
如果把無障礙網頁設計想像成蓋房子,可以理解成除了樓梯之外還要有斜坡道、除了視覺招牌之外還要有語音廣播。網站是同樣的道理,除了「看起來漂亮」之外,還要讓不同感官或操作方式的使用者都能取得同樣的資訊、完成同樣的任務,例如查詢商品、填寫表單、撥打客服電話。國際上常見的做法會歸納成四個大方向,分別是可感知、可操作、可理解、穩健,以下用白話逐一說明,不涉及條文編號,而是講實際上代表什麼意思。
可感知:讓資訊不是只靠一種感官才能接收
可感知講的是,網站上的資訊不能只依賴單一感官管道傳遞。舉例來說,如果一張圖片是產品規格說明,但完全沒有任何文字說明,對於使用螢幕報讀軟體的視障使用者來說,這張圖等於不存在。同樣地,如果網站有自動播放的影片或音訊,卻沒有字幕或文字稿,聽障使用者也無法取得內容。可感知的精神很簡單:重要的資訊,盡量提供不只一種呈現方式,讓看不到的人可以聽到或讀到文字說明,讓聽不到的人可以透過字幕理解內容。
可操作:不是每個人都用滑鼠瀏覽網站
可操作講的是網站的功能要能用不同方式完成,而不是預設所有人都用滑鼠精準點擊小小的按鈕。有些使用者因為手部顫抖、肢體不便,或單純習慣用鍵盤的Tab鍵切換欄位,如果網站的選單、按鈕、表單完全無法用鍵盤操作,只能用滑鼠拖曳或點擊,這些使用者就會被擋在門外。另外,操作的時限也是重點之一,例如線上填表如果設定很短的自動登出時間,對於閱讀或輸入速度較慢的使用者會造成困擾。可操作的核心精神是:給使用者足夠的彈性去完成任務,而不是逼所有人用同一種方式、同一種速度操作。
可理解:內容和介面邏輯要讓人猜得到
可理解談的是網站的文字內容與操作邏輯要清楚一致,不要讓使用者每到一個新頁面就要重新摸索。舉例來說,如果同一個「送出」功能在不同頁面用不同的圖示或文字表達,使用者容易搞混;如果表單填錯時只用紅色框線標示卻沒有文字說明錯在哪裡,對色盲使用者來說根本看不出差異在哪。可理解也包含語言使用上盡量清楚、避免過度艱澀的行話,讓一般消費者、年長者都能看懂網站在說什麼、下一步該做什麼。
穩健:網站要能在不同工具下正常運作
穩健講的是網站的程式碼與結構,要能被各種不同的瀏覽器、裝置,以及輔助工具(例如螢幕報讀軟體、語音輸入軟體)正確解讀。這部分比較偏技術面,牽涉到程式碼撰寫的方式,這篇文章不深入展開語意標籤或程式細節的部分,但中小企業老闆可以知道的重點是:如果網站使用了太多客製化、非標準的互動元件,可能會讓輔助工具無法正確判讀,這也是為什麼找網站開發廠商時,值得主動詢問對方是否有考慮過無障礙相容性。
為什麼中小企業也該重視無障礙網頁設計
很多老闆會覺得,無障礙設計聽起來像是社會責任或政府要求,跟生意好壞沒有直接關係。但換個角度想,願意投入無障礙設計的品牌,通常會被解讀成「重視每一位顧客」,這對品牌形象是加分的。其次,無障礙設計往往也會擴大潛在客群,台灣社會高齡化的趨勢下,年長消費者的網路使用比例持續提升,而年長者常見的視力退化、手部操作不靈活等狀況,恰好就是無障礙設計想解決的問題,等於是把原本可能因為介面不友善而放棄瀏覽的顧客留下來。另外,隨著社會對數位平權的重視程度提高,無障礙設計也能降低企業未來面對相關爭議或法規要求時的風險,提前布局永遠比事後補救來得從容。
基礎實務重點可以從哪裡先做起
如果不知道從何開始,建議中小企業可以先從幾個門檻較低、投入成本相對小的地方著手。第一是色彩對比,確認文字顏色與背景顏色的對比夠明顯,避免淺灰色文字放在白色背景這類肉眼都要瞇眼才看得清楚的組合。第二是鍵盤操作可行性,可以請團隊實際試著不用滑鼠,只用鍵盤的Tab鍵和Enter鍵操作網站的主要功能,例如切換選單、送出表單,如果卡關就代表這部分需要改善。第三是圖片替代文字,也就是常聽到的alt文字,替每一張有意義的圖片(尤其是產品圖、活動海報)加上簡短的文字描述,讓螢幕報讀軟體可以唸出圖片內容,這個動作成本很低,卻是最基本也最容易被忽略的一步。
常見問題
無障礙網頁設計只有政府機關網站需要做嗎
不是。無障礙網頁設計的精神是讓不同狀況的使用者都能順利使用網站,任何有一般消費者瀏覽的商業網站都可以受惠,尤其是客群涵蓋年長者或注重品牌形象的企業,更值得提前規劃。
做無障礙網頁設計是不是要花很多預算大改版
不一定。有些基礎項目像是調整色彩對比、補上圖片替代文字,可以在既有網站上局部調整就完成,不一定需要整站重新開發,可以先從影響層面大、成本相對低的項目開始做起。
無障礙網頁設計和SEO有沒有關係
兩者的出發點雖然不同,但做法上有部分重疊,例如清楚的標題結構、有意義的圖片替代文字、良好的內容邏輯,這些對輔助工具友善的做法,同時也有助於搜尋引擎理解網站內容,對SEO來說算是相輔相成。
要怎麼知道自己的網站無障礙程度做得夠不夠
可以先從本文提到的色彩對比、鍵盤操作、圖片替代文字這幾個基礎項目自我檢查,如果想要更完整的檢視,也可以找專業團隊協助評估現況並提出優先改善的建議項目。
如果看完這篇文章,想知道自己公司的網站在無障礙設計與整體體質上還有哪些可以優化的空間,創昇SEO提供免費網站健檢服務,會實際檢視網站現況並說明可以優先調整的方向。對於想要當面討論、了解細節的業主,創昇SEO也提供全台免費到府解說,由專人到現場依照公司實際狀況說明,不用擔心聽不懂術語或抓不到重點,一步一步了解自己的網站現在站在哪裡、可以怎麼往前走。