WAI-ARIA 角色

ARIA 角色分為 6 類

文件結構角色用於提供對內容部分的結構描述。大多數這些角色不再應該使用，因為瀏覽器現在支援具有相同含義的語義 HTML 元素。沒有 HTML 等效元素的角色，例如 presentation、toolbar 和 tooltip 角色，為螢幕閱讀器等輔助技術提供有關文件結構的資訊，因為沒有可用的等效原生 HTML 標籤。

• toolbar
• tooltip
• feed
• math
• presentation / none
• note

對於大多數文件結構角色，都提供並支援語義 HTML 等效元素。避免使用

• application
• article (使用 <article>)
• cell (使用 <td>)
• columnheader (使用 <th scope="col">)
• definition (使用 <dfn>)
• directory
• document
• figure (使用 <figure> 代替)
• group
• heading (使用 h1 到 h6)
• img (使用 <img> 或 <picture> 代替)
• list (使用 <ul> 或 <ol> 代替)
• listitem (使用 <li> 代替)
• meter (使用 <meter> 代替)
• row (使用 <tr> 與 <table> 一起使用)
• rowgroup (使用 <thead>、<tfoot> 和 <tbody>)
• rowheader (使用 <th scope="row">)
• separator (如果不可聚焦，則使用 <hr>)
• table (使用 <table>)
• term (使用 <dfn>)

這些是為完整性而包含的，但在大多數情況下很少，甚至從未有用

• associationlist
• associationlistitemkey
• associationlistitemvalue
• blockquote
• caption
• code
• deletion
• emphasis
• insertion
• paragraph
• strong
• subscript
• superscript
• time

各種小部件角色用於定義常見互動模式。與文件結構角色類似，其中一些角色複製了良好支援的原生 HTML 元素的語義，不應使用。兩個列表之間的區別在於，一般來說，小部件角色需要 JavaScript 互動，而文件結構角色並不一定需要。

• scrollbar
• searchbox
• separator (當可聚焦時)
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem

請避免使用按鈕、複選框、網格單元格、連結、選單項、選單項複選框、選單項單選框、選項、進度條、單選框 和 文字框，這些我們已經為了完整性而包含進來。對於大多數情況來說，都存在語義等效的元素，並且支援可訪問的互動性。請檢視各個角色文件以獲取更多資訊。

複合小部件角色

• 組合框
• 選單
• 選單欄
• 選項卡列表
• 樹
• 樹狀網格

請避免使用網格、列表框 和 單選組，這些我們已經為了完整性而包含進來。請檢視各個角色文件以獲取更多資訊。

請注意，還有一個小部件角色 (role="widget")，這是一個抽象角色，不屬於小部件角色類別。

地標角色提供了一種識別網頁組織和結構的方式。透過對頁面部分進行分類和標記，以程式設計方式表示透過佈局在視覺上傳遞的結構資訊。螢幕閱讀器使用地標角色來提供頁面重要部分的鍵盤導航。請謹慎使用這些角色。過多的地標角色會在螢幕閱讀器中產生“噪音”，從而難以理解頁面的整體佈局。

• 橫幅 (文件 <header>)
• 補充內容 (<aside>)
• 內容資訊 (文件 <footer>)
• 表單 (<form>)
• 主體 (<main>)
• 導航 (<nav>)
• 區域 (<section>)
• 搜尋 (<search>)

即時區域角色用於定義內容會動態更改的元素。有視力的使用者可以在視覺上明顯地看到動態更改。這些角色可以幫助視力低下和失明的使用者瞭解內容是否已更新。輔助技術（如螢幕閱讀器）可以被設定為宣佈動態內容更改

• 警報
• 日誌
• 跑馬燈
• 狀態
• 計時器

視窗角色定義了主文件視窗內的子視窗，位於同一個視窗內，例如彈出模式對話方塊

• 警報對話方塊
• 對話方塊

抽象角色僅供瀏覽器使用，以幫助組織和簡化文件。開發人員編寫 HTML 標記時不應使用它們。這樣做不會導致任何有意義的資訊被傳達給輔助技術或使用者。

請避免使用命令、複合、輸入、地標、範圍、角色型別、部分、部分標題、選擇、結構、小部件 和 視窗。

以下是 MDN 上討論的 WAI-ARIA 角色的參考頁面。

ARIA：alert 角色

alert 角色用於重要資訊，通常是時間敏感的資訊。alert 是一種 status，被處理為原子即時區域。

ARIA：alertdialog 角色

alertdialog 角色應用於模式警報對話方塊，這些對話方塊會中斷使用者的操作流程，以傳達重要資訊並需要響應。

