JOURNAL · 開發實務
無障礙網站不是政府專用:中小企業官網先做好的 8 件事
從鍵盤操作、文字對比、圖片替代文字到表單提示,整理一般企業網站可以先改善的八項無障礙基礎。
無障礙網站不是只有政府機關才需要。視力、聽力、行動或認知差異會影響使用方式;老化、手部受傷、強光環境、網路不穩或暫時無法播放聲音,也可能讓一般訪客遇到相同障礙。把基本無障礙做好,通常也會讓網站更清楚、更容易操作。
先理解四個方向
| 方向 | 網站應做到 |
|---|---|
| 可感知 | 重要資訊不只依賴單一感官或顏色 |
| 可操作 | 不同輸入方式都能完成主要任務 |
| 可理解 | 內容、導覽與錯誤提示清楚一致 |
| 穩健 | 能被瀏覽器與輔助技術正確解析 |
中小企業官網先做好的 8 件事
- 每一頁有能說明內容的頁面標題。
- 標題依內容層級排列,不只用字體大小假裝標題。
- 文字與背景保持足夠對比,不用顏色當唯一提示。
- 有資訊功能的圖片提供準確替代文字,純裝飾圖片不製造雜訊。
- 不使用滑鼠也能操作導覽、按鈕、連結與表單。
- 鍵盤焦點清楚可見,而且不被固定元件遮住。
- 表單欄位有標籤,錯誤訊息指出問題與修正方式。
- 重要影音提供字幕、文字稿或等同資訊。
先把滑鼠放下走一次主要流程
從網址列開始使用 Tab、Shift+Tab、Enter 與方向鍵,確認能看見目前焦點、順序符合畫面邏輯,也能開啟選單、送出表單與關閉彈窗。若焦點突然消失、卡在元件裡或跳到看不見的位置,就需要修正。
替代文字與對比要依內容判斷
替代文字不是把檔名複製進去,而是用當下情境說明圖片提供的資訊。圖表需傳達數據與結論,純裝飾則不必重複描述。文字對比也不能只靠肉眼猜測,應使用對比工具檢查一般文字、按鈕與焦點狀態。
表單最容易暴露障礙
欄位名稱、必填規則、錯誤位置與成功訊息都要能被看見並由輔助技術理解。更完整的驗收方式可接著看 官網詢問表單設計清單 。
自動掃描不是完整稽核
工具很適合找出缺少替代文字、標籤或對比不足等常見問題,但無法替人判斷文字是否真的清楚、閱讀順序是否合理,或某個操作是否容易完成。八項檢查也是起點,不代表全站已符合 WCAG 2.2 AA。
能通過自動工具,不等於所有人都能順利完成網站任務。
把無障礙放進日常流程
- 新增圖片時同時寫替代文字。
- 設計新元件時確認鍵盤、焦點與對比。
- 新增表單欄位時補上標籤、說明與錯誤狀態。
- 內容發布前檢查標題層級與連結文字。
- 每次改版用人工方式完成一次主要 Happy Path。
從 W3C 官方檢查開始
WCAG 2.2 提供完整規範;若要快速找出明顯問題,可先使用 WAI Easy Checks ,但官方也明確提醒它不是完整評估。
結語
無障礙不是上線前才貼上的標章,而是從文字、圖片、操作到錯誤處理的一連串設計選擇。先讓主要內容與聯絡流程對更多人可用,再逐步擴大檢查範圍。