前端無障礙實戰：5 個容易忽略的細節

網站 a11y 不只 alt 跟 aria-label。這 5 個細節是大多數人會忽略的，但對使用螢幕閱讀器或鍵盤的使用者影響極大。每個都附本站實際做法。

1. Focus 順序與視覺一致

用 Tab 在頁面導航時，:focus 的順序應該跟視覺順序一致。常見錯誤：

• 用 position: absolute 把元素移到視覺左上，但 DOM 還在最後 → Tab 跳到奇怪位置
• 用 tabindex="2" 強制順序 → 破壞自然 flow

正確：保持 DOM 順序 = 視覺順序。要改順序時用 CSS Grid order 但慎用。

且 :focus 要永遠可見：

:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }  /* 滑鼠 click 時不顯示 outline */
:focus-visible { outline: 2px solid var(--accent-blue); }

2. prefers-reduced-motion

有前庭功能障礙的使用者看到複雜動畫會頭暈。系統偏好「reduced motion」要尊重：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

本站的 hero scroll-scrub 動畫在 reduced motion 模式下停在第一幀，不再 scrub。

3. Skip Navigation

用螢幕閱讀器的使用者每打開一頁要先聽 navigation 才能進主內容。提供「跳過導航」連結：

<a href="#main-content" class="skip-nav">跳到主要內容</a>
<nav>...</nav>
<main id="main-content">...</main>

<style>
.skip-nav {
  position: absolute;
  top: -40px;  /* 平常隱藏 */
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
}
.skip-nav:focus {
  top: 0;  /* 鍵盤 Tab 到時顯示 */
}
</style>

4. 表單錯誤的 5 重提示

輸入錯誤的 email 不該只有紅色邊框。完整的 a11y 表單錯誤：

1. 顏色：紅色邊框
2. 圖示：⚠️ 或 ❌
3. 文字：「Email 格式錯誤」
4. aria-invalid：aria-invalid="true"
5. aria-describedby：連到錯誤訊息

<label for="email">Email</label>
<input id="email" type="email"
       aria-invalid="true"
       aria-describedby="email-error">
<span id="email-error" class="error">
  ⚠️ 請輸入有效的 email
</span>

5. 顏色 + 圖示（不只顏色）

色盲使用者無法區分純靠顏色傳達的資訊。例：

• ❌ 「成功」綠色 vs 「失敗」紅色 — 色盲看起來一樣
• ✅ 「成功 ✓」+ 綠色 vs 「失敗 ✗」+ 紅色 — 圖示輔助

表格內的數字趨勢同理：

<span class="up">↑ +12%</span>     <!-- 不只紅綠 -->
<span class="down">↓ -3%</span>

免費 a11y 檢查工具

實際聽一次螢幕閱讀器

所有 a11y 教學的最強建議：自己用一次螢幕閱讀器。Mac VoiceOver（Cmd+F5）、Windows NVDA（免費）。聽一次自己的網站，馬上知道哪裡爛：

• 圖片只念「圖片」（沒 alt）
• 按鈕念「按鈕」（沒文字）
• 連結念「點這裡」（不知道連去哪）

不過度（不破壞體驗）

• 不要每個 div 都加 role / aria — 多餘的 ARIA 比沒有更糟
• 不要塞太多 alt 文字 — 純裝飾圖片用 alt=""
• 不要為了 a11y 犧牲視覺 — 兩者可兼得

結語

a11y 不是「特殊使用者」的需求 — 是所有使用者在某個場景下會遇到（暫時手不方便、強光下看不清、噪音吵雜）。把 a11y 當成 base quality 而不是 add-on，才能做出真正好用的網站。