什麼是網頁無障礙？跟一般網站差在哪

無障礙不是只為身心障礙者做的

「網頁無障礙」聽起來像是為視障者做的特殊設計，實際上它處理的是一個更廣的問題：不論使用者用什麼方式操作、在什麼條件下瀏覽，都能取得網站上的資訊。

會受益的人比想像中多：

• 視力退化的中高齡使用者——字太小、對比不足就看不清楚
• 在戶外強光下用手機的人——低對比的文字直接消失
• 網路不穩、圖片載不出來的人——沒有替代文字就不知道那裡有什麼
• 手拿東西只能單手操作的人——按鈕太小就點不到
• 在安靜場合無法開聲音的人——影片沒字幕等於沒內容
• 習慣用鍵盤操作的人——包含許多行政與工程背景的使用者

換句話說，無障礙的多數要求，本質上就是好的可用性設計。

四個核心原則

國際規範以四個原則為架構，取其英文字首常稱為 POUR：

輔助科技怎麼「讀」網頁

理解這件事，很多要求就說得通了。

視障使用者常用螢幕報讀軟體，它會把網頁內容依序念出來。它讀的是網頁的文字與結構，不是畫面。所以：

• 圖片——沒有替代文字，就只會念「圖片」，使用者不知道那是什麼
• 標題層級——正確的標題結構可以讓使用者快速跳到想看的段落，就像目錄。如果只是把文字放大加粗而沒有標題結構，這個功能就失效了
• 連結文字——「請點此」念出來完全沒有資訊。應該寫「下載產品型錄」
• 表單欄位——欄位要有明確的標籤，否則使用者不知道該填什麼

鍵盤操作是最基本的檢驗

有一個測試方法，任何人都能做：把滑鼠移開，只用鍵盤的 Tab 鍵在網站上移動看看。

應該要做到：

• 能依合理的順序走過所有連結與按鈕
• 看得出目前停在哪裡——焦點要有明顯的外框或標示
• 選單能展開、彈出視窗能關閉
• 不會卡在某個元素出不來

如果按了幾下 Tab 就完全看不出焦點在哪，那這個網站對鍵盤使用者是不可用的。這是最容易發現、也最常見的問題。

與 SEO 的關係

兩者有相當的重疊，因為搜尋引擎的爬蟲跟螢幕報讀軟體一樣，讀的是文字與結構，不是畫面。

共同受益的項目：

• 圖片的替代文字
• 正確的標題階層
• 有意義的連結文字
• 清楚的頁面結構
• 不把重要文字做成圖片

所以把無障礙做好，搜尋能見度通常也會一併改善。圖片替代文字的寫法見圖片的替代文字與檔名該怎麼寫。

常見的三個誤解

「做了 RWD 就等於無障礙」

不是。RWD 處理的是版面在不同螢幕下的呈現，無障礙處理的是資訊能不能被所有人取得。兩者有重疊但不相同。

「無障礙網站一定很醜」

不會。多數要求與視覺設計無關——替代文字、標題結構、鍵盤操作都不影響外觀。唯一有影響的是色彩對比，但那是可以在設計階段就納入的條件，見網站配色與品牌識別怎麼定。

「裝一個無障礙外掛就好了」

市面上有宣稱一鍵解決的懸浮工具列外掛。它們可以提供字級調整等便利功能，但無法修正底層的結構問題——圖片沒有替代文字、標題階層錯亂，外掛都補不回來。

法規檢測看的也是網站本身的實作，不是有沒有裝外掛。

本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。