ARIA 角色範例：完整指南

ARIA 角色範例展示了角色屬性如何將介面元素對應到可訪問性樹，WAI-ARIA 1.2 規格定義了 6 個角色類別（小部件、文件結構、地標、活動區域、視窗和摘要），涵蓋 80 多個特定角色。本指南為每個類別提供了可供複製的實際範例，以及確定角色何時提供協助以及何時主動造成傷害的規則。

要點

• ARIA 角色告訴輔助科技一個項目是什麼；它們不會自行添加行為、焦點或鍵盤支援。
• 使用 ARIA 的第一條規則是優先選擇原生 HTML 元素，這些元素已經帶有隱式角色、狀態和鍵盤管理。
• 六個 WAI-ARIA 1.2 角色類別是小部件、文件結構、地標、活動區域、視窗和摘要 - 抽象角色永遠不應出現在您的標記中。
• 地標角色是您可以新增至現有 XHTML/CSS 網站的最具成本效益和最低風險的 ARIA。
• 小部件角色幾乎總是需要 JavaScript 映射來進行鍵盤互動和狀態處理，否則它們會產生比純 HTML 更糟糕的體驗。
• 使用螢幕閱讀器和自動檢查器驗證每個角色；規範中的有效角色對於您的內容來說可能仍然是錯誤的。

ARIA 角色的實際用途

ARIA 角色是您放置在「role」屬性中的標記，用於替換或提供可訪問性樹中元素的語義標識。 <div role="button"> 告訴螢幕閱讀器宣布“按鈕”，但瀏覽器仍然將其視為通用容器：它不可聚焦，不響應 Enter 或 Space，並且沒有禁用狀態。廣告語意與實際行為之間的差距是 ARIA 失敗的最常見原因。這些是常見的詠嘆調角色範例，說明語意如何與行為不同。

WAI-ARIA 規範由 W3C 的可存取富互聯網應用程式工作組維護，定義了角色以及狀態和屬性。角色是「它是什麼」層；諸如 aria-expanded、aria-checked 和 aria-label 之類的狀態和屬性是「它所處的條件」層。沒有所需狀態的角色是不完整的 - role="checkbox" 需要 aria-checked，而 role="combobox" 需要 aria-expanded 加上一個受控列錶框。

原生 HTML 元素具有隱含的角色。 <button> 對應於按鈕角色，<nav> 對應於導航，<h1> 到 <h6> 對應於標題，<input type="checkbox"> 對應於複選框。由於瀏覽器自動提供角色、鍵盤行為和狀態，因此使用 ARIA 的首要規則（記錄在 W3C 的 ARIA 創作實踐指南中）是只要存在等效元素就使用本機語義。僅當沒有合適的本機元素時才尋找顯式角色，例如自訂樹視圖或從「

<header role="banner">
  <nav role="navigation" aria-label="Principal">
    <ul>...</ul>
  </nav>
</header>
<main role="main">
  <article>...</article>
  <aside role="complementary" aria-label="Artículos relacionados">...</aside>
</main>
<footer role="contentinfo">...</footer>