专业术语 · 概念
ARIA：角色、状态与属性，及其与 APG 和原生元素的关系
解释 WAI-ARIA 提供的角色、状态与属性用来补充而非取代原生语义，区分 ARIA 规范、ARIA in HTML、Using ARIA 与 APG 各自的性质，并依据官方页说明四条 ARIA 使用规则，尤其是能用原生元素就不用 ARIA。
- 领域
- accessibility · web-standards
ARIA 是 Accessible Rich Internet Applications 的缩写，规范名为 WAI-ARIA。W3C 的 WAI-ARIA 1.2 是 2023 年 6 月 6 日发布的 Recommendation，规范给出一套关于角色（roles）、状态（states）与属性（properties）的本体，并规定它们如何映射到平台的无障碍 API，让辅助技术能理解自定义控件、结构与行为。W3C 的 WAI 页面提到 WAI-ARIA 1.3 仍是草案。规范自己写明，ARIA 是对宿主语言原生语义的补充，而不是替代。
几份文件各是什么
| 文件 | 性质 | 用来做什么 |
|---|---|---|
| WAI-ARIA 1.2 | W3C Recommendation | 定义角色、状态、属性及其到无障碍 API 的映射 |
| ARIA in HTML | W3C 页面标注为 Recommendation | 规定在 HTML 元素上使用 ARIA 的作者要求，供一致性检查工具使用；不建议给元素写与其隐含语义重复的角色 |
| Using ARIA | 读取时标注为 W3C Discontinued Draft | 面向开发者的实践指南，给出四条使用规则 |
| ARIA Authoring Practices Guide（APG） | W3C WAI 的指导材料 | 提供常见控件模式的示例、基础实践与深入指导 |
APG 教开发者为常见模式与控件构建无障碍语义，例如 Tabs、Dialog、Alert。APG 自己声明：生产使用其代码前，必须测试辅助技术的互操作性；示例不包含用于绕过 ARIA 1.2 支持缺口的写法；部分 ARIA 特性在任何移动浏览器中都不受支持。这些声明表明 APG 是模式参考，不是“照抄即合规”的保证。
四条使用规则
Using ARIA 页的四条规则，含义如下：
- 第一条：如果已有带所需语义与行为的原生 HTML 元素或属性，就使用它，而不是改造一个元素再添加 ARIA 角色、状态或属性。也就是“能用原生元素就不用 ARIA”。这里的前提是原生元素已经内置你需要的语义与行为；没有原生等价物（例如 tablist 这类复合控件）时才需要 ARIA。
- 第二条：除非确实必要，不要改变原生语义。
- 第三条：所有可交互的 ARIA 控件都必须能用键盘操作。
- 第四条：不要在可获得焦点的元素上使用
role="presentation"或aria-hidden="true"。
APG 的 Read Me First 页解释了原因：ARIA 角色不会让浏览器提供键盘行为或样式，而原生的 HTML 输入元素会；写了 ARIA 却没有补齐行为，就会误导辅助技术用户。页面还说，错误的 ARIA 会歪曲视觉体验，可能对对应的非视觉体验造成严重影响。
与 WCAG 的关系
ARIA 是实现手段，WCAG 是验收标准，两者不互相替代。例如 WCAG 4.1.2 Name, Role, Value 要求组件的名称与角色可被程序读取，4.1.3 Status Messages 要求状态消息可通过角色或属性呈现，ARIA 是达到它们的一种方式，但先用原生元素可以更简单地满足前者。级别与读法见 WCAG。各展现形式的键盘与角色要求见 Tabs、Modal、Accordion、Toast 与 Carousel，综述见 展现模式选择地图。
常见误用
- 在
div上叠role="button"却不处理焦点与 Enter、Space 键； - 在原生元素上重复其隐含角色，ARIA in HTML 明确不建议这样写；
- 给可聚焦元素加
aria-hidden="true"，使焦点落在读屏器读不到的位置； - 依据示例代码就认为已通过测试，忽略浏览器与辅助技术的支持差异。