什麼是 ARIA？輔助科技能理解互動元件的關鍵語意
ARIA
ARIA 是一組角色、狀態與屬性，用來讓輔助科技理解複雜或自訂的互動元件。了解什麼時候該用 ARIA、什麼時候應優先使用原生 HTML。
最後更新:
重點摘要
- ARIA 可以補充角色、狀態與屬性，讓螢幕閱讀器等輔助科技理解自訂元件。
- ARIA 不是萬用修補工具；能使用原生 HTML 時，通常應優先使用原生 HTML。
- ARIA 是 Accessible Rich Internet Applications 的縮寫，常寫成 WAI-ARIA。
- W3C APG 提醒「No ARIA is better than Bad ARIA」：錯誤的 ARIA 會誤導輔助科技，可能比沒有 ARIA 更糟。
ARIA 是什麼？
ARIA 是 W3C WAI 發展的一組技術規格，用來補足複雜網頁應用程式中的語意資訊。當開發者用 div、span 或 JavaScript 建立自訂元件時，瀏覽器和輔助科技不一定知道它是按鈕、分頁、對話框或即時訊息區域。
ARIA 可以透過 role、aria-expanded、aria-controls、aria-live、aria-label 等屬性，提供輔助科技更多語意與狀態資訊。
先用原生 HTML，再考慮 ARIA
ARIA 最重要的實務原則是：能用原生 HTML 就不要先用 ARIA。原生 button、input、select、dialog、a 等元素通常已經內建鍵盤操作、角色與狀態，瀏覽器和輔助科技也比較能正確理解。
如果用 div 加上 role="button"，你仍然需要自己補鍵盤操作、焦點管理、disabled 狀態、名稱與互動回饋。這些細節漏掉任何一項，都可能造成新的無障礙問題。
ARIA 常見用途
ARIA 適合用在原生 HTML 無法完整表達的複雜互動，例如分頁、可展開區塊、對話框、選單、即時狀態更新與自訂元件狀態。
但列在這裡不代表一定要自製元件。簡單展開內容先考慮原生 details／summary；對話框先評估原生 dialog。仍要提供清楚名稱、合適的焦點與關閉方式，並測試實際操作；只有需要補充語意或狀態時才加適當 ARIA。
- role：告訴輔助科技元件扮演什麼角色。
- aria-label / aria-labelledby：提供可被讀出的名稱。
- aria-expanded：表示內容目前是否展開。
- aria-controls：描述控制項和被控制內容的關係。
- aria-live：讓動態更新能被輔助科技通知。
- aria-describedby：補充說明或錯誤訊息。
ARIA 用錯會更糟
ARIA 只改變輔助科技接收到的語意，不會自動讓元件變得可操作。加上 role="button" 不會自動支援 Enter 或 Space；加上 aria-expanded 也不會自動展開內容。
錯誤的 ARIA 可能讓螢幕閱讀器使用者聽到不正確的角色、狀態或名稱，反而比沒有 ARIA 更難理解。因此，ARIA 應該搭配實際互動、鍵盤操作與螢幕閱讀器測試一起驗證。
ARIA 檢查清單
檢查 ARIA 時，不只看屬性有沒有加上去，也要確認它是否和實際互動狀態一致。
- 是否能改用原生 HTML？
- 元件是否有正確的可及名稱？
- role 是否符合實際互動模式？
- aria-expanded、aria-selected、aria-current 等狀態是否即時更新？
- 鍵盤操作是否符合使用者預期？
- 焦點是否被正確管理？
- 螢幕閱讀器是否能理解名稱、角色、狀態與說明？
常見問題
ARIA 可以修好所有無障礙問題嗎？
不行。ARIA 主要提供語意與狀態資訊，不會自動補上鍵盤操作、焦點管理、視覺提示或內容品質。
什麼時候不該用 ARIA？
當原生 HTML 元素已經能提供正確語意與互動時，通常不應先用 ARIA 取代它。錯誤或多餘的 ARIA 可能讓輔助科技接收到混亂資訊。
ARIA 和螢幕閱讀器有什麼關係？
ARIA 會影響螢幕閱讀器取得的名稱、角色、狀態與說明。這能幫助使用者理解自訂元件，但前提是 ARIA 必須和實際互動一致。