ARIA 角色备忘单：最佳选择比较
ARIA 角色备忘单 是一份参考指南，它将每个 ARIA 角色与其对应的原生 HTML 元素、类别（小部件、地标、结构、实时区域或窗口）以及相关的属性和状态对应起来。 WAI-ARIA 1.2 定义了 82 个角色，大多数项目仅在循环使用中需要其中的 15 到 20 个。 2026 年相关参考资料比较，并明确说明如何方便地进行工作。
为什么 ARIA 角色备忘单仍然必要
WAI-ARIA 1.2 及其继任者 WAI-ARIA 1.3 的规范文档非常冗长，是为浏览器实现者和辅助技术开发者设计的，而不是为周二下午在编写表单的开发者设计的。 ARIA 的第一条规则——只要有原生 HTML 就优先使用——解决了大多数情况，但有些模式没有原生等效项：如选项卡、树形结构、交互式网格、带自动完成的组合框、带子菜单的菜单。在这种情况下，备忘单可以节省时间，更重要的是避免错误。
最常见的错误不是忘记添加角色，而是添加了不必要的角色。给 <button> 添加 role="button" 没有任何作用，甚至可能破坏某些屏幕阅读器的原生行为。一份优秀的备忘单会明确标出哪些角色在原生元素上是冗余的，哪些角色需要通过 JavaScript 管理焦点，以及哪些属性是必填的而哪些是可选的。
第二个原因是验证。角色之间存在属性关系：aria-labelledby 指向一个 id，aria-activedescendant 要求被引用的元素必须存在且可见，aria-owns 仅在 DOM 顺序与视觉顺序不一致时才合理。一张交叉列出角色、必需属性和禁止属性的表格可以在进入审计之前检测出错误。
一份优秀的 ARIA 角色备忘单应包含什么
一份对前端开发有用的参考表应满足五个标准。我将它们列出，因为这正是我用来评估本次对比选项的标准。
- **覆盖所有五个角色类别。 **WAI-ARIA 对摘要、小部件、文档结构、地标和活动区域中的角色进行分组。框架中不使用摘要（
roletype、widget、input）；对可见形状数据的良好参考。 - 该角色的本机 HTML 等效项。 如果没有此列，参考会提示在那里使用 ARIA，而无需触摸。
- 必需、支持和禁止的属性。
role="checkbox"需要aria-checked；role="heading"需要aria-level；不允许role="presentation"。 - Patrón de teclado asociado。 没有 teclado 管理的角色是一个承诺。
role="tablist"意味着不同的元素/derecha、Home和End。 - 可搜索格式。 Buscador，按类别、规范版本和复制代码片段的能力进行过滤。
比较：2026 年 ARIA 角色最佳参考
下表总结了最可靠的选项。这些资源全部免费；且均保持更新并注明了所涵盖的规范版本。
Related: — con plan gratuito para empezar hoy mismo.
| 资源 | 侧重点 | 覆盖类别 | 原生等效 | 键盘模式 | 理想用途 |
|---|---|---|---|---|---|
| WAI-ARIA 创作实践指南 (APG)、W3C | 赞助人已完成 | 小部件、地标、结构、活动区域 | 是，每个模式中均有 | Sí，detallado | 具体实施小部件 |
| MDN Web 文档，ARIA 角色参考 | Ficha por rol | 所有内容，包括摘要 | 是 | 部分 | 查询特定角色 |
| ARIA 创作实践，角色索引 | ARIA 创作实践Tabla rol → 属性 | 小部件和结构 | 部分 | 否 | 验证必需属性 |
| Deque大学，ARIA参考 | 带支持注释的卡片 | 小部件和地标 | 是 | 部分 | 了解屏幕阅读器的实际支持情况 |
| A11Y 项目清单 | 验证列表 | 横向 | 不适用 | 否 | 发布前审计 |
| HTML-ARIA (W3C)，等效表 | 元素许可 | 全部 | 是，这是其目的 | 否 | 决定是否需要 ARIA |
WAI-ARIA 创作实践指南 (APG)
W3C 的 APG 是模式的权威参考。每个模式都包括 HTML 结构、角色、状态、键盘交互和一个功能示例。它的强项在于不只是列出角色，还解释了预期行为。弱点在于它不是一张快速查询表；要查询“role="slider" 需要哪些属性”，必须导航到相应的模式页面。
APG 将最常见的小部件用户分组：手风琴、警报、面包屑、按钮、复选框、组合框、对话框、披露、提要、网格、链接、列表框、菜单、菜单栏、单选组、滑块、旋钮、开关、表格、选项卡列表、工具栏、工具提示、网格树和树视图。如果您的项目使用其中之一，请在此处运行它。
MDN Web 文档：按角色参考
MDN 为每个 ARIA 角色维护一个页面，其中包含描述、所需属性、允许的属性、相关的可访问性问题以及规范的链接。当您知道自己在做什么时，这是最快的选择。其覆盖范围包括抽象角色和实际使用的角色，尽管省略了一些提醒。
Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.
一个实用细节：MDN 会标注哪些角色已过时或在未来版本中可能被删除。查看该标注可以避免采用即将消失的角色。
HTML-ARIA: la tabla que evita ARIA innecesario
W3C 的 HTML-ARIA 规范为每个 HTML 元素定义了可以应用哪些 ARIA 角色，以及哪些是冗余的。当你犹豫是使用原生元素还是带角色的 div 时，它是决定性的工具。如果你想应用的角色在该元素上被标记为冗余，那么答案就是不要添加它。
Deque大学和A11Y项目
Deque University 提供的角色卡片包含关于屏幕阅读器实际支持情况的注释，这是规范本身不涵盖的。A11Y Project Checklist 虽然不是角色备忘单，但它可以作为发布前的核对清单，与上述资源形成互补。
Cómo elegir según tu caso
决定取决于三个问题。首先，你是否已经知道需要哪个角色？如果是，MDN 是最快的途径。其次，你是否在构建一个具有复杂交互的小部件？那么你需要 APG，因为角色本身无法描述键盘行为。第三，你在原生 HTML 和 ARIA 之间犹豫不决吗？请在参考任何其他来源之前先查阅 HTML-ARIA。
对于不使用框架而使用 XHTML 和 CSS 的团队，最有效的组合通常是：用 HTML-ARIA 决定，用 APG 实现，用 MDN 验证属性。单页备忘单可作为短期记忆辅助，但在遇到极端情况时不能替代这三个来源。
一个建议应用的额外标准：如果某个角色需要 JavaScript 才能正常工作（如焦点管理、更新 aria-expanded、同步 aria-selected），请将其视为架构决策而非装饰性属性。没有关联逻辑的小部件角色比没有角色会产生更多障碍。
Related: — La que acredita tu experiencia en accesibilidad.
Errores frecuentes que ninguna 备忘单 evita por sí sola
重复的地标角色会干扰区域导航。在 <main> 上使用 role="main" 是冗余的；两个没有区分标签的 role="navigation" 则是模糊的。解决方案是在每个重复的地标上使用 aria-label 或 aria-labelledby。
在不可聚焦的元素上使用小部件角色会破坏交互。在 <div> 上使用 role="button" 要求必须设置 tabindex="0" 并处理 Enter 和 Space 键。否则，该角色宣布了一个无法用键盘激活的按钮。
状态不同步是导致可访问性下降最常见的原因。例如 aria-expanded 在展开时未更改，aria-selected 在选项卡切换时未更新，或 role="switch" 中的 aria-checked 固定不变。没有任何表格能检测到这一点：必须使用键盘和真实的屏幕阅读器进行测试。
在标记中使用抽象角色在原则上是错误的。role="widget"、role="input" 或 role="section" 不应出现在 HTML 中；它们仅存在于规范的层级结构中。
要点
- WAI-ARIA 1.2 定义了 82 个角色，但大多数项目仅在循环使用中需要其中的 15 到 20 个。
- ARIA 的第一条规则——只要有原生 HTML 就优先使用——使得 W3C 的 HTML-ARIA 表成为编写任何角色前最重要的参考资料。
- W3C 的 APG 在小部件模式方面无可替代，因为它包含了键盘交互；而 MDN 在查询具体角色时速度更快。
- 一个没有焦点管理且没有状态更新的角色，比不使用 ARIA 产生更多的可访问性障碍。
- 没有任何备忘单能替代键盘和屏幕阅读器的测试：状态不同步只能在实际使用中检测到。
常见问题
存在多少个 ARIA 角色？
WAI-ARIA 1.2 定义了 82 个角色，分为五类：抽象、小部件、文档结构、地标和活动区域。抽象角色不应用于标记中；它们用于组织规范的层级结构。在实践中，我们将使用 15 至 20 个不同角色的项目。
最好的 ARIA 角色备忘单是哪个？
取决于用途。有关技术的小部件的实现，请参阅 W3C 的 WAI-ARIA 创作实践指南以及完整的参考。有关具体角色的属性，请参阅 MDN Web 文档，速度非常快。决定 HTML 元素所必需的角色，W3C 的 HTML-ARIA 标签是决定性因素。
如果存在原生 HTML 元素，我还需要使用 ARIA 吗？
不。 ARIA 的首要规则是存在于 HTML 元素和语义以及必要的组成部分，这些元素是与角色相关的“div”元素。 给 <button> 添加 role="button" 是冗余的，并且可能会改变某些屏幕阅读器的原生行为。
小部件角色与地标角色有什么区别？
小部件的角色描述了交互控件——“按钮”、“复选框”、“滑块”、“选项卡列表”——以及需要进行焦点和技术的管理。地标角色描述了页面区域——“主要”、“导航”、“横幅”、“内容信息”——以及区域导航。 Un Mismo elemento no debería cumplir ambas funciones。
ARIA 角色在不同规范版本之间会变化吗？
是的。 WAI-ARIA 1.2 的一个角色包括“块引用”、“标题”、“代码”、“删除”、“强调”、“插入”、“计量”、“段落”、“强”、“下标”和“上标”。某些角色在后续版本中已过时。请参阅 MDN 或有关收养前的具体情况的说明。
一份 ARIA 角色备忘单足以满足 WCAG 吗？
不足以。ARIA 角色仅是标准 4.1.2（名称、角色、值）的一部分，但 WCAG 2.2 还包括许多其他要求：对比度、可见焦点、目标尺寸、替代文本、标题结构。备忘单有助于正确实现角色，但不能替代整体的合规性检查。
资料来源和进一步阅读
- 备忘单 — 维基百科：备忘单（也称为备忘单）或婴儿床表或工作辅助工具是一组用于快速参考的简明注释。历史上，备忘单是由没有…的学生使用的。
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 horas