ARIA 角色列表：最佳參考比較

ARIA 角色清單包含 WAI-ARIA 1.2 W3C 特定規格中的 82 個定義值，其功能類別包括：文件角色、地標角色、小部件角色、結構角色、視窗角色和抽象角色。選擇合適的參考資料取決於你是需要快速對照表、包含程式碼範例的說明文件，還是關於何時應用每個角色的決策指南。

要點

• WAI-ARIA 1.2 的具體說明定義了 82 個角色，但在日常開發可訪問的 XHTML/CSS 網站時，僅使用其中一小部分。
• ARIA 的第一條規則仍然有效：如果存在具有你所需語義的原生 HTML 元素，請直接使用它，而不是添加角色。
• 抽象角色（例如 role="widget" 或 role="input"）絕不應寫在標記中；它們僅作為分類基礎。
• 對前端開發有用的參考資料應包含角色、其強制性 ARIA 屬性、允許的狀態以及實際的標記範例。
• 地標和小部件的角色集中在是 axe-core 或 Lighthouse 等自動審計工具偵測到錯誤最集中的地方。

什麼是 ARIA 角色，以及為什麼你需要一份可靠的清單

ARIA 角色是一個透過 role 屬性分配給元素的值，用於告知輔助技術該元素代表哪種類型的組件。瀏覽器透過可訪問性樹（accessibility tree）公開該角色，而 NVDA、JAWS 或 VoiceOver 等螢幕閱讀器會將其轉換為具體的播報內容：例如「按鈕」、「分頁」、「區域」或「對話框」。

WAI-ARIA 的具體說明是 W3C ARIA 工作小組的規定，定義了每個角色及其允許的狀態和屬性。版本 1.2 是實際可用的建議版本，ARIA 1.3 則處於開發階段。對於 XHTML 和 CSS 的工作人員來說，角色清單並非裝飾性目錄：每個錯誤應用的值都會導致元素的原生語義與聲明語義之間產生衝突，而螢幕閱讀器根據瀏覽器的不同，解決此衝突的方式也不同。

MDN（Mozilla 開發者網路）的 ARIA 角色官方文件是有關技術的參考，包括西班牙語和英語的諮詢，但並非如此。此外還有速查表、模式指南和驗證工具，滿足不同的需求。比較這些資源有助於選擇最適合你工作流程的一項。

ARIA 角色類別

官方分類法的角色和功能。了解這些類別可以避免在錯誤的清單中搜尋。

