B&HSTUDIO 需求健檢
JOURNAL · 開發實務

無障礙網站不是政府專用:中小企業官網先做好的 8 件事

從鍵盤操作、文字對比、圖片替代文字到表單提示,整理一般企業網站可以先改善的八項無障礙基礎。

#網站無障礙 #WCAG
開放入口、鍵盤焦點與高對比介面組成的網站無障礙概念插畫

無障礙網站不是只有政府機關才需要。視力、聽力、行動或認知差異會影響使用方式;老化、手部受傷、強光環境、網路不穩或暫時無法播放聲音,也可能讓一般訪客遇到相同障礙。把基本無障礙做好,通常也會讓網站更清楚、更容易操作。

先理解四個方向

方向 網站應做到
可感知 重要資訊不只依賴單一感官或顏色
可操作 不同輸入方式都能完成主要任務
可理解 內容、導覽與錯誤提示清楚一致
穩健 能被瀏覽器與輔助技術正確解析

中小企業官網先做好的 8 件事

  1. 每一頁有能說明內容的頁面標題。
  2. 標題依內容層級排列,不只用字體大小假裝標題。
  3. 文字與背景保持足夠對比,不用顏色當唯一提示。
  4. 有資訊功能的圖片提供準確替代文字,純裝飾圖片不製造雜訊。
  5. 不使用滑鼠也能操作導覽、按鈕、連結與表單。
  6. 鍵盤焦點清楚可見,而且不被固定元件遮住。
  7. 表單欄位有標籤,錯誤訊息指出問題與修正方式。
  8. 重要影音提供字幕、文字稿或等同資訊。

先把滑鼠放下走一次主要流程

從網址列開始使用 Tab、Shift+Tab、Enter 與方向鍵,確認能看見目前焦點、順序符合畫面邏輯,也能開啟選單、送出表單與關閉彈窗。若焦點突然消失、卡在元件裡或跳到看不見的位置,就需要修正。

替代文字與對比要依內容判斷

替代文字不是把檔名複製進去,而是用當下情境說明圖片提供的資訊。圖表需傳達數據與結論,純裝飾則不必重複描述。文字對比也不能只靠肉眼猜測,應使用對比工具檢查一般文字、按鈕與焦點狀態。

表單最容易暴露障礙

欄位名稱、必填規則、錯誤位置與成功訊息都要能被看見並由輔助技術理解。更完整的驗收方式可接著看 官網詢問表單設計清單

自動掃描不是完整稽核

工具很適合找出缺少替代文字、標籤或對比不足等常見問題,但無法替人判斷文字是否真的清楚、閱讀順序是否合理,或某個操作是否容易完成。八項檢查也是起點,不代表全站已符合 WCAG 2.2 AA。

能通過自動工具,不等於所有人都能順利完成網站任務。

把無障礙放進日常流程

  • 新增圖片時同時寫替代文字。
  • 設計新元件時確認鍵盤、焦點與對比。
  • 新增表單欄位時補上標籤、說明與錯誤狀態。
  • 內容發布前檢查標題層級與連結文字。
  • 每次改版用人工方式完成一次主要 Happy Path。

從 W3C 官方檢查開始

WCAG 2.2 提供完整規範;若要快速找出明顯問題,可先使用 WAI Easy Checks ,但官方也明確提醒它不是完整評估。

結語

無障礙不是上線前才貼上的標章,而是從文字、圖片、操作到錯誤處理的一連串設計選擇。先讓主要內容與聯絡流程對更多人可用,再逐步擴大檢查範圍。

WRITTEN BY 阿穎 · B&H STUDIO

我把實際開發中遇到的問題,整理成不用技術背景也能理解的內容。

KEEP READING

繼續閱讀

開發實務 結構化資料是什麼?中小企業網站值得先做哪些類型 理解結構化資料如何描述頁面內容,並依網站實際資訊選擇企業、文章、商品或常見問答等合適類型。 開發實務 官網詢問表單怎麼設計?欄位、錯誤提示與送出確認 把詢問表單拆成必要欄位、清楚標籤、錯誤處理與送出結果,降低訪客填寫時的阻力與不確定感。 開發實務 手機版網站不是把桌機版縮小:響應式設計檢查清單 從版面重排、文字、按鈕、圖片、表單到效能,檢查網站是否真的適合手機瀏覽與操作。