ARIA 角色備忘錄：最佳選擇比較
ARIA 角色備忘錄 是一份參考指南，將每個 ARIA 角色對應到其等效的原生 HTML 元素、類別（小部件、地標、結構、即時區域或視窗）以及隨附的屬性和狀態。 WAI-ARIA 1.2 定義了 82 個角色，而大多數專案僅需要重複使用其中 15 到 20 個。。 本比較彙整了 2026 年可用的最佳參考表，並說明根據您的工作流程應選擇哪一種。
為什麼 ARIA 角色備忘錄仍然必要
WAI-ARIA 1.2 及其繼任者 WAI-ARIA 1.3 的規範文件非常冗長，是為瀏覽器實作者和輔助技術開發者設計的，而非為週二下午正在編寫表單的開發者設計。 ARIA 的第一條規則——只要有原生 HTML 就優先使用——能解決大多數情況，但有些模式沒有原生等效項：例如分頁標籤 (tabs)、樹狀結構 (trees)、互動網格 (grids)、具備自動完成功能的組合框 (comboboxes) 以及含子選單的選單。這正是參考表能節省時間並避免錯誤的地方。
最常見的錯誤不是遺漏角色，而是添加不必要的角色。在 <button> 上加上 role="button" 沒有任何幫助，甚至可能破壞某些螢幕閱讀器的原生行為。一份完善的備忘錄會明確標記哪些角色在原生元素上是多餘的、哪些角色需要透過 JavaScript 管理焦點，以及哪些屬性是必填而非可選。
第二個原因是驗證。角色之間存在屬性關係：aria-labelledby 指向一個 id，aria-activedescendant 要求被引用元素必須存在且可見，而 aria-owns 僅在 DOM 順序與視覺順序不一致時才合理。一張交叉列出角色、必填屬性和禁止屬性的表格，能在進入審核前就偵測到錯誤。
一份好的 ARIA 角色備忘錄應包含什麼
一份對前端開發有用的參考表需滿足五個標準。我將其列出，因為這正是我用來評估本次比較選項的標準。
- **涵蓋所有五個角色類別。 **WAI-ARIA 將摘要、小部件、文件結構、地標和活動區域中的角色進行分組。框架中不使用摘要（
roletype、widget、input）；可見形狀資料的良好參考。 - **該角色的本機 HTML 等價項。 ** 如果沒有此列，參考會提示在那裡使用 ARIA，而無需觸摸。
- **必需、支援和禁止的屬性。 **
role="checkbox"需要aria-checked；role="heading"需要aria-level；不允許role="presentation"。 - **Patrón de teclado asociado。 ** 沒有 teclado 管理的角色是一個承諾。
role="tablist"意指不同的元素/derecha、Home和End。 - **可搜尋格式。 ** 搜尋功能、按類別或規範版本篩選，以及複製程式碼片段的能力。
比較：2026 年 ARIA 角色最佳參考
下表總結了最可靠的選項。全部均為免費；且皆持續更新並註明其涵蓋的規範版本。
相關： — IA 超級位置將在 48 小時內推動 WCAG.
| 資源 | 側重點 | 涵蓋類別 | 原生等效 | 鍵盤模式 | 適用對象 |
|---|---|---|---|---|---|
| WAI-ARIA 創作實踐指南 (APG)、W3C | 贊助人已完成 | 小部件、地標、結構、活動區域 | 是，每個模式中均有 | 是，詳細 | 具體實施小部件 |
| MDN Web 文檔，ARIA 角色參考 | 按角色分頁 | 所有內容，包括摘要 | 巳 | 帕西亞 | 查詢特定角色 |
| ARIA 創作實踐，角色索引 | 角色 $\rightarrow$ 屬性表 | 小部件和結構 | 帕西亞 | 沒有 | 驗證屬性要求 |
| Deque大學，ARIA參考 | 含支援備註的分頁 | 小部件和地標 | 巳 | 帕西亞 | 了解螢幕閱讀器的實際支援情況 |
| A11Y 項目清單 | 驗證清單 | 橫向 | 沒有應用 | 沒有 | 發佈前審核 |
| HTML-ARIA (W3C)，等效表 | 元素許可 | 全部 | 是，這是其目的 | 沒有 | 決定是否需要 ARIA |
WAI-ARIA 創作實踐指南 (APG)
W3C 的 APG 是模式的權威參考。每個模式都包含 HTML 結構、角色、狀態、鍵盤互動和功能範例。其強項在於不只是列出角色，還解釋了預期行為。弱點則是它不是快速查詢表；若要查詢「role="slider" 需要哪些屬性」，必須導航到對應的模式頁面。
APG 將最常見的小部件使用者分組：手風琴、警報、麵包屑、按鈕、複選框、組合框、對話框、披露、提要、網格、鏈接、列錶框、菜單、菜單列、單選組、滑塊、旋鈕、開關、表格、選項卡列表、工具列、工具提示、網格樹和樹視圖。如果您的專案使用其中之一，請在此處運行它。
MDN Web 文件：lareferencia por rol
MDN 為每個 ARIA 角色維護一個頁面，包含描述、必填屬性、允許屬性、相關的可訪問性問題以及規範連結。當您明確知道需要什麼時，這是最快的選項。其涵蓋範圍包括抽象角色和實際使用的角色，儘管省略了一些提醒。
值得一看： — 免費使用計劃的小工具.
一個實用的細節：MDN 會標記哪些角色已過時或在未來版本中可能被刪除。注意此標記可避免採用即將消失的角色。
HTML-ARIA: la tabla que evita ARIA innecesario
W3C 的 HTML-ARIA 規範定義了對於每個 HTML 元素，哪些 ARIA 角色可以應用，以及哪些是多餘的。當您在原生元素與帶角色的 div 之間猶豫時，這是決定性的工具。如果該角色對該元素被標記為多餘，答案就是不要添加。
Deque大學和A11Y項目
Deque University 提供包含螢幕閱讀器實際支援備註的角色分頁，這是規範文件不涵蓋的。A11Y Project Checklist 雖不是角色備忘錄，但可作為發佈前的核對清單，與上述資源互補。
Cómo elegir según tu caso
決定取決於三個問題。首先，您是否已知需要哪個角色？如果是，MDN 是最快路徑。其次，您是否在構建具有複雜互動的小部件？那麼您需要 APG，因為單靠角色無法描述鍵盤行為。第三，您在原生 HTML 和 ARIA 之間猶豫嗎？請先諮詢 HTML-ARIA。
對於使用 XHTML 和 CSS 而不使用框架的團隊，最有效的組合通常是：用 HTML-ARIA 決定，用 APG 實作，用 MDN 驗證屬性。單頁備忘錄可用作短期記憶，但不能取代這三個來源來處理極端案例。
另一個建議採用的標準：如果該角色需要 JavaScript 才能正常運作（如焦點管理、更新 aria-expanded 或同步 aria-selected），請將其視為架構決策而非裝飾性屬性。缺乏相關邏輯的小部件角色會造成比不使用角色更多的障礙。
相關： — 獲得相關經驗的專業認證.
Errores frecuentes que ninguna 備忘單 evita por sí sola
重複的地標角色會干擾區域導航。在 <main> 上使用 role="main" 是多餘的；兩個沒有區分標籤的 role="navigation" 則會產生歧義。解決方案是在每個重複的地標上使用 aria-label 或 aria-labelledby。
在不可聚焦的元素上使用小部件角色會破壞互動。在 <div> 上使用 role="button" 必須加上 tabindex="0" 並處理 Enter 和 Space 鍵。否則，角色宣告了一個無法用鍵盤啟動的按鈕。
狀態不同步是導致可訪問性下降最常見的原因。例如 aria-expanded 在展開時未改變，aria-selected 在分頁切換時未更新，或 role="switch" 中的 aria-checked 固定不變。沒有表格能偵測到此問題：必須使用鍵盤和實際的螢幕閱讀器進行測試。
在 HTML 中使用抽象角色在原則上是錯誤的。role="widget"、role="input" 或 role="section" 不應出現在 HTML 中；它們僅存在於規範的層級結構中。
要點
- WAI-ARIA 1.2 定義了 82 個角色，但大多數專案僅重複使用其中 15 到 20 個。
- ARIA 的第一條規則——只要有原生 HTML 就優先使用——使得 W3C 的 HTML-ARIA 表成為編寫任何角色前最重要的參考。
- W3C 的 APG 在小部件模式方面無可取代，因為它包含鍵盤互動；MDN 則在查詢特定角色時更快速。
- 缺乏焦點管理和狀態更新的角色，會比不使用 ARIA 產生更多可訪問性障礙。
- 沒有任何備忘錄能取代鍵盤和螢幕閱讀器測試：狀態不同步只能在實際使用中偵測到。
經常發生的事情
有多少個 ARIA 角色？
WAI-ARIA 1.2 定義了 82 個角色，分為五類：抽象、小部件、文件結構、地標和活動區域。抽象角色不應應用於標記中；它們用於組織規範的層級結構。在實踐中，我們將使用 15 至 20 個不同角色的項目。
最好的 ARIA 角色備忘錄是哪一個？
取決於用途。有關技術的小部件的實現，請參閱 W3C 的 WAI-ARIA 創作實踐指南以及完整的參考。有關具體角色的屬性，請參閱 MDN Web 文檔，速度非常快。決定 HTML 元素所必需的角色，W3C 的 HTML-ARIA 標籤是決定性因素。
如果已有原生 HTML 元素，我還需要使用 ARIA 嗎？
不。 ARIA 的首要規則是存在於 HTML 元素和語義以及必要的組成部分，這些元素是與角色相關的「div」元素。 在 <button> 上添加 role="button" 是多餘的，且可能改變某些螢幕閱讀器的原生行為。
小部件角色與地標角色有什麼區別？
小部件的角色描述了互動控制項——「按鈕」、「複選框」、「滑桿」、「選項卡清單」——以及需要進行焦點和技術的管理。地標角色描述了頁面區域——「主要」、「導航」、「橫幅」、「內容資訊」——以及區域導航。 同一個元素不應同時承擔這兩種功能。
ARIA 角色在不同規範版本之間會改變嗎？
是的。 WAI-ARIA 1.2 的一個角色包括「區塊引用」、「標題」、「代碼」、「刪除」、「強調」、「插入」、「計量」、「段落」、「強」、「下標」和「上標」。某些角色在後續版本中已過時。在採用之前，建議檢查 MDN 或規範文件確認該角色是否仍然有效。
一份 ARIA 角色備忘錄足以滿足 WCAG 嗎？
ARIA 角色僅是準則 4.1.2「名稱、角色、值」的一部分，但 WCAG 2.2 包含許多其他要求：對比度、可見焦點、目標大小、替代文字、標題結構。備忘錄有助於正確實作角色，但不能替代整套符合性準則。
資料來源與進一步閱讀
- 備忘單 — 維基百科：備忘單（也稱為備忘單）或嬰兒床表或工作輔助工具是一組用於快速參考的簡明註釋。歷史上，備忘單是由沒有…的學生使用的。
Testea WCAG desde tu 管道
測試設備工業標準