WAI-ARIA 角色
ARIA 角色为内容提供语义含义，使屏幕阅读器和其他工具能够以与用户对该类型对象预期一致的方式呈现和支持与对象的交互。 ARIA 角色可用于描述 HTML 中不存在的元素，或者存在但尚未获得完整浏览器支持的元素。
默认情况下，HTML 中的许多语义元素都有一个角色；例如，<input type="radio"> 具有 "radio" 角色。HTML 中的非语义元素没有角色；<div> 和 <span> ללא תוספת סמנטיקה יחזירו null. role 属性可以提供语义。
通过 role="role type" 将 ARIA 角色添加到 HTML 元素，其中 role type 是 ARIA 规范中角色的名称。某些角色需要包含关联的 ARIA 状态或属性；其他角色仅在与其他角色关联的情况下有效。
例如，<ul role="tabpanel"> 将被屏幕阅读器宣布为“选项卡面板”。但是，如果选项卡面板没有嵌套的选项卡，那么具有选项卡面板角色的元素实际上不是选项卡面板，并且无障碍性实际上会受到负面影响。
每个角色关联的 ARIA 状态和属性 包含在角色页面中，每个属性也有一个专门的页面。
ARIA 角色类型
ARIA 角色分为 6 类
1. 文档结构角色
文档结构角色用于提供对内容部分的结构描述。大多数这些角色不再应该使用，因为浏览器现在支持具有相同含义的语义 HTML 元素。没有 HTML 等效元素的角色，例如 presentation、toolbar 和 tooltip 角色，为屏幕阅读器等辅助技术提供有关文档结构的信息，因为没有可用的等效原生 HTML 标签。
对于大多数文档结构角色，都提供并支持语义 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>)
这些是为完整性而包含的，但在大多数情况下很少，甚至从未有用
2. 小部件角色
各种小部件角色用于定义常见交互模式。与文档结构角色类似，其中一些角色复制了良好支持的原生 HTML 元素的语义，不应使用。两个列表之间的区别在于，一般来说，小部件角色需要 JavaScript 交互，而文档结构角色并不一定需要。
请避免使用按钮、复选框、网格单元格、链接、菜单项、菜单项复选框、菜单项单选框、选项、进度条、单选框 和 文本框，这些我们已经为了完整性而包含进来。对于大多数情况来说，都存在语义等效的元素，并且支持可访问的交互性。请查看各个角色文档以获取更多信息。
复合小部件角色
请避免使用网格、列表框 和 单选组，这些我们已经为了完整性而包含进来。请查看各个角色文档以获取更多信息。
请注意，还有一个小部件角色 (role="widget")，这是一个抽象角色，不属于小部件角色类别。
3. 地标角色
4. 实时区域角色
5. 窗口角色
6. 抽象角色
在 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或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 角色
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 角色 用于制作网格 或 树状网格 中的单元格。它旨在模仿 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角色用于列表，用户可以选择一个或多个项，这些项是静态的，并且与 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是一组具有相同角色的可选中menuitem，其中一次只能选中一个。- 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角色在功能上与 checkbox 角色相同，只是它不表示“选中”和“未选中”状态（这些状态在意义上相当通用），而是表示“开启”和“关闭”状态。- 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角色用于标识允许输入自由格式文本的元素。只要有可能，就不要使用此角色，而是使用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角色定义浏览器或应用程序窗口。