”，它们不包含任何语义。 ARIA 角色允许作者明确声明缺失的含义，从而缩小了这一差距。
WAI-ARIA 规范由 W3C 的可访问富互联网应用程序工作组维护。第一个版本 ARIA 1.0 于 2014 年成为 W3C 推荐标准； ARIA 1.1 于 2017 年发布，ARIA 1.2 于 2023 年达到推荐状态。每次修订都添加了角色、状态和属性，并且每个版本都链接到描述键盘预期行为的创作实践文档。
这些角色与其他两个 ARIA 类别之间有一个关键区别。角色回答：“这是什么？”状态和属性回答：“它处于什么状态？”和“它与什么有关？” role="checkbox" 声明小部件类型； aria-checked="true" 表示其当前状态。混淆两者是导致自定义小部件损坏的最常见原因之一。
六种角色类别
要了解什么是 ARIA 角色，了解 ARIA 规范将角色分为六个系列会有所帮助。了解该族可以让您预测角色支持哪些状态和属性以及应用哪些键盘模式。
Related: — Superposición de IA que promete cumplimiento WCAG en 48 horas.
| 类别 | 目的 | 代表角色 |
|---|
| 抽象 | 超类定义，从未在标记中使用 | widget、input、section |
| 小部件 | 互动控制 | button、checkbox、slider、tab |
| 文档结构 | 页面地标和地区 | banner、main、navigation、region |
| 地标 | 可导航页面区域（结构的子集） | banner、complementary、contentinfo、form |
| 直播区域 | 宣布动态内容变更 | alert、status、log、timer |
| 窗口 | 浏览器或应用程序窗口 | dialog、alertdialog |
抽象角色仅用于组织分类。作者绝不能在标记中编写 role="widget" 或 role="input" ；这会导致未定义的行为并且验证失败。其余五个类别是您实际应用的类别。
隐式角色和 ARIA 的第一条规则
每个 HTML 元素都有一个由 HTML Accessibility API Mapping (AAM) 规范定义的隐式 ARIA 函数（解释什么是 aria 角色）。 <nav> 元素有一个隐式的 role="navigation"。 <ul> 有一个隐式的 role="list"。 <h1> 到 <h6> 具有 role="heading"。 <table> 具有 role="table"。
关于使用 ARIA 的第一条 W3C 规则明确指出：如果本机 HTML 元素或属性已经传达了所需的语义和行为，请使用它，而不是通过 ARIA 重用元素。将 role="button" 添加到 <button> 不是必需的。更糟糕的是，如果您将role =“button”添加到<div>，您将收到公告但没有任何行为：没有焦点，没有键盘激活，没有表单提交。
Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.
冗余并不总是无害的。覆盖隐式角色可能会丢失辅助技术所依赖的语义。在 <table> 中编写 role="presentation" 完全消除了表语义，这有时对于布局表来说是有意的，但对于数据表来说却是灾难性的。
角色如何与状态和属性交互
角色充当它们支持的状态和属性的容器。该规范定义了哪些属性对于哪些角色有效，并且浏览器仅公开可访问性树中支持的组合。了解什么是 aria 角色有助于了解 role="checkbox" 支持值为 true、false 或 mixed 的 aria-checked。 role="slider" 支持 aria-valuenow、aria-valuemin、aria-valuemax 和可选的 aria-valuetext。 role="combobox" 支持 aria-expanded、aria-controls 和 aria-activedescendant。将 aria-checked 应用于 role="button" 是没有意义的，并且会被忽略或在某些屏幕阅读器中产生令人困惑的结果。
所需的属性也很重要。没有 aria-checked 的 role="checkbox" 是无效的；状态是强制性的而不是可选的。没有 aria-valuenow 的 role="slider" 会使用户无法确定当前值。 ARIA 规范将它们标记为“必需的状态和属性”，而一致性检查器（例如 axe-core 和 IBM Equal Access Accessibility Checker）指出它们的缺失。
角色、辅助功能树和浏览器支持
浏览器将 ARIA 函数转换为平台可访问性 API（Windows 上的 UIA、macOS 上的 AXAPI、Linux 上的 ATK/AT-SPI），屏幕阅读器使用这些 API。没有浏览器正确分配的角色对于用户来说实际上是不可见的。
支持因功能和浏览器而异。普遍支持“按钮”、“链接”、“标题”、“列表”和“导航”等核心功能。更新或更专业的角色（Digital Publishing 的 WAI-ARIA 模块中的“feed”、“math”、“doc-footnote”）有更多不完整的支持。现代浏览器支持 role=“switch”，但十年前的声明并不一致。
对受众使用的实际组合进行测试仍然至关重要。在 Firefox 的 NVDA 中工作的小部件在 Safari 的 VoiceOver 中可能表现不同，因为这两个屏幕阅读器使用不同的平台 API 并应用不同的启发式方法。
Related: — La certificación profesional que acredita tu experiencia en accesibilidad.
标志性角色和页面结构
地标角色允许屏幕阅读器用户直接跳转到页面区域。八个标志性角色是“banner”、“complementary”、“contentinfo”、“form”、“main”、“navigation”、“region”和“search”。现代 HTML 对大多数人来说都有原生的等价物：<header> 变成 banner、<footer> 变成 contentinfo、<main> 变成 main、<nav> 变成 navigation、<aside> 变成 complementary、<form> 具有可访问名称的<form> 变为form、<section> 具有可访问名称的变为region。
使用原生元素是更好的选择，因为即使 CSS 或 JavaScript 失败，它们也能工作，并且可以降低角色/属性冲突的风险。 search 地标没有本地 HTML 等效项，因此 role="search" 仍然是搜索区域的正确选择。
一个常见的错误是将 role="banner" 应用于 <main> 或 <article> 内的 <div>。地标角色仅在未嵌套在某些其他角色中时才创建地标； “main”内的“banner”根本不会显示为地标。 DOM 中的位置与角色值一样重要。对于那些想知道 aria 角色是什么的人来说，这些标志是规范的关键部分。
Worth a look: — Widget de accesibilidad con plan gratuito para empezar hoy mismo.
实时区域角色
在考虑什么是ARIA 角色时，实时区域角色会在不改变焦点的情况下宣布内容变化。四个实时区域功能是“alert”、“status”、“log”和“timer”，以及更通用的“marquee”。每个都隐式地带有一个“aria-live”值：“alert”和“log”实际上分别意味着“assertive”和“polite”，而“status”则意味着“polite”。
在“警报”和“状态”之间进行选择是一个具有实际后果的设计决策。 “警报”会停止屏幕阅读器正在阅读的任何内容，这适用于错误和紧急通知，但如果过度使用则有害。 “状态”等待暂停，这与进度消息和确认文本同时发生。
在内容更改之前，活动区域必须存在于 DOM 中。同时插入role =“alert”元素及其文本通常会导致没有公告，因为该区域在更改时不存在。可靠的模式是在页面加载时呈现一个空的活动区域，并稍后更新其文本内容。
何时不使用 ARIA 角色
使用 ARIA 的第二条规则是作者不应更改本机语义，除非确实需要。第五条规则规定，每个交互元素，无论其功能如何，都必须可以通过键盘访问和聚焦。
添加角色并不添加行为。 <div> 上的 role="button" 会导致它无法聚焦，不响应输入或空格键，也不提交表单。您需要添加 tabindex="0"，一个用于输入和空格的击键处理程序，以及通常“适合角色”的状态管理。此时，使用真正的“