網站無障礙是什麼？老闆可以先檢查的 6 件事

一位七十幾歲的客人，想在網站上查診所的門診時間。網站的字很小，灰色的字印在淺灰色的底上，他把手機拿遠又拿近，最後還是放棄，直接打電話去問。

另一位視力不好的客人，用手機的螢幕報讀功能「聽」網站。報讀軟體讀到一張重要的價目表圖片，只念出「圖片」兩個字，他不知道上面寫了什麼。

網站無障礙，就是讓這些人也能順利使用網站：長輩、視力不好的人、色盲、只能用鍵盤操作的人，還有在大太陽下看手機、一隻手抱小孩一隻手滑手機的每一個人。這篇說明台灣的規定，以及老闆自己就能先檢查的 6 件事。

台灣的規定：政府網站要做，民間網站鼓勵做

身心障礙者權益保障法規定，各級政府機關、附屬機構和學校建置的網站，要通過無障礙檢測並取得認證標章。所以政府和學校的網站，都必須符合無障礙的規範。

民間的公司網站，目前沒有強制規定。數位發展部提供了技術規範、諮詢服務，也有免費的檢測工具 Freego，讓民間網站可以自己檢查。

雖然不是強制，但無障礙做得好的網站，對每一位客人都更好用。如果你的公司有在投標政府的案子，要承接政府的網站，就一定要懂這些規範。

一、字的大小

內文的字太小，是長輩最常遇到的問題。手機上的內文，建議不要小於 16px；客人年齡層偏高的網站，可以再大一點。我們自己網站的文章內文就用 20px。

也要確認網站有沒有阻止使用者放大。有些網站為了版面不跑掉，設定成手機上不能用兩指放大，這對視力不好的人很不方便。

二、文字和背景的對比

淺灰色的字配白色背景、白色的字壓在照片上，看起來很有設計感，但很多人看不清楚。

國際的無障礙標準 WCAG 規定，一般大小的文字和背景的對比要達到 4.5 比 1，大字（約 24px，或約 18.5px 的粗體）要達到 3 比 1。品牌色怎麼兼顧好看和對比，在〈品牌色怎麼定？〉有例子。

檢查的方法很簡單：用 Chrome 打開網站，在文字上按右鍵選「檢查」，開發人員工具裡的顏色資訊會顯示對比值，不合格的會標出來。

三、圖片要有替代文字

每一張有內容的圖片，都要寫「替代文字」（alt），用一句話描述圖片裡的重要資訊。報讀軟體會念出這句話，圖片載入失敗時也會顯示，搜尋引擎也靠它理解圖片。

價目表、營業時間、活動資訊，最好直接用文字寫在網頁上，不要只放一張圖片。單純裝飾用的圖片，替代文字可以留空，報讀軟體就會跳過。

四、連結文字要看得懂

「請點這裡」「更多」「按此」，單獨念出來沒有人知道要去哪裡。用報讀軟體的人，常常是一次聽完頁面上所有的連結再挑一個，如果每一個都叫「點這裡」，就完全無法選。

把連結文字改成會去的地方，例如「看門診時間表」「下載報名表」。這樣的寫法，對一般讀者和搜尋引擎也比較清楚。

五、只用鍵盤也能操作

有些人沒辦法使用滑鼠，只用鍵盤的 Tab 鍵在網頁上一個一個跳。自己試一次：打開網站，不碰滑鼠，只按 Tab 鍵，看看選單、按鈕、表單能不能一個一個選到，選到的時候畫面上看不看得出來現在停在哪裡。

很多網站為了好看，把選到時出現的外框拿掉，結果用鍵盤的人完全不知道自己在哪裡。正確的寫法在〈點連結出現外框怎麼拿掉？〉。

六、影片要有字幕

影片的重點如果只靠旁白，聽不到的人就看不懂。上字幕的影片，聽障者、在辦公室不方便開聲音的人都能看。字幕的做法在〈知識類短影片怎麼拍？〉。

做無障礙，照顧的是每一位客人

上面這 6 件事，沒有一件需要大改網站，卻能讓更多人順利看完你的網站、找到你的電話。字夠大、對比夠、圖片有說明、連結寫清楚，也是讓網站好讀、好用的基本功。

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也服務台北和全台灣的客戶。想知道自己的網站哪裡對長輩或視障者不友善，歡迎免費諮詢。