網頁無障礙設計指南：為什麼值得做、常見問題與驗收
一個看不見畫面的使用者，是靠螢幕閱讀軟體把網頁內容唸出來操作的。如果你的按鈕上只有一個圖示、沒有文字，他聽到的就是「按鈕」兩個字——他不知道這個按鈕是加入購物車還是刪除訂單。
網頁無障礙處理的就是這類問題。它聽起來像是公部門才需要在意的合規項目，但實際上它同時在改善一件所有企業都在乎的事：有多少人能順利完成你希望他完成的動作。
無障礙到底在處理什麼
無障礙（Accessibility）指的是讓不同能力、不同裝置、不同情境下的使用者，都能取得資訊並完成操作。國際上普遍參考的準則把它歸納成四個原則，用白話說就是：
- 看得到或聽得到：資訊不能只用單一感官傳達。圖片要有文字說明，影片要有字幕。
- 操作得了：不能只有滑鼠能用，鍵盤也要能完成所有動作。
- 看得懂：介面行為要可預期，錯誤訊息要講人話。
- 相容：內容要能被螢幕閱讀器等輔助工具正確解讀。
這四件事沒有一項是「特殊需求」，它們其實就是好的介面設計。
值得先釐清一個常見誤會：無障礙不等於「另外做一個無障礙版本」。多數情況下它是在同一個網站上把標記與樣式做對，而不是維護兩套內容——後者不但成本加倍，兩邊的資訊還會隨時間越差越遠。
為什麼值得做
受眾涵蓋
真正用得到的人遠比想像多，而且多數不會自我認定是「身心障礙使用者」：視力隨年齡退化的長輩、在戶外強光下看手機的人、在大眾運輸上沒戴耳機所以需要字幕的人、手部暫時受傷只能用鍵盤的人。你的網站每擋掉一種情境，就少一批能完成轉換的訪客。
搜尋表現
無障礙的許多作法與搜尋引擎優化天然重疊：圖片的替代文字讓搜尋引擎理解圖片內容、清楚的標題階層讓機器讀懂頁面結構、有字幕與逐字稿的影片提供可被索引的文字。這也是為什麼把無障礙做好的網站，通常在內容被理解與被引用上比較有利，相關的內容規劃邏輯可以參考品牌部落格怎麼經營。
一般使用體驗
對比足夠的文字比較好讀、表單錯誤訊息清楚比較不會填錯、鍵盤能操作讓熟練使用者更快、標題階層清楚讓人一眼掃到想找的段落。這些改善對所有人都有效，只是平常沒有人會特別說出來。
法規趨勢
各國對數位服務可及性的要求持續增加，公部門與特定產業的採購通常已有相關要求。這裡不引用具體條文，因為規範會更新，實際適用範圍請以主管機關最新公告為準，必要時諮詢律師。原則上的建議是：把它當成會越來越嚴格的方向來規劃，不要等到被要求才動。
五類最常見的問題
一、色彩對比不足
淺灰字配白底、品牌色按鈕配白字但兩者明度接近——這是實務上最普遍的問題，而且改起來最便宜。
怎麼檢查：用線上對比檢測工具，把文字色與背景色輸入比對，工具會直接告訴你是否通過。設計階段就把品牌配色跑過一次，能省下後面所有爭論。
另一個相關問題是只用顏色傳達意義，例如用紅綠區分訂單狀態。色覺辨識有差異的使用者看不出來，應該同時加上文字或圖示。
二、無法用鍵盤操作
用 Tab 鍵從頭到尾走一次你的網站。你會發現的典型問題：
- 有些按鈕跳不到（因為那是用圖片或區塊做的，不是真的按鈕）
- 跳到某個元素時看不出焦點在哪（焦點外框被樣式移除）
- 彈出視窗打開後，焦點仍停留在背景頁面，或關不掉
- 下拉選單只有滑鼠移上去才會展開
這個測試不需要任何工具，你自己五分鐘就能做完，而且它抓到的問題往往最嚴重。
三、圖片缺少替代文字
替代文字（alt）是圖片的文字說明，給讀不到圖的人與機器看。常見的錯誤有三種：完全沒寫、寫成檔名、或是每張都寫「圖片」。
判斷原則：這張圖在傳達資訊，就描述它的資訊；只是裝飾，就標記為裝飾用。產品圖描述產品與情境，圖表則要把重點數據用文字補在旁邊。
四、表單不好填
表單是轉換的最後一哩，也是無障礙問題最容易造成實質損失的地方：
- 欄位說明文字沒有和輸入框正確關聯，螢幕閱讀器唸不出這格要填什麼
- 只用提示文字（placeholder）當標籤，一開始輸入就消失
- 錯誤訊息只用紅框表示，沒有文字說明錯在哪
- 必填欄位只用星號標示，沒有文字補充
- 送出後沒有明確的成功訊息
五、影音沒有字幕與替代內容
影片需要字幕（不只為聽障者，也為在安靜或吵雜環境的人）；純音訊內容應提供逐字稿；自動播放的影音應可暫停。動態效果過強時，也應尊重系統的「減少動態效果」設定。
驗收時該怎麼檢查
把無障礙寫進驗收，和把速度寫進驗收一樣，重點是把模糊要求變成可執行的檢查項目。建議的驗收清單：
| 檢查項目 | 怎麼驗 |
|---|---|
| 色彩對比 | 用對比檢測工具驗主要文字、按鈕、表單欄位 |
| 鍵盤操作 | 只用鍵盤完成主要流程（瀏覽、搜尋、填表、送出） |
| 焦點可見 | Tab 移動時，目前位置一眼看得出來 |
| 替代文字 | 抽查各類圖片，確認說明有意義 |
| 標題階層 | 頁面標題層級由大到小，不跳級、不當樣式用 |
| 表單標籤 | 每個欄位都有正確關聯的說明與錯誤提示 |
| 影音 | 字幕、逐字稿、可暫停 |
| 自動化掃描 | 用檢測工具跑過主要頁面，處理報告中的問題 |
自動化工具只能抓到一部分問題（機器判斷得出對比與標記缺失，判斷不出替代文字寫得對不對、流程合不合理），所以人工檢查不能省。合理的作法是兩者併用：工具跑大量頁面找明顯問題，人工針對主要流程走一遍。
驗收標準怎麼寫進規格文件，可以參考軟體需求規格怎麼寫。
找真實使用者試一次
清單能抓到規則面的問題，抓不到「規則都通過、但實際上很難用」的情況。如果條件允許，請一位平常使用螢幕閱讀器或放大功能的使用者，實際走一次你的主要流程，通常半小時就能得到比整份報告更有價值的回饋。
退而求其次的替代方案是內部模擬：把螢幕亮度調到最低、把系統字體放到最大、關掉滑鼠只用鍵盤，然後請沒參與開發的同事完成一次下單或送出詢價。做不完的地方，就是要修的地方。
成本該怎麼思考
無障礙的成本高低，幾乎完全取決於什麼時候開始考慮它。
在設計階段納入：多數工作只是選擇題——挑對比足夠的配色、按鈕做成看得出是按鈕、表單欄位加上標籤。增加的工時有限。
開發完成後才補：要回頭改樣式、改結構、重做元件，成本明顯上升，而且改動範圍大、風險高。
上線多年後才處理：通常會併入改版一起做，因為單獨修改的投入報酬比不上整體重整。
所以最划算的時間點永遠是現在這個專案的設計階段。這也是為什麼建議在需求訪談時就把它列為明確條件，而不是留到驗收前才提。整體建置成本的組成可以看網站製作費用怎麼算。
NETVANA 的軟體開發流程採用先做設計、確認互動原型後才開始開發的順序，無障礙條件在這個階段提出的調整成本最低；開發期間以兩週為一個 Sprint 並提供可操作的 Demo，也讓鍵盤操作這類必須實際試用才會發現的問題能提早暴露。
無障礙不是慈善，也不是純粹的合規負擔。它處理的是「有些人本來想用你的服務，但被介面擋住了」這件事——而被擋住的人不會寫信告訴你，他們只會離開。
如果你想先確認現有網站的無障礙狀況，或希望在新專案的規格裡把這些條件寫清楚，與 NETVANA 討論你的需求。NETVANA 的軟體服務採先諮詢再報價，各服務的內容與交付物可以看軟體服務介紹。
延伸閱讀：網頁品質的另一半是速度，可以看網站速度優化指南；建置費用的結構與影響因子，可以看網站製作費用怎麼算；把需求與驗收標準寫清楚的方法，可以看軟體需求規格怎麼寫；改版是補無障礙最省成本的一個時機，可以看網站改版 SEO 檢查清單。
