Accessibility 常縮寫成 a11y，代表讓不同能力、裝置與操作方式的使用者都能使用產品。
面試官可能會問：
- 為什麼要用 button，不用 div 加 onClick？
- ARIA 是什麼？
- Modal 開啟後 focus 要去哪？
- 圖片的 alt 怎麼寫？
- 怎麼檢查頁面是否能用鍵盤操作？
先使用語意化 HTML
不好的按鈕：
<div onClick={handleSubmit}>送出</div>它預設不能用 Tab 聚焦，也不會回應 Enter / Space，screen reader 也不知道它是按鈕。
正確做法：
<button type="button" onClick={handleSubmit}>
送出
</button>原生元素已經包含 keyboard、focus 和語意行為。能用原生 HTML，就不要先用 ARIA 模擬。
ARIA 是什麼？
ARIA 用來補充原生 HTML 無法完整表達的 role、state、property。
<button
type="button"
aria-expanded={isOpen}
aria-controls="account-menu"
>
帳號選單
</button>ARIA 不會自動增加行為。加上 role="button" 不會自動支援鍵盤，也不會自動有 focus。
第一原則：No ARIA is better than bad ARIA。
鍵盤操作要檢查什麼？
只使用鍵盤測試：
- Tab 能否依合理順序移動
- Shift + Tab 能否反向移動
- Button 能否用 Enter / Space 操作
- Menu、Tabs、Dialog 是否符合常見鍵盤模式
- Focus indicator 是否清楚可見
- 是否有 keyboard trap
不要隨意設定正數 tabIndex，它會讓 focus order 難以維護。
Modal 的 Focus Management
Modal 開啟時通常要：
- 把 focus 移到 dialog 或第一個可操作元素
- Tab 不應跑到背景頁面
- Escape 可以關閉
- 關閉後把 focus 還給原本觸發按鈕
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">刪除確認</h2>
<button type="button">取消</button>
<button type="button">確認刪除</button>
</div>實務上可優先使用成熟 dialog component，而不是自己從零處理所有 keyboard 與 screen reader 行為。
表單 Label 和錯誤訊息
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
aria-invalid={Boolean(error)}
aria-describedby={error ? "email-error" : undefined}
/>
{error && <p id="email-error">請輸入有效 Email</p>}Placeholder 不能取代 label，因為輸入後會消失，而且對可讀性與輔助技術都不夠穩定。
圖片 alt 怎麼寫？
- 有資訊的圖片：描述它在上下文中的意義
- 裝飾圖片：使用空
alt="" - 圖片按鈕：alt 應描述操作，不只是外觀
- 圖表：提供等價文字或資料表
不要寫「圖片」或「一張圖片」，screen reader 已經知道它是 image。
顏色與動態效果
不要只靠顏色傳達狀態，例如錯誤除了紅色，也應有文字或 icon。
動態效果要尊重使用者偏好：
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto;
animation-duration: 0.01ms;
}
}怎麼測試 Accessibility？
我會分三層：
- ESLint / axe 等自動檢查
- 只用鍵盤走一次核心流程
- 用 VoiceOver 或 NVDA 做基本 screen reader 測試
自動工具抓不到所有問題，例如 focus order 合不合理、替代文字是否真的有意義，仍需要人工檢查。
面試回答模板
我會先用 semantic HTML，因為原生 button、input、label 已經有鍵盤和輔助技術需要的行為，ARIA 只用來補足語意。開發時會檢查 Tab order、focus indicator、modal focus trap、表單 label 和 error association，也會避免只靠顏色傳達狀態。驗證上除了 axe，也會實際用鍵盤和 screen reader 走核心流程。