什麼是網站無障礙設計？
網站無障礙設計（Web Accessibility）是指：確保你的網站能被所有人使用，包括有視覺、聽覺、運動或認知障礙的用戶。
具體來說，這意味著：
視障用戶使用「螢幕閱讀器」（Screen Reader）可以理解你的網站
色盲用戶可以區分頁面上的重要資訊
只用鍵盤（不用滑鼠）的用戶可以瀏覽你的網站
低視力用戶在縮放頁面時，內容不會跑版
WCAG（Web Content Accessibility Guidelines）是這個領域的主要標準，分 A、AA、AAA 三個級別，AA 是大多數商業網站的合理目標。
為什麼它和 SEO 有關？
Google 的爬蟲（Googlebot）在某種程度上「像」螢幕閱讀器一樣解讀你的網站——它無法真正看到圖片，只能讀取文字、HTML 結構和 alt 屬性。
當你的網站符合無障礙設計標準，它通常也對 Google 爬蟲更友好：
圖片有清楚的 alt 文字 → Google 了解圖片內容 → 圖片搜尋排名提升
頁面有清楚的標題層級（h1、h2、h3）→ Google 理解頁面結構和主題重點
連結有描述性文字（不是「點這裡」）→ Google 理解連結目的地的主題
表單有清楚的標籤（label）→ Google 理解表單用途
內容文字對比度夠高 → Google PageSpeed Insights 無障礙分數影響整體排名
這些改善同時服務了真實的無障礙需求，也強化了你的 SEO 基礎。
最重要的基礎改善：alt 文字
圖片的 alt 屬性（Alternative Text）是對圖片的文字描述，供螢幕閱讀器讀取，也讓 Google 理解圖片內容。
壞的 alt 文字（或沒有 alt 文字）：
沒有 alt：img src="photo.jpg"
無意義的 alt：alt="photo"
只放檔案名稱：alt="IMG_2847.jpg"
好的 alt 文字：
alt="網頁設計師在使用筆電設計品牌官網"
alt="SimpleCreative 設計的健身教練個人品牌網站截圖"
alt="網站速度優化的步驟示意圖"
例外：純裝飾性的圖片（分隔線、背景紋理）應該用空的 alt=""，告訴螢幕閱讀器跳過這張圖。
顏色對比度（Color Contrast）
WCAG AA 標準要求：
正文文字（小於 18px）和背景的對比度至少 4.5:1
大文字（18px+ 或 14px+ 粗體）和背景的對比度至少 3:1
UI 元件（輸入框邊框、圖示）至少 3:1
用工具檢查你的配色：
Contrast Checker（contrastchecker.com）
Chrome DevTools > Accessibility > Color Contrast
WebAIM Contrast Checker（webaim.org）
常見的失敗例子：
淺灰色文字（#ccc 或 #d0d0d0）在白色背景上——幾乎所有「高品質設計」都有這個問題
橘色或黃色文字在白色背景上
淺藍色連結在白色背景上
鍵盤可及性
網站應該可以只用鍵盤（Tab、Enter、方向鍵）完整瀏覽，不依賴滑鼠。
實際測試方式：打開你的網站，不使用滑鼠，只用 Tab 鍵切換焦點，看是否能瀏覽所有可點擊的元素。
常見問題：
按鈕沒有可見的 focus outline（聚焦框）
自訂的點擊元素（沒有正確 role 的 div 或 span）不能用 Enter 觸發
頁面跳轉後焦點沒有合理地轉到新內容
在 CSS 中不要使用 outline: none; 來移除所有 focus 樣式——這對鍵盤用戶和螢幕閱讀器用戶是很大的障礙。如果不喜歡瀏覽器預設的 focus 樣式，self-styled focus 是可以的，但不要完全移除。
語意化 HTML 的重要性
使用語意化 HTML 標籤（h1-h6、nav、main、article、section、button、a）而不是純 div，讓螢幕閱讀器和搜尋引擎都能理解頁面結構。
常見的反模式：
用 div 做按鈕：div class="btn" 而不是 button
整個 hero 區塊沒有 h1 → 搜尋引擎不知道頁面主題
導航欄沒有包在 nav 標籤內 → 螢幕閱讀器無法快速跳到導航
圖片沒有 alt → 螢幕閱讀器讀到空白
一個務實的起步检查清單
如果你想開始改善你的網站的無障礙設計，以下是最有 ROI 的六個改善點：
檢查所有圖片是否有有意義的 alt 文字
確保頁面有且只有一個 h1 標籤
用對比度工具檢查主要文字顏色是否通過 AA 標準
確保所有連結文字是描述性的（不是「點這裡」）
測試網頁只用鍵盤是否可以正常操作
確保表單的每個輸入框都有對應的 label 標籤
這些改善通常可以在幾個小時內完成，但對使用者體驗和 SEO 的長期影響是持續的。