無障礙設計不只是「道德事」

很多人聽到「無障礙設計（Web Accessibility）」的第一反應是：「那是大企業才需要擔心的規範，我的小品牌官網應該不需要。」

這個想法有兩個問題：

問題 1：台灣的殘疾人口比你想的要多

根據衛福部統計，台灣身心障礙者人口超過 120 萬人。加上年長者、色盲者、使用不同裝置的用戶——所謂「無障礙使用者」的範圍遠比你想的廣。

問題 2：無障礙設計跟 SEO 高度重疊

Google 讀取網站的方式，跟輔助技術（螢幕閱讀器）讀取網站的方式非常類似。

替圖片加 alt 文字、正確使用標題結構、確保文字對比度——這些無障礙設計的基本要求，同時也是 SEO 的最佳實踐。做好無障礙設計，SEO 也連帶受益。

最重要的 5 個無障礙設計要點

1. 圖片的 alt 文字

每張圖片應該有描述其內容的 alt 文字：

<!-- 壞的 -->
<img src="portfolio-1.jpg" alt="image">

<!-- 好的 -->
<img src="portfolio-1.jpg" alt="SimpleCreative 為台北咖啡廳品牌設計的響應式官網截圖">

什麼是好的 alt 文字：

  • 描述圖片的內容（不是檔案名稱）
  • 如果圖片純粹是裝飾性的，用 alt="" 讓螢幕閱讀器跳過

2. 標題結構（Heading Hierarchy）

正確的標題層次對螢幕閱讀器非常重要，對 SEO 也重要：

  • 一頁只有一個 H1（頁面主題）
  • H2 是主要段落標題
  • H3 是次要段落標題
  • 不要因為「這個字型比較大」而用較高層次的標題

3. 顏色對比度（Color Contrast）

根據 WCAG 2.1 標準，文字與背景的對比度：

  • 一般文字：最低 4.5:1
  • 大字體（18px bold 以上）：最低 3:1

測試工具：WebAIM Contrast Checker（免費）

灰色文字在白色背景上是最常見的低對比度問題。

4. 鍵盤可操作性

你網站的所有功能，應該要能用鍵盤完成（Tab 鍵切換焦點，Enter 激活按鈕）。

這影響的不只是鍵盤用戶，也影響沒有 JavaScript 的環境。

測試方法：把滑鼠放一邊，只用鍵盤操作你的官網，看看能不能完成所有主要操作。

5. 表單的標籤（Label）

每個表單欄位都應該有清楚的標籤，不能只靠 placeholder 文字作為說明：

<!-- 壞的 -->
<input type="email" placeholder="你的 Email">

<!-- 好的 -->
<label for="email">Email 地址</label>
<input type="email" id="email" placeholder="example@mail.com">

快速評估你的網站

使用 Google Lighthouse（在 Chrome 開發者工具中）：

  1. F12 打開開發者工具
  2. 點擊「Lighthouse」分頁
  3. 勾選「Accessibility」
  4. 運行分析

分數低於 80 的，有明顯的無障礙問題需要修正。

與 SEO 重疊的部分

無障礙設計要求SEO 效果
圖片 alt 文字圖片搜尋排名 + 內容理解
正確標題結構關鍵字權重分配
文字可選取（非圖片文字）爬蟲可讀取
連結有描述性文字錨文字關鍵字信號
頁面有清楚的語言標記地區和語言定向

做好無障礙設計，是在不需要額外費用的情況下，同步提升 SEO 和使用者體驗的策略。