網站使用者不會都在相同環境下閱讀內容。有人以手機單手操作,有人因暫時受傷不便使用滑鼠,也有人仰賴鍵盤、螢幕閱讀工具或放大文字來瀏覽。無障礙設計的目的,是減少這些使用條件造成的阻礙,讓訪客能取得資訊、理解內容並完成聯絡、購買或下載等任務。
中小企業不需要等待全面改版才開始做。先從影響範圍大、容易反覆出現的元件與內容流程著手,通常就能改善許多日常使用問題。重點不在替網站增加華麗功能,而在於讓原本的資訊與操作方式更清楚、更可靠。
先用鍵盤走一次主要流程
不少人不使用滑鼠,或在某些情境下只能透過鍵盤操作。請在電腦上以 Tab 鍵依序移動,測試首頁、服務頁與聯絡表單。留意焦點是否清楚顯示在目前元件上,順序是否符合畫面閱讀順序,以及選單、彈出視窗與送出按鈕能否順利操作。
常見問題包括:焦點顏色太淡而看不見、選單打開後無法以鍵盤選取、彈出視窗關閉後焦點消失,或輪播元件不停自動切換。這些狀況會讓使用者卡在頁面中。改善時應保留明顯的焦點樣式,讓可互動元件可被鍵盤到達;若有彈出內容,也要讓焦點進入內容後能明確關閉並回到原位置。
文字與色彩都要能被辨識
將重要訊息只放在顏色裡,是常見但容易忽略的風險。例如表單錯誤欄位只變紅色、圖表僅以不同色塊區分、按鈕只靠顏色與背景區別,部分使用者可能無法判讀。
除了調整前景與背景的明暗差異,也應加入文字、圖示、底線或位置提示等第二種線索。正文不宜使用過小字級或過細字重;行距與段落間距則要讓長文容易追讀。若品牌色本身較淺,不必放棄使用,而是可將它用於裝飾、底色或輔助區域,關鍵文字改用對比更清楚的顏色。
圖片與連結要說出意義
圖片替代文字應依圖片角色處理。傳達資訊的圖片,要描述其關鍵內容;純裝飾圖片可不增加干擾;若圖片本身是連結或按鈕,替代文字應說明點擊後的目的,而不是只寫「圖片」。
連結文字也同樣重要。「點這裡」脫離上下文後毫無意義,建議改成「查看網站維護服務內容」或「下載專案準備清單」。頁面上若有多個相同文字的連結,最好讓每個目的地仍可被區分。
表單要讓錯誤能被理解與修正
每個輸入欄位都應有清楚標籤,不能只依賴欄位內會消失的提示文字。必填與選填的規則要一致,蒐集資料前也應讓訪客知道用途。送出失敗時,除了提醒「資料有誤」,還要指出哪一欄需要修正、錯誤原因是什麼,以及資料是否已被保留。
例如電話欄位若限定格式,應在填寫前先說明;若格式錯誤,則在欄位附近以具體文字提醒。這不只協助使用輔助工具的人,也能減少所有訪客反覆猜測的時間。
立即可做的行動
- 用鍵盤完成一次從首頁到送出詢問表單的流程,記下卡住的位置。
- 抽查五個主要按鈕與連結,將模糊文字改成可辨識目的的說法。
- 檢查表單錯誤提示是否同時提供色彩以外的文字說明。