ARIA：application 角色

application 角色指示輔助技術將元素及其所有子元素視為類似於桌面應用程式，並且不應使用任何傳統的 HTML 解釋技術。此角色僅應用於定義非常動態且類似桌面的 Web 應用程式。大多數移動和桌面 Web 應用程式不被視為此目的的應用程式。

ARIA：article 角色

article 角色表示頁面的一部分，可以在頁面、文件或網站上獨立存在。它通常用於設定相關的內容項，例如評論、論壇帖子、新聞文章或其他在一個頁面上分組在一起的專案。

ARIA：banner 角色

banner 角色用於定義全域性站點標題，其中通常包括徽標、公司名稱、搜尋功能，以及可能包括全域性導航或口號。它通常位於頁面頂部。

ARIA：button 角色

button 角色用於可點選的元素，這些元素在使用者啟用時會觸發響應。新增 role="button" 會告訴螢幕閱讀器該元素是一個按鈕，但不提供按鈕功能。請改用 button 或 input 以及 type="button"。

ARIA：cell 角色

ARIA role 屬性的 cell 值將元素標識為表格容器中的單元格，該表格容器不包含列或行標題資訊。要獲得支援，單元格必須巢狀在具有 row 角色的元素中。

ARIA：checkbox 角色

checkbox 角色用於可選中互動式控制元件。包含 role="checkbox" 的元素還必須包括 aria-checked 屬性，以將複選框的狀態公開給輔助技術。

ARIA：columnheader 角色

ARIA role 屬性的 columnheader 值將元素標識為行中的單元格，該單元格包含列的標題資訊，類似於具有列範圍的本機 th 元素。

ARIA：combobox 角色

combobox 角色將元素標識為一個input，它控制另一個元素，例如 listbox 或 grid，這些元素可以動態彈出以幫助使用者設定該input 的值。

ARIA：command 角色

command 角色定義一個執行操作但不會接收輸入資料的視窗小部件。

ARIA：comment 角色

comment 角色在語義上表示對頁面上某些內容的評論/反應，或對先前評論的反應。

ARIA：complementary 角色

complementary 地標角色 用於指定一個支援部分，該部分與主要內容相關，但在分離時可以獨立存在。這些部分通常以側邊欄或呼叫框的形式呈現。如果可能，請改用 HTML <aside> 元素。

ARIA：composite 角色

composite 抽象角色 表示可能包含可導航後代或擁有子元素的視窗小部件。

ARIA：contentinfo 角色

contentinfo 角色定義一個頁尾，其中包含識別資訊，例如版權資訊、導航連結和隱私宣告，這些資訊存在於網站中的每個文件中。此部分通常稱為頁尾。

ARIA：definition 角色

definition ARIA 角色表示該元素是術語或概念的定義。

ARIA：dialog 角色

dialog 角色用於標記基於 HTML 的應用程式對話方塊或視窗，這些對話方塊或視窗將內容或 UI 與其餘 Web 應用程式或頁面隔離開來。對話方塊通常使用覆蓋層放置在頁面內容的頂部。對話方塊可以是非模式的（仍然可以與對話方塊之外的內容進行互動）或模式的（只能與對話方塊中的內容進行互動）。

ARIA: directory 角色

directory 角色用於引用組成員的列表，例如靜態目錄列表。

ARIA：document 角色

document 角色用於複雜複合視窗小部件 或應用程式 中的可聚焦內容，輔助技術可以將閱讀上下文切換回閱讀模式。

ARIA：文件結構角色

ARIA 文件結構角色用於為內容部分提供結構描述。

ARIA：feed 角色

feed 是一個動態可滾動的 list，其中包含 articles，當用戶滾動時，文章會從列表的任一端新增或刪除。feed 使螢幕閱讀器能夠使用瀏覽模式閱讀游標來讀取和滾動透過可能透過載入更多內容而無限滾動的資訊流，當用戶閱讀時，內容會繼續滾動。

ARIA：figure 角色

ARIA figure 角色可用於識別頁面內容中的圖形，其中適當的語義尚不存在。圖形通常被認為是一個或多個影像、程式碼片段或其他內容，這些內容以與普通文字流不同的方式傳遞資訊。

ARIA：form 角色

form 角色可用於識別頁面上的元素組，這些元素組提供與 HTML 表單等效的功能。除非表單具有 可訪問的名稱，否則它不會被公開為地標區域。

ARIA：generic 角色

generic 角色建立一個沒有名稱的容器元素，它本身沒有語義意義。

