無障礙網站的實作檢查清單

不需要技術背景也能檢查的項目

無障礙的技術細節很多，但有一批項目是業主自己就能檢查的。這些也正是實務上最常出問題的地方。

以下依「自己就能測」到「需要請廠商確認」排列。

一、鍵盤操作

把滑鼠移開，只用鍵盤的 Tab 鍵移動、Enter 鍵選取，走一遍網站。

檢查點

• 看得出焦點在哪嗎？ 應該有明顯的外框或標示
• 移動順序合理嗎？從上到下、從左到右
• 選單能展開嗎？
• 彈出視窗能用鍵盤關閉嗎？
• 有沒有卡住出不來的地方？

焦點看不見是最常見的問題，通常是設計時為了視覺乾淨而把預設的焦點外框拿掉了。這是可以修正的，且不影響滑鼠使用者的體驗。

二、色彩對比

淺灰字配白底看起來很有設計感，但在戶外強光下、或年長使用者眼中可能完全看不清楚。

檢查點

• 內文與背景的對比是否足夠
• 按鈕上的文字是否清楚
• 放在圖片或影片上的文字，畫面變亮時還看得到嗎
• 是否只用顏色傳達資訊——例如「紅色代表缺貨」，色覺障礙者看不出來，應同時加上文字或圖示

有線上工具可以輸入兩個顏色的色碼，直接算出對比是否達標。設計階段就該納入，見網站配色與品牌識別怎麼定。

三、圖片的替代文字

在瀏覽器中對圖片按右鍵檢視原始碼，或使用瀏覽器的檢查工具，可以看到圖片是否有替代文字。

檢查點

• 有意義的圖片是否都有描述
• 描述是否確實說明了圖片內容，而不是「圖片」「未命名」
• 是否有堆砌關鍵字——把想排名的字全塞進去，螢幕報讀軟體會全部念出來，對使用者是干擾
• 純裝飾的圖片是否留空

寫法見圖片的替代文字與檔名該怎麼寫。

四、標題結構

螢幕報讀軟體的使用者可以用標題快速跳轉，就像用目錄找章節。前提是標題要有正確的層級結構。

常見錯誤

• 用放大加粗代替標題——看起來像標題，但結構上只是普通文字
• 層級跳號——大標題之後直接跳到第三層
• 為了字體大小而選標題層級——想要字小一點就用第四層，這是用錯了工具

正確做法是依內容的邏輯層次選擇標題層級，字體大小另外用樣式調整。

五、連結與按鈕的文字

螢幕報讀軟體可以列出頁面上所有連結供使用者選擇。如果一頁上有二十個「請點此」，這個功能就沒有用了。

• 不好：請點此、更多、閱讀更多、詳細內容
• 建議：下載產品型錄、查看空調設備規格、閱讀完整案例

這對搜尋引擎理解頁面也有幫助，屬於兩者共同受益的項目。

六、表單

• 每個欄位是否有明確的標籤，而不是只靠欄位內的提示文字
• 必填欄位是否有明確標示，且不只用顏色標示
• 錯誤訊息是否說明了怎麼修正——「格式錯誤」不夠，應該說「電話請輸入 10 碼數字」
• 錯誤發生時，焦點是否移到出錯的欄位
• 驗證碼是否有替代方案——只能看圖辨識的驗證碼，視障者無法通過

手機端的表單設計見手機版表單怎麼設計才不會流失客戶。

七、影音內容

• 影片是否有字幕
• 是否有自動播放的聲音——應避免，或提供明顯的暫停控制
• 影片承載的重要資訊，頁面上是否也有文字版本

八、點擊目標的大小

手指的接觸面積遠大於滑鼠游標。過小或過密的可點擊元素，會造成誤觸。

檢查方式很簡單：用手機實際點點看每個按鈕與連結，特別注意頁尾的連結群、文章內文中的連結、以及分頁的數字按鈕。

詳見手機版的選單與導覽該怎麼設計。

九、需要請廠商確認的項目

這些需要看程式碼或用專業工具才能確認：

• 頁面是否宣告了正確的語言
• 語意標記是否正確使用
• 動態內容變更時，是否會通知輔助科技
• 是否有「跳至主要內容」的捷徑連結
• 自訂的互動元件是否正確標示了角色與狀態

自動檢測工具測不出什麼

這一點很重要：機器只能檢查有沒有，不能檢查對不對。

• 它能檢查圖片有沒有替代文字，不能判斷描述得對不對
• 它能檢查標題層級有沒有跳號，不能判斷結構是否合乎內容邏輯
• 它能檢查對比數值，不能判斷疊在圖片上的文字實際看不看得清楚

所以自動檢測是必要的第一步，但不是全部。人工檢視與實際操作測試無法省略。

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