# 什麼是 ARIA？輔助科技能理解互動元件的關鍵語意

最後更新: 2026-10-03

英文版本：[https://accesserty.com/en/ai/glossary/aria.md](https://accesserty.com/en/ai/glossary/aria.md)

頁面版本：[https://accesserty.com/glossary/aria/](https://accesserty.com/glossary/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 必須和實際互動一致。

## 相關頁面

- [以原生 HTML 與 ARIA 實作互動](https://accesserty.com/guides/aria-patterns-for-developers/)
- [先選合適的 HTML 元素](https://accesserty.com/glossary/semantic-html/)
- [確認控制項名稱](https://accesserty.com/glossary/accessible-name/)

## 參考資料

- [W3C WAI-ARIA Overview](https://www.w3.org/WAI/standards-guidelines/aria/)
- [W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
- [W3C ARIA APG Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)
- [MDN ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)