# 無障礙 A11y

### 觀念
* 請務必注意 h1~h6 的層級，中間不可以跳著用，一定要從 h1 開始，如果太麻煩就用 span 處理，但每頁仍必須保持至少有 h1/h2
* img 一定要有 alt，如果無法定義圖片的 alt，則給 alt="" 也合法（報讀軟體會略過）
* button 如果內容物不是文字，則必須給 aria-label 定義 button 的作用
* link 類型必須要有 title（前往 xxx），如果另開新視窗，則必須為「前往 xxx(另開新視窗)」
* 無障礙軟體無法選擇「客製化的 selector」，必須注意使用 role 和 aria 來表示其屬性
* TextInput 的 validate 可以透過 aria-required 來標注是否為必填
* popup modal 的 tab focus 必須要「限制在 modal 範圍內(wrapped)」
* 多數時候為了美觀，會將 outline 設定為 none 或 0，但對使用鍵盤操作的人會很困惑目前 focus 到哪裡，所以建議使用 :focus-visible 可以只限制使用滑鼠時的 outline 為 0（不影響鍵盤使用），但目前(2021/01/14) safari 不支援，必須裝 polyfill，詳見[:focus-visible(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)

### 參考資料
* 關於 aria 和 role 的使用，可參考 [Travor's Aria 報告](https://slides.com/travorlee/aria-65ba81)

###### tags: `html`