為什麼無障礙設計值得你花時間
台灣約有 120 萬名身心障礙人士，而廣義的「使用障礙」涵蓋更多人：
- 在陽光直射下看手機的用戶（需要足夠的對比度）
- 在吵鬧環境中無法播放影片聲音的用戶（需要字幕）
- 因手受傷只能用鍵盤瀏覽頁面的用戶
- 因視力退化而需要更大字體的中老年用戶
這些都不是小眾情境。
更重要的是，Google 把無障礙設計的多個指標（頁面結構、標籤、對比度）和 SEO 排名連結——改善無障礙性同時也在改善 SEO。
WCAG 的基本概念
WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引）是國際標準，分為三個合規等級：
A：最低標準，必須達到。
AA：大多數法規和最佳實踐的目標等級（台灣政府網站要求 AA）。
AAA：最嚴格，通常只有特定類型的內容才需要。
最重要的幾個無障礙設計原則
1. 色彩對比度
WCAG AA 要求：正文文字與背景的對比度至少 4.5:1；大型文字（18px 以上或 14px 粗體以上）至少 3:1。
檢查工具：WebAIM Contrast Checker（webaim.org/resources/contrastchecker）——輸入前景和背景顏色，立刻知道是否達標。
常見問題：設計師喜歡的淺灰色文字（如 #999 在白色背景上）往往不達標。確保你的輔助說明文字（表單說明、圖片描述）也有足夠的對比度。
2. Alt Text（圖片替代文字）
每一張有意義的圖片都應該有 alt 屬性描述圖片內容。螢幕閱讀器（視障用戶使用的輔助技術）會朗讀 alt 文字。
好的 alt text：「SimpleCreative 設計的台灣茶品牌形象官網截圖」
差的 alt text：「image1.jpg」或完全省略（沒有 alt 屬性）
裝飾性圖片（純視覺效果，不傳遞資訊）：設定 alt=""，讓螢幕閱讀器跳過。
Next.js 的 Image 元件要求 alt 屬性是必填的，這是好的強制設計。
3. 鍵盤可操作性
你的網站應該可以完全用鍵盤操作（不依賴滑鼠）：
Tab 鍵可以在所有互動元素（連結、按鈕、表單欄位）之間移動。
Visible Focus（可見的焦點指示器）：鍵盤聚焦到某個元素時，用戶能看到一個清楚的輪廓或高亮，知道焦點在哪裡。
常見問題：很多設計師用 CSS 的 outline: none 移除了瀏覽器預設的焦點樣式（因為看起來很醜），但這讓鍵盤用戶完全無法知道焦點在哪。
解決方法：用 :focus-visible 偽類來只對鍵盤焦點顯示客製化樣式，對滑鼠點擊不影響：
button:focus-visible {
outline: 2px solid #b8922a;
outline-offset: 3px;
}
4. 語意化 HTML 結構
使用正確的 HTML 元素：
標題層次（h1, h2, h3）要遵循邏輯順序，不能跳級（不能從 h1 直接跳到 h4）
按鈕用 button 元素，連結用 a 元素（不要用 div 模擬按鈕）
表單輸入框要有對應的 label 元素
這讓螢幕閱讀器能正確理解頁面結構，也讓 Google 更容易理解頁面的資訊架構。
5. ARIA（Accessible Rich Internet Applications）
當標準 HTML 元素不足以表達互動狀態時（例如自定義的下拉選單、對話框），使用 ARIA 屬性來補充語意：
aria-label：為元素提供無障礙名稱（例如圖示按鈕沒有文字時）
aria-expanded：表示摺疊/展開狀態
aria-hidden：讓螢幕閱讀器跳過純裝飾性元素
role：指定元素的角色（如 role="dialog"、role="navigation"）
快速審查你的網站
- 用 Google Lighthouse（Chrome DevTools → Lighthouse 分頁）的 Accessibility 評分作為起點
- 用 keyboard-only 操作你的整個網站 5 分鐘，注意什麼地方卡住了
- 用 axe DevTools（Chrome 擴充功能，免費）自動掃描無障礙問題
目標：Lighthouse Accessibility 分數達到 90 分以上。