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角色定义浏览器或应用程序窗口。