無障礙開發
規則
- 語意化 HTML:使用
<button>、<nav>、<main>、<article>,而不是<div onClick> - ARIA 屬性:僅在語意化 HTML 無法表達該模式時才使用
- 鍵盤導航:每個可互動元素都必須可以透過鍵盤到達並操作
- 焦點管理:彈出視窗應鎖定焦點,路由切換時將焦點移至內容區
- 色彩對比:一般文字需 4.5:1,大文字(18px+ 或 14px+ 粗體)需 3:1
- 圖片替代文字:所有圖片都需提供
alt屬性,裝飾性圖片使用空alt="" - 表單標籤:每個輸入項目都需有可見的
<label>,並使用htmlFor關聯 - 跳過導覽連結:作為頁面上第一個可聚焦的元素
- 螢幕閱讀器測試:使用 VoiceOver (Mac) 或 NVDA (Windows) 進行測試