很多人第一次接觸無障礙，是因為專案上被要求要通過檢測，於是把它當成一份要打勾的清單，等驗收前才臨時補救。但無障礙的四大原則其實是四種判斷角度：資訊能不能被接收、介面能不能被操作、內容能不能被理解、程式碼夠不夠穩固。理解這四個角度之後，多數決定在設計當下就能做對，不必事後補。這篇逐一說明四個原則各自對應哪些實際做法，並談做好之後帶來的附帶效益。
可感知：不要讓資訊只有一種接收方式
可感知的意思是，網站上的資訊要能被不同狀況的使用者接收到。最常見的違反方式，是把重要訊息只放在圖片裡。橫幅上的活動日期、做成圖檔的價目表、只有圖示沒有文字的功能鍵，對使用螢幕閱讀器的人來說等於不存在，也無法被搜尋引擎讀取。圖片要有描述性的替代文字，說明它傳達了什麼，而不是隨手填一個檔名。
顏色也是一種單一管道。用紅字表示必填、用綠色表示成功，若沒有搭配文字或符號，色覺辨識有困難的人就看不出差別。表單的必填標示、圖表的分類區隔，都應該在顏色之外再加一層文字或形狀的區別。文字與背景的對比也要足夠，淺灰配白底在螢幕上看似清爽，在光線強的環境幾乎讀不出來。
影音內容需要文字替代，影片提供字幕、音訊提供逐字稿，不方便開聲音的場合也用得上。
可操作：沒有滑鼠也要能走完整個流程
可操作處理的是互動這一層。判斷方法很直接：把滑鼠收起來，只用鍵盤的定位鍵與方向鍵，從首頁走到聯絡表單並成功送出。過程中若有任何一個按鈕或選單跳不過去、跳過去了卻看不出目前停在哪裡，就是問題所在。
常見的狀況包括：用非按鈕的元素做成按鈕，鍵盤根本無法選取；焦點的外框被樣式移除，使用者不知道游標在哪；彈出視窗打開後焦點沒有移進去，也關不掉。這些都不是難修的問題，但要在切版階段就注意，事後回頭改動互動邏輯反而麻煩。
操作面還包含時間與動作的控制。會自動輪播的橫幅要能暫停，倒數限時的操作要能延長，避免使用者還沒讀完就被切走。大量的閃爍動畫也應該避免，對部分使用者可能引發生理不適。
可理解：介面行為要可預期，訊息要說人話
可理解談的是內容與行為的一致性。同一個功能在不同頁面上要用同樣的名稱與位置，導覽列不要每一頁換一種排法；連結文字要能單獨看懂，滿頁的看更多在螢幕閱讀器逐條列出連結時完全無法分辨去向，寫成看更多服務項目就清楚多了。
錯誤處理是這個原則裡最實際的部分。表單送出失敗時，訊息要指出是哪個欄位、錯在哪裡、該怎麼修正，而不是只丟一句格式錯誤。日期或電話這類有格式要求的欄位，事先就把預期格式寫在旁邊，比事後糾正有效得多。內容本身也要照顧理解成本，專有名詞第一次出現時給個簡短說明，長段落適度拆分。
穩健：語意標籤寫對了，輔助科技才讀得懂
穩健指的是程式碼要能被各種瀏覽器與輔助科技正確解析。這一項使用者看不到，卻決定了前面三項能不能被實現。以下幾件事是最基本的要求。
- 用對的標籤做對的事：標題就用標題標籤並依層級排列，清單用清單標籤，不要一律用泛用容器加樣式模擬。
- 表單欄位要有標籤關聯：每個輸入欄位都要對應到明確的說明文字，只靠框內提示文字並不足夠。
- 宣告頁面語言：正確標示頁面的語言，語音輔助才會用對的發音規則朗讀內容。
- 結構要能通過驗證：標籤未關閉、層級錯置這類問題，會讓輔助科技解讀出與畫面不同的結構。
- 補充角色資訊要謹慎：自訂元件可以額外標註角色與狀態，但用錯比不用更糟，能用原生元件就用原生的。
需要提醒的是，自動檢測工具能抓出的多半是這一層的問題，替代文字寫得好不好、連結敘述有沒有意義，機器判斷不了。工具全綠不等於無障礙做完了，最後仍要靠人實際用鍵盤操作一次。
做好無障礙之後，一般使用者也跟著受惠
無障礙常被誤會成只服務少數人，實際上這些做法對所有人都有好處。字級與對比充足，在戶外強光下人人都受益；影片有字幕，在通勤時不方便開聲音的人也能看；表單錯誤訊息說清楚，所有填表的人都少一次挫折。所謂的暫時性障礙，例如手受傷只能單手操作、環境太吵聽不到聲音，本來就是每個人都會遇到的狀況。
對搜尋表現也有間接幫助。標題層級正確、圖片有替代文字、連結敘述具體，這些正好也是搜尋引擎理解頁面結構的依據。不過要說清楚因果關係：無障礙不是排名的捷徑，它是把內容表達清楚的基本功，而清楚表達的內容本來就比較容易被正確理解與呈現。
常見問題
無障礙和無障礙標章是同一件事嗎？
不完全是。四大原則是設計與開發時要遵循的通則，標章則是依特定規範進行檢測後取得的認證。有些網站基於法規或標案需求必須取得標章，這時要照該規範的檢核項目逐條處理。但沒有申請標章的網站，同樣值得依原則把基本功做好，兩者的目的都是讓更多人用得到。
做無障礙會讓網站變得很陽春嗎？
不會。無障礙限制的是資訊只用單一管道傳達、以及互動只支援單一操作方式，並不限制視覺表現。動畫、圖片、精緻排版都可以保留，只是要多做一層：圖片配替代文字、動畫可暫停、色彩區別再補一個文字標示。多數情況下這些補強在視覺上幾乎看不出來。
舊網站要補無障礙，該從哪裡開始？
建議從影響面最廣、成本最低的幾項先做：檢查所有圖片的替代文字、修正文字與背景的對比、確認表單欄位有正確的標籤關聯、以及讓鍵盤能走完主要流程。這四項通常不需要改動版面，卻能解決相當比例的實際障礙。結構性的問題再視改版計畫安排，不必一次到位。
網站上加一個調整字級與對比的工具列就夠了嗎？
那類工具列只是輔助，不能取代原本的結構品質。如果圖片沒有替代文字、鍵盤走不完流程，再多的調整按鈕也幫不上使用螢幕閱讀器的人。而且瀏覽器與作業系統本來就內建縮放與對比設定，網站真正該做的是確保放大後版面不會破掉，而不是另外做一套控制項。
驗收時要怎麼確認廠商真的有做？
除了看檢測報告，建議自己動手試三件事：把滑鼠拿開，只用鍵盤走完聯絡流程；把瀏覽器字級放大，看版面會不會重疊或被切掉；隨機點幾張圖檢查是否有具體的替代文字。這三項不需要專業工具，卻能看出是真的做了，還是只把工具能抓的項目補一補。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「無障礙網頁設計原則」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。