WAI-ARIA 角色
ARIA 角色為內容提供語義，使螢幕閱讀器和其他工具能夠以符合使用者對該型別物件的預期方式呈現和支援與物件的互動。ARIA 角色可用於描述 HTML 中原生不存在或存在但尚未獲得完整瀏覽器支援的元素。
預設情況下，HTML 中的許多語義元素都具有角色；例如，<input type="radio"> 具有“radio”角色。HTML 中的非語義元素不具有角色；未新增語義的<div>和<span>返回null。role屬性可以提供語義。
ARIA 角色使用role="role type"新增到 HTML 元素中，其中role type是 ARIA 規範中角色的名稱。有些角色需要包含相關的 ARIA 狀態或屬性；其他角色僅在與其他角色關聯時才有效。
例如，<ul role="tabpanel">將被螢幕閱讀器播報為“tab panel”。但是，如果標籤面板沒有巢狀的標籤，則帶有 tabpanel 角色的元素實際上並不是標籤面板，並且可訪問性實際上受到了負面影響。
與每個角色關聯的ARIA 狀態和屬性包含在角色頁面中，每個屬性也有一個專門的頁面。
ARIA 角色型別
ARIA 角色有 6 個類別
1. 文件結構角色
文件結構角色用於為內容部分提供結構描述。這些角色中的大多數不應再使用，因為瀏覽器現在支援具有相同含義的語義 HTML 元素。沒有 HTML 等效項的角色，例如 presentation、toolbar 和 tooltip 角色，向輔助技術（如螢幕閱讀器）提供文件結構資訊，因為沒有等效的原生 HTML 標籤。
對於大多數文件結構角色，語義 HTML 等效元素可用且受支援。避免使用
applicationarticle（使用<article>）cell（使用<td>）columnheader（使用<th scope="col">）definition（使用<dfn>）目錄documentfigure（改用<figure>）groupheading（使用 h1 到 h6）img（改用<img>或<picture>）list（改用<ul>或<ol>）listitem（改用<li>）meter（改用<meter>）row（使用帶<table>的<tr>）rowgroup（使用<thead>、<tfoot>和<tbody>）rowheader（使用<th scope="row">）separator（如果它沒有焦點，請使用<hr>）table（使用<table>）term（使用<dfn>）
這些為了完整性而包含，但在大多數情況下很少有用（如果不是完全沒用）
2. 小部件角色
小部件角色用於定義常見的互動模式。像文件結構角色一樣，一些小部件角色具有與受支援的原生 HTML 元素相同的語義，因此應該避免使用。關鍵區別在於小部件角色通常需要 JavaScript 進行互動，而文件結構角色通常不需要。
避免使用button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio和textbox，我們為了完整性而包含它們。對於大多數情況，具有可訪問互動的語義等效項可用且受支援。有關更多資訊，請參閱各個角色的文件。
複合小部件角色
避免使用grid、listbox和radiogroup，我們為了完整性而包含它們。有關更多資訊，請參閱各個角色的文件。
請注意，還有一個小部件角色（role="widget"），它是一個抽象角色，不屬於小部件角色類別。
3. 地標角色
地標角色提供了一種識別網頁組織和結構的方式。透過對頁面部分進行分類和標記，透過佈局在視覺上傳達的結構資訊以程式設計方式表示。螢幕閱讀器使用地標角色為頁面重要部分提供鍵盤導航。請謹慎使用這些角色。過多的地標角色會在螢幕閱讀器中產生“噪音”，使得難以理解頁面的整體佈局。
4. 即時區域角色
即時區域角色用於定義將動態更改內容的元素。有視力的使用者在視覺上可見時可以看到動態更改。這些角色有助於低視力和盲人使用者瞭解內容是否已更新。輔助技術，如螢幕閱讀器，可以播報動態內容更改。
5. 視窗角色
視窗角色定義主文件視窗中的子視窗，在同一視窗內，例如彈出式模態對話方塊
6. 抽象角色
抽象角色僅供瀏覽器使用，以幫助組織和簡化文件。它們不應由編寫 HTML 標記的開發人員使用。這樣做不會向輔助技術或使用者傳達任何有意義的資訊。
避免使用command、composite、input、landmark、range、roletype、section、sectionhead、select、structure、widget和window。
注意：請勿在您的網站和應用程式中使用抽象角色。它們供瀏覽器使用。它們僅供參考。
警告：“抽象角色用於本體論。作者不得在內容中使用抽象角色。”——WAI-ARIA 規範
MDN 上定義的角色
以下是涵蓋 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或帶type="button"的input。- ARIA: cell 角色
ARIA role 屬性的
cell值將元素標識為表格容器中的單元格，該容器不包含列或行標題資訊。為了獲得支援，單元格必須巢狀在具有row角色的元素中。- ARIA: checkbox 角色
checkbox角色用於可選中互動式控制元件。包含role="checkbox"的元素還必須包含aria-checked屬性，以向輔助技術公開復選框的狀態。- ARIA: columnheader 角色
ARIA 角色屬性的
columnheader值將元素標識為行中的單元格，該單元格包含列的標題資訊，類似於具有列作用域的原生th元素。- ARIA: combobox 角色
combobox角色將元素標識為input或button，它控制另一個元素（例如listbox或grid），該元素可以動態彈出以幫助使用者設定值。組合框可以是可編輯的（允許文字輸入）或僅選擇的（僅允許從彈出視窗中選擇）。- ARIA: command 角色
command角色定義了一個執行動作但不接收輸入資料的小部件。- ARIA: comment 角色
comment角色在語義上表示對頁面上某些內容或前一條評論的評論/反應。- ARIA: complementary 角色
complementary地標角色用於指定一個與主要內容相關但可以獨立存在的輔助部分。這些部分通常以側邊欄或標註框的形式呈現。如果可能，請改用HTML <aside> 元素。- ARIA: composite 角色
composite抽象角色表示一個可能包含可導航後代或擁有子元素的小部件。- ARIA: contentinfo 角色
contentinfo角色定義了一個頁尾，其中包含站點內每個文件上的識別資訊，例如版權資訊、導航連結和隱私宣告。此部分通常稱為頁尾。- ARIA: definition 角色
definitionARIA 角色表示元素是術語或概念的定義。- ARIA: dialog 角色
dialog角色用於標記基於 HTML 的應用程式對話方塊或視窗，該對話方塊或視窗將內容或 UI 與 Web 應用程式或頁面的其餘部分分開。對話方塊通常使用疊加層放置在頁面其餘內容的頂部。對話方塊可以是非模態的（仍然可以與對話方塊外的內容互動）或模態的（只能與對話方塊中的內容互動）。- ARIA: directory 角色
directory角色用於指代一組成員的列表，例如靜態目錄。- ARIA: 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角色用於在grid或treegrid中建立單元格。它旨在模仿 HTMLtd元素用於表格式資訊分組的功能。- 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角色用於使用者可以選擇一個或多個靜態專案且與 HTMLselect元素不同可能包含影像的列表。- ARIA: listitem 角色
ARIA
listitem角色可用於識別列表中的專案。它通常與list角色結合使用，後者用於識別列表容器。- ARIA: log 角色
log角色用於標識建立一個即時區域的元素，其中新資訊以有意義的順序新增，舊資訊可能會消失。- ARIA: main 角色
main地標角色用於指示文件的主要內容。主要內容區域包含與文件中心主題或應用程式主要功能直接相關或擴充套件的內容。- ARIA: mark 角色
mark角色表示由於內容在封閉上下文中的相關性而被標記或突出顯示以供參考或註釋的內容。- ARIA: marquee 角色
marquee是一種即時區域，包含經常變化的非必要資訊。- ARIA: math 角色
math角色表示內容代表一個數學表示式。menu角色是一種複合小部件，為使用者提供一系列選擇。menubar是menu的一種呈現方式，通常保持可見並通常水平呈現。menuitem角色表示元素是menu或menubar包含的一組選擇中的一個選項。menuitemcheckbox是一個具有可選中狀態的menuitem，其可能的值為true、false或mixed。menuitemradio是一組具有相同角色的可選中選單項，其中一次只能選中一個。- ARIA: meter 角色
meter角色用於標識用作計量器的元素。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 角色
- ARIA: structure 角色
structure角色用於文件結構元素。- ARIA: suggestion 角色
suggestion角色語義上表示對可編輯文件的單個提議更改。它應在包裝具有insertion角色和deletion角色的元素的元素上使用。- ARIA: switch 角色
ARIA
switch角色在功能上與複選框角色相同，但它不表示“已選中”和“未選中”狀態（它們的含義相當通用），而是表示“開”和“關”狀態。- ARIA: tab 角色
ARIA
tab角色表示tablist內的一個互動式元素，當啟用時，它會顯示其關聯的tabpanel。- ARIA: table 角色
ARIA
role屬性的table值將包含該角色的元素標識為具有非互動式表格結構，其中包含按行和列排列的資料，類似於原生tableHTML 元素。- ARIA: tablist 角色
tablist角色標識用作一組tabs容器的元素。標籤內容被稱為tabpanel元素。- ARIA: tabpanel 角色
ARIA
tabpanel是與tab關聯的分層內容的資源的容器。- ARIA: term 角色
term角色可用於帶有可選相應definition的單詞或短語。- ARIA: textbox 角色
textbox角色用於標識允許輸入自由格式文字的元素。在可能的情況下，請勿使用此角色，而是使用帶有type="text"的input元素進行單行輸入，或使用textarea元素進行多行輸入。- ARIA: timer 角色
timer角色向輔助技術表明一個元素是一個數字計數器，列出從起點開始的已用時間量或到終點為止的剩餘時間。輔助技術不會播報計時器的更新，因為它具有隱式aria-live值off。- ARIA: toolbar 角色
toolbar角色將包含元素定義為以緊湊視覺形式呈現的常用功能按鈕或控制元件的集合。- ARIA: tooltip 角色
tooltip是一個上下文文字氣泡，當指標懸停或鍵盤聚焦時顯示元素的描述。- ARIA: tree 角色
tree是一個小部件，允許使用者從分層組織的專案集合中選擇一個或多個專案。- ARIA: treegrid 角色
treegrid角色標識一個元素是一個網格，其行可以像tree一樣展開和摺疊。- ARIA: treeitem 角色
treeitem是tree中的一個專案。- ARIA: widget 角色
widget角色是一個抽象角色，是圖形使用者介面（GUI）的互動式元件。- ARIA: window 角色
window角色定義瀏覽器或應用程式視窗。