Accessibility 無障礙

讓更多使用者，包括使用鍵盤或輔助工具的人，也能使用產品。

先用一句話理解

讓更多使用者，包括使用鍵盤或輔助工具的人，也能使用產品。

打個比方

像店門口有斜坡、清楚標示與足夠照明。

什麼時候會遇到

表單、按鈕、導覽、錯誤訊息、公開網站都需要。

再往深一點看

Accessibility（無障礙，縮寫 a11y）是讓包含視覺障礙、肢體障礙、聽覺障礙或認知差異的使用者，都能透過輔助技術（如螢幕閱讀器、鍵盤導覽、語音輸入）使用你的產品。無障礙設計的技術面包括：為圖片加 alt 屬性、用語意化的 HTML 標籤（button 而不是 div 加上 click handler）、確保色彩對比度符合 WCAG 標準、讓所有互動元素都能用 Tab 鍵聚焦。Accessibility 和 UI 的關係是：好的 UI 設計本來就應該把無障礙考慮進去，而不是最後再補上去的功能。做到基礎無障礙不只是照顧少數使用者，它也直接改善所有人的體驗，例如清楚的錯誤訊息、夠大的按鈕和高對比文字，任何人都受益。

舉個例子

你的登入表單在 Figma 設計時選了淡灰色提示文字，看起來很簡潔，但色彩對比度只有 2.5:1，不符合 WCAG AA 標準的 4.5:1 要求。換成深灰色後，視力較弱的使用者能看清楚，用螢幕閱讀器的使用者透過 label 和 aria-required 也能知道哪些欄位必填。

常見誤解

- 用 div 或 span 加 onClick 當按鈕用，螢幕閱讀器讀不出這是可點擊元素，鍵盤 Tab 也無法聚焦到它，使用輔助技術的使用者根本無法操作。
- 選了視覺上很「現代感」的淡色系文字配淺色背景，忽略對比度檢查，弱視使用者、在陽光下看手機的使用者都看不清楚。
- 表單欄位沒有 label（只用 placeholder 代替），螢幕閱讀器用戶在輸入時聽不到欄位名稱，填到一半不知道自己在哪個欄位；placeholder 消失後視力正常的使用者也會忘記要填什麼。