ARIA：grid 角色

grid 角色用於包含一個或多個行單元格的視窗小部件。每個單元格的位置都很重要，可以使用鍵盤輸入來聚焦。

ARIA：gridcell 角色

gridcell 角色 用於製作網格 或 樹狀網格 中的單元格。它旨在模仿 HTML td 元素的功能，用於表格式資訊分組。

ARIA：group 角色

group 角色標識一組使用者介面物件，這些物件不打算被輔助技術包含在頁面摘要或目錄中。

ARIA：heading 角色

heading 角色將此元素定義為頁面或部分的標題，aria-level 屬性提供更多結構。

ARIA：img 角色

ARIA img 角色可用於識別頁面內容中的多個元素，這些元素應被視為單個影像。這些元素可以是影像、程式碼片段、文字、表情符號或其他可以組合起來以視覺方式傳遞資訊的內容。

ARIA：input 角色

input 抽象角色是允許使用者輸入的視窗小部件的通用型別。

ARIA：landmark 角色

地標是頁面的重要子部分。landmark 角色是內容部分 aria 角色值的抽象超類，這些內容部分足夠重要，使用者可能希望能夠直接導航到這些部分。

ARIA：link 角色

link 視窗小部件提供對資源的互動式引用。目標資源可以是外部的也可以是本地的；即，可以是當前頁面或應用程式之外的，也可以是內部的。

ARIA：list 角色

ARIA list 角色可用於標識專案列表。它通常與 listitem 角色一起使用，用於標識包含在列表中的列表項。

ARIA：listbox 角色

listbox 角色用於列表，使用者可以選擇一個或多個項，這些項是靜態的，並且與 HTML select 元素不同，它們可能包含影像。

ARIA：listitem 角色

ARIA listitem 角色可用於標識專案列表中的專案。它通常與 list 角色一起使用，用於標識列表容器。

ARIA：log 角色

log 角色用於標識建立 即時區域 的元素，在該區域中，新資訊以有意義的順序新增，舊資訊可能會消失。

ARIA：main 角色

main 地標角色用於指示文件的主要內容。主要內容區域包含與文件的中心主題或應用程式的主要功能直接相關或擴充套件的內容。

ARIA：mark 角色

mark 角色表示由於內容在封閉上下文中相關性而被標記或突出顯示以供參考或註釋目的的內容。

ARIA：marquee 角色

marquee 是一種包含非基本資訊且頻繁變化的 活動區域。

ARIA：math 角色

math 角色表示內容代表數學表示式。

ARIA：menu 角色

menu 角色是一種複合小部件型別，為使用者提供選擇列表。

ARIA：menubar 角色

menubar 是 menu 的一種呈現形式，通常保持可見並通常水平呈現。

ARIA：menuitem 角色

menuitem 角色表示元素是包含在 menu 或 menubar 中的一組選擇中的選項。

ARIA：menuitemcheckbox 角色

menuitemcheckbox 是一種 menuitem，其可選中狀態的可能值為 true、false 或 mixed。

ARIA：menuitemradio 角色

menuitemradio 是一組具有相同角色的可選中 menuitem，其中一次只能選中一個。

ARIA：meter 角色

meter 角色用於標識用作量表的元素。

ARIA：navigation 角色

navigation 角色用於標識用於在網站或頁面內容中導航的主要連結組。

ARIA：none 角色

none 角色是 presentation 角色的同義詞；它們都從可訪問性樹中刪除元素的隱式 ARIA 語義。

ARIA：note 角色

note 角色建議一個其內容與主要內容無關或補充的區域。

ARIA：option 角色

option 角色用於 listbox 中的可選中項。

ARIA：presentation 角色

presentation 角色及其同義詞 none 從可訪問性樹中刪除元素的隱式 ARIA 語義。

ARIA：progressbar 角色

progressbar 角色定義一個元素，該元素顯示長時間任務的進度狀態。

ARIA：radio 角色

radio 角色是 radiogroup 中一組可選中單選按鈕中的一個，其中一次只能選中一個單選按鈕。

ARIA：radiogroup 角色

radiogroup 角色是一組 radio 按鈕。

ARIA：range 角色

range 抽象角色是一種通用結構角色型別，表示一系列值。

ARIA：region 角色

region 角色用於標識作者認為重要的文件區域。它是一個通用的地標，可在其他地標角色都不適用時用於輔助導航。

ARIA：roletype 角色

roletype 角色，一種 抽象角色，是所有其他 ARIA 角色繼承的基角色。

ARIA：row 角色

