網站無障礙設計:多服務 20% 的使用者

「無障礙設計」四個字,很多業主的第一反應是:「我們的客人沒有身心障礙者,這不用做吧?」這是對無障礙最大的誤解。視力退化的長輩、在大太陽下看手機的外送員、單手抱小孩滑網頁的爸媽、慣用鍵盤的重度使用者——把這些情境加起來,受無障礙品質影響的使用者,遠比想像中多。標題說的 20% 不是慈善對象,是你正在默默流失的客人。

我們把無障礙視為工程專業的一部分,理由很務實:無障礙做得好的網站,通常結構更乾淨、SEO 更好、對所有人都更好用。這篇講清楚無障礙到底在做什麼,以及中小型網站該從哪裡開始。

無障礙在解決什麼問題

網頁無障礙(accessibility,業界簡寫 a11y)的國際標準是 WCAG,核心精神是讓內容「看得到、操作得了、看得懂、夠穩定」。具體對應到幾種真實情境:

• 低視力與色弱者:需要足夠的文字對比度、可放大的字級。
• 全盲使用者:靠螢幕閱讀器(把畫面唸出來的軟體)瀏覽,需要正確的標題結構與圖片替代文字。
• 行動不便者:可能無法精準操作滑鼠,依賴鍵盤或輔助裝置,需要所有功能都能用鍵盤完成。
• 情境性障礙:強光下的螢幕、吵雜環境裡沒開聲音的影片、受傷只能單手操作——每個人都有「暫時障礙」的時刻。

無障礙不是為少數人多做的功能,而是為所有人把基本功做對。它衡量的不是同情心,是專業度。

投資報酬率最高的六件事

不必一開始就追求滿分認證,先做這六件事,就能解決大部分問題:

1. 對比度:淺灰字配白底很「有質感」,但很多人根本看不清。WCAG 建議一般文字對比度至少 4.5:1,用免費的對比度檢測工具幾秒就能驗證。設計師的美感與可讀性可以並存,前提是你把可讀性列為需求。
2. 圖片替代文字(alt):螢幕閱讀器靠 alt 描述圖片。商品圖寫商品名稱與特徵,純裝飾圖標記為空 alt 讓閱讀器跳過。順帶一提,這也是圖片 SEO 的基本功。
3. 標題層級:h1 到 h3 是文件的骨架,不是字體大小的快捷鍵。閱讀器使用者靠標題跳著瀏覽,層級亂跳等於把目錄撕掉。
4. 鍵盤操作:放下滑鼠,用 Tab 鍵走一遍你的網站——每個連結、按鈕、表單都到得了嗎?焦點框看得見嗎?彈出視窗關得掉嗎?這個五分鐘的自測,能揪出大量問題。
5. 表單標籤:每個欄位要有明確的標籤(label),錯誤訊息要說清楚哪裡錯、怎麼改。「資料有誤」三個字對誰都是折磨。
6. 連結文字:「點此」「更多」對閱讀器使用者是無意義的雜訊,連結文字本身就該說明目的地。

無障礙與生意的交集

做無障礙不只是把體驗做好,它跟商業指標有實際交集。第一,搜尋引擎跟螢幕閱讀器讀網頁的方式高度相似——都靠結構化的 HTML 理解內容。標題層級正確、圖片有 alt、連結語意清楚的網站,天生對 SEO 友善。第二,對比度、按鈕熱區、表單清晰度這些項目,同時也是行動版體驗的核心,我們在行動版體驗檢查清單裡談的多數項目,跟無障礙檢查根本是同一份。第三,政府與大型企業的採購案越來越常把無障礙列入驗收標準,提早做就是提早取得入場券。

從今天開始的務實路徑

我們建議的順序是:先用 Lighthouse 或 axe 這類免費工具跑一次自動檢測,把明顯的技術問題(對比度、alt、標籤)清掉;再做一次鍵盤走查與手機實測;最後在新功能的設計階段就把無障礙列入驗收條件,而不是上線後補救。自動工具只能抓到大約三到四成的問題,剩下的靠流程與意識。

無障礙是那種「做了沒人鼓掌,不做默默流失」的基本功。我們的品牌官網設計開發服務把對比度、鍵盤操作與語意結構當成預設標準,不是加購項目——因為這本來就是專業該有的樣子。