**文檔角色。 ** 描述頁面或部分的結構：article、document、feed、heading、img、list、listitem、math、none、note、presentation、row、separator、table、term、`toolbar, tooltip。大量複製 HTML 元素，因此很少需要手動編寫。

相關： UserWay — 免費使用計劃的小工具.

**地標角色。 ** 定義頁面的可導航區域：「banner」、「complementary」、「contentinfo」、「form」、「main」、「navigation」、「region」、「search」。這是在 HTML 語意不完整的網站上最常用的方法。

**小部件角色。 ** 代表互動控制：button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio、scrollbar、searchbox, slider, spinbutton, switch, tab, tabpanel, textbox, treeitem。這些角色需要焦點和鍵盤管理。

**結構角色。 ** 組織小工具包括：application、grid、group、listbox、menu、menubar、radiogroup、tablist、tree、treegrid、rowgroup、columnheader、rowheader。

值得一看： AudioEye — Accesibilidad gestionada：自動化與人性化修訂結合.

**視窗角色。 ** 疊加或模態內容管理：alertdialog、dialog。

**抽象角色。 ** 標記中沒有寫入任何元素：command、composite、input、landmark、range、roletype、section、sectionhead、select、struct、widget、window。 它們用於讓規範在角色之間繼承屬性。

比较：角色 ARIA 的最佳参考

下表根據實務標準比較了開發者最常用的參考資料。

參考	類型	語言	程式碼範例	理想之選
MDN Web 文件（角色 ARIA）	官方文件	多語言（包括西班牙語）	是，按角色分類	深入技術諮詢
WAI-ARIA 1.2 (W3C)	規格規格	英文	沒有	精確符合驗證
WAI-ARIA 創作實踐指南	英文	是，完整模式	實作具備鍵盤功能的部件
Hoja de Referencia Tipo 備忘錄	摘要表	英語	極少	在編輯器中快速查閱
accessibility.build（參考 ARIA）	實務參考	英文	巳	透過帶註釋的範例學習
Auditores（斧核、燈塔）	工具	多語言	沒有	偵測無效角色

選舉取決於時刻。在馬卡多的書寫過程中，您可以參考緊湊的速度。 Al depurar un widget que no anuncia bien su estado, la especación del W3C and la guía de WAI son las fuentes que resuelven la duda.

如何決定應用哪個角色：實務標準

正确的决定是通过 ARIA 进行的。 按照以下順序執行這些標準，可以避免大多數錯誤。

1. **¿是否存在原生 HTML 元素？ ** <button> 已經有 button 的隱式角色。添加 role="button" 是多餘的，並且可能會引起衝突。
2. **¿角色需要强制属性？ ** role="checkbox" 需要 aria-checked。 role="slider" 需要 aria-valuenow、aria-valuemin 和 aria-valuemax。如果你不能維持這些狀態，那麼這個角色弊大於利。
3. **¿角色涉及键盘管理？ ** 小部件角色需要使用箭頭、Home、End 和 Esc 進行導航，具體取決於模式。沒有箭頭處理的 role="tablist" 比沒有箭頭處理更糟。
4. ¿ El rol es abstracto? 如果它在抽象角色清單中，則不應寫入。
5. **¿该角色是否已过时或不再使用？ ** ARIA 1.0 和 1.2 之间更改了一些值。請務必查閱目前版本。

W3C 技術指南中認可的使用 ARIA 的第一條規則是：盡可能使用本機 HTML。 ARIA 是 HTML 不夠用時的補丁，而不是替代品。

相關： IAAP CPACC / WAS Certification — 獲得相關經驗的專業認證.

諮詢和應用角色清單時經常出現的錯誤

一個常見的錯誤是直接從速查表複製角色，而未檢查其必填屬性。 ARIA 1.2 中的 role="combobox" 與 1.0 相比，與 aria-expanded 和 aria-controls 之間的 listbox 相關。應用舊版本會導致在更新後的螢幕閱讀器中播報失效。

使用role =“presentation”或role =“none”來“清理”語義也很常見，而不理解它從可訪問性樹中刪除了元素，在某些情況下包括其子元素。這也以“role =“application””頻率出現，它將所有鍵盤控制轉移到小部件並禁用螢幕閱讀器快捷方式；它是為複雜的 Web 應用程式保留的，而不是為表單保留的。

重複的地標角色通常會造成混淆：在不同的頁面上執行“role=”main”，或在“

如果您正在購物： accessiBe — IA 超級位置將在 48 小時內推動 WCAG.

”上執行“role=”banner”，導致區域導航不連貫。使用 axe-core 或瀏覽器的可訪問性工具可以偵測到許多此類情況，但沒有任何自動工具能取代使用真實螢幕閱讀器的測試。

如何驗證標記中的角色

手動檢測和自動化相結合的角色組合。 Chrome 和 Firefox 的開發工具包括一個輔助面板，顯示作業系統接收到的可訪問性樹，以及每個節點的計算角色。這是查看聲明的角色是否有效，或是否被原生語義覆蓋的最直接方式。

axe-core（整合於 Lighthouse 中且提供擴充功能）會標記無效角色、缺失的必填屬性以及矛盾的組合。 Web 擴充 Accessibility Insights，以斧頭規則為基礎，提供引導式檢查。對於真實用戶測試，NVDA 在 Windows 和 VoiceOver 在 macOS 上定義的驗證：沒有任何驗證器能偵測出播報內容在特定情境下是否易於理解。

MDN 的存取文件和 WAI-ARIA 的 W3C 贊助人在開發過程中提供的便利。 La Primera explica cada rol； la segunda muestra como se Combinan en completos.

資料來源與進一步閱讀

• WAI-ARIA — 維基百科：Web 可訪問性倡議 – 可訪問的富互聯網應用程式 (WAI-ARIA) 是萬維網聯盟 (W3C) 發布的一項技術規範，…

常見問題

有多少個 ARIA 角色？

W3C WAI-ARIA 1.2 規格總共定義了 82 個角色，分為文件角色、地標角色、小部件角色、結構角色、視窗角色和抽象角色。在這種情況下，通常的開發中只使用了一小部分：抽象角色永遠不會被編寫，並且許多文件角色重複本機 HTML 元素。

ARIA 角色和 ARIA 屬性之間有什麼區別？

ARIA 角色描述元素「是什麼」，而 ARIA 屬性描述其「狀態」或「屬性」。例如，role="checkbox" 識別該組件，而 aria-checked="true" 則傳達其是否被選中。 角色透過 role 屬性分配；狀態和屬性則使用 aria- 前綴。

¿ Debo usar ARIA si ya uso HTML 语义？

在大多數情況下不需要。語意 HTML 已經公開了隱式角色：<nav> 相當於 role="navigation"，而 <main> 相當於 role="main"。明確添加角色是多餘的，並且可能會產生衝突。 ARIA 是為 HTML 未涵蓋的元件保留的，例如標籤、樹或複雜的選單。

哪些 ARIA 角色絕不應該寫在標記中？

抽象角色不應該出現：「command」、「composite」、「input」、「landmark」、「range」、「roletype」、「section」、「sectionhead」、「select」、「structure」、「widget」和「window」。它們的存在只是為了規範定義角色之間的屬性繼承。寫入它們會產生驗證器標記的無效角色。

如何驗證 ARIA 角色是否正常運作？

驗證結合了三個步驟：檢查瀏覽器開發工具中的可訪問性樹以確認計算出的角色，傳遞 axe-core 等驗證器以檢測缺少的強制屬性，以及使用 NVDA 或 VoiceOver 等真實螢幕閱讀器進行測試。只有最後一步才能確認該公告對於一個人來說是可以理解的。

ARIA 角色在不同版本的規範之間會改變嗎？

巳。 ARIA 1.1 的角色包括“饋送”和“切換”，ARIA 1.2 修改了“組合框”的功能並整合了其他價值。 ARIA 1.3 已發布。請參閱有關不同形式的現代螢幕閱讀器對過時模式的解釋方式可能有所不同。