具有 role="row" 的元素是表格結構中的一行單元格。一行包含一個或多個單元格、網格單元格或列標題，以及可能在一個 grid、table 或 treegrid 中的行標題，以及可選地在 rowgroup 中。

ARIA：rowgroup 角色

具有 role="rowgroup" 的元素是表格結構中的一組 行。rowgroup 包含一個或多個 單元格、網格單元格、列標題 或 行標題 行，位於 grid、table 或 treegrid 中。

ARIA：rowheader 角色

具有 role="rowheader" 的元素是一個 單元格，它包含表格結構 grid、table 或 treegrid 中 行 的標題資訊。

ARIA：scrollbar 角色

scrollbar 是一個圖形物件，用於控制檢視區域內內容的滾動。

ARIA：search 角色

search 角色用於標識搜尋功能；頁面上用於搜尋頁面、網站或網站集合的部分。

ARIA：searchbox 角色

searchbox 角色表示元素是一種旨在指定搜尋條件的 textbox 型別。

ARIA：section 角色

section 角色，一種抽象角色，是可呈現結構化容器元件的超類角色。

ARIA：sectionhead 角色

sectionhead 角色，一種抽象角色，是其相關部分主題的標籤或摘要的超類角色。

ARIA：select 角色

select 角色，一種抽象角色，是允許使用者從一組選擇中進行選擇的表單小部件的超類角色。

ARIA：separator 角色

separator 角色表示元素是一個分隔符，用於分隔和區分內容部分或選單項組。本機主題斷裂 hr 元素的隱式 ARIA 角色是 separator。

ARIA：slider 角色

slider 角色定義一個輸入，使用者可以在其中從給定範圍內選擇一個值。

ARIA：spinbutton 角色

spinbutton 角色定義了一種範圍型別，它期望使用者從離散選擇中選擇一個值。

ARIA：status 角色

status 角色定義一個包含供使用者使用的諮詢資訊的 活動區域，這些資訊沒有重要到成為 alert。

ARIA：structure 角色

structure 角色用於文件結構元素。

ARIA：suggestion 角色

suggestion 角色在語義上表示對可編輯文件的單個建議更改。這應該用於包裹具有 insertion 角色的元素和具有 deletion 角色的元素的元素。

ARIA：switch 角色

ARIA switch 角色在功能上與 checkbox 角色相同，只是它不表示“選中”和“未選中”狀態（這些狀態在意義上相當通用），而是表示“開啟”和“關閉”狀態。

ARIA：tab 角色

ARIA tab 角色表示 tablist 中的互動式元素，當被啟用時，將顯示其關聯的 tabpanel。

ARIA：table 角色

ARIA role 屬性的 table 值標識包含該角色的元素，該元素具有非互動式表格結構，其中包含以行和列排列的資料，類似於本機 table HTML 元素。

ARIA：tablist 角色

tablist 角色標識用作一組 tabs 的容器的元素。選項卡內容被稱為 tabpanel 元素。

ARIA：tabpanel 角色

ARIA tabpanel 是與 tab 關聯的分層內容資源的容器。

ARIA：term 角色

term 角色可用於詞語或短語，並附帶可選的相應 definition。

ARIA：textbox 角色

textbox 角色用於標識允許輸入自由格式文字的元素。只要有可能，就不要使用此角色，而是使用 input 元素，其 type="text" 用於單行輸入，或 textarea 元素用於多行輸入。

ARIA：timer 角色

timer 角色指示輔助技術，元素是一個數字計數器，列出了從起點經過的時間量或到終點的剩餘時間。輔助技術不會宣佈計時器更新，因為它具有 off 的隱式 aria-live 值。

ARIA：toolbar 角色

toolbar 角色將包含元素定義為以緊湊的視覺形式表示的一組常用功能按鈕或控制元件。

ARIA：tooltip 角色

tooltip 是一種上下文文字氣泡，它顯示元素的描述，該描述在指標懸停或鍵盤焦點時出現。

ARIA：tree 角色

tree 是一種小部件，允許使用者從層次結構組織的集合中選擇一個或多個專案。

ARIA：treegrid 角色

treegrid 角色將元素標識為網格，其行可以像 tree 一樣展開和摺疊。

ARIA：treeitem 角色

treeitem 是 tree 中的一個專案。

ARIA：widget 角色

widget 角色，一種 抽象角色，是圖形使用者介面 (GUI) 的互動式元件。

ARIA：window 角色

window 角色定義瀏覽器或應用程式視窗。

• 使用 ARIA：角色、狀態和屬性
• ARIA 狀態和屬性