ARIA 角色列表：最佳参考比较

ARIA 角色列表包含 WAI-ARIA 1.2 W3C 特定规范中的 82 个定义值，其功能类别包括：文档角色、地标角色、小部件角色、结构角色、窗口角色和抽象角色。选择合适的参考资料取决于你是需要快速查询表、带有代码示例的文档，还是关于何时应用每个角色的决策指南。

要点

• WAI-ARIA 1.2 的具体说明定义了 82 个角色，但在实际的 XHTML/CSS 可访问性开发中，仅使用其中一小部分。
• ARIA 的第一条规则依然适用：如果存在具有所需语义的原生 HTML 元素，请直接使用它，而不是添加角色。
• 抽象角色（如 role="widget" 或 role="input"）绝不应写在标记中；它们仅作为分类基础。
• 前端参考包括角色、ARIA 强制属性、允许的状态和真实的标记示例。
• 地标和小部件的角色集中在由 axe-core 或 Lighthouse 等自动审计工具检测出的错误中。

什么是 ARIA 角色以及为什么你需要一份可靠的列表

ARIA 角色是通过 role 属性分配给元素的数值，用于告知辅助技术该元素代表哪种类型的组件。浏览器通过可访问性树公开该角色，而 NVDA、JAWS 或 VoiceOver 等屏幕阅读器将其转换为具体的播报内容，如“按钮”、“选项卡”、“区域”或“对话框”。

WAI-ARIA 的具体说明是 W3C ARIA 工作组的规定，定义了每个角色及其允许的状态和属性。版本 1.2 是实际可用的推荐版本，ARIA 1.3 正在开发中。对于 XHTML 和 CSS 的工作人员来说，角色列表并非装饰性目录：每个应用错误的数值都会导致元素原生语义与声明语义之间产生冲突，且不同浏览器中的屏幕阅读器处理这些冲突的方式各异。

MDN（Mozilla 开发者网络）的 ARIA 角色官方文档是有关技术的参考，包括西班牙语和英语的咨询，但并非如此。还存在参考表、模式指南和验证工具，以满足不同的需求。对比它们有助于选择最适合你工作流的参考资料。

ARIA 角色类别

官方分类法的角色和功能。了解这些类别可以避免在错误的列表中查找。

文档角色。 描述页面或部分的结构：article、document、feed、heading、img、list、listitem、math、none、note、presentation、row、separator、table、term、toolbar、tooltip。大量复制 HTML 元素，因此很少手动编写。

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

地标角色。 定义页面的可导航区域：“banner”、“complementary”、“contentinfo”、“form”、“main”、“navigation”、“region”、“search”。这是在 HTML 语义不完整的网站上最常用的方法。

小组件角色。 代表交互控件：button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio、scrollbar、searchbox、slider、spinbutton、switch、tab、tabpanel、textbox、treeitem。需要焦点和键盘管理。

结构角色。 组织小部件包括：application、grid、group、listbox、menu、menubar、radiogroup、tablist、tree、treegrid、rowgroup、columnheader、rowheader。

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

窗口角色。 叠加或模态内容管理：alertdialog、dialog。

抽象角色。 标记中没有写入任何元素：command、composite、input、landmark、range、roletype、section、sectionhead、select、struct、widget、window。 Sirven 用于规范角色之间继承属性。

比较：角色 ARIA 的最佳参考

下表根据实际标准对比了开发者最常用的参考资料。

参考	类型	语言	代码示例	理想之选
MDN Web 文档（角色 ARIA）	官方文档	多语言（包括西班牙语）	是，按角色分	深入技术咨询
WAI-ARIA 1.2 (W3C)	规范规范	英语	没有	精确匹配验证
WAI-ARIA 创作实践指南	模式指南 (英语)	是，完整模式	实现带键盘支持的小部件
Hoja de Referencia Tipo 备忘单	摘要表	英语	极少	在编辑器中快速恢复
accessibility.build（参考 ARIA）	实践参考	英语	巳	通过带注释的示例学习
Auditores（斧核、灯塔）	工具	多语言	没有	检测无效角色

选举取决于时刻。在编写标记时，紧凑的参考表在速度上更占优势。而在调试状态播报不正确的小部件时，W3C 规范和 WAI 模式指南才是解决问题的权威来源。

Cómo decidir qué rol aplicar: 实践标准

正确的决定是通过 ARIA 进行的。 这些按顺序排列的标准可以避免大多数错误。

1. ¿是否存在原生 HTML 元素？ <button> 已经具有 button 的隐式角色。添加 role="button" 是多余的，并且可能会引起冲突。
2. ¿角色需要强制属性？ role="checkbox" 需要 aria-checked。 role="slider" 需要 aria-valuenow、aria-valuemin 和 aria-valuemax。如果你不能维持这些状态，那么这个角色弊大于利。
3. ¿角色涉及键盘管理？ 小部件角色需要使用箭头、Home、End 和 Esc 进行导航，具体取决于模式。没有箭头处理的 role="tablist" 比没有箭头处理更糟糕。
4. ¿El rol es abstracto? 如果它在抽象角色列表中，则不应写入。
5. ¿该角色是否已过时或不再使用？ ARIA 1.0 和 1.2 之间更改了一些值。请始终查阅当前版本。

W3C 技术指南中认可的使用 ARIA 的第一条规则是：尽可能使用本机 HTML。 ARIA 是 HTML 不够用时的补丁，而不是替代品。

Related: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia en accesibilidad.

咨询和应用角色列表时经常出现的错误

一个常见的错误是直接从参考表中复制角色而未检查其必需属性。 ARIA 1.2 中的 role="combobox" 与 1.0 相比，与 aria-expanded 和 aria-controls 之间的 listbox 相关。应用旧版本会导致在更新后的屏幕阅读器中播报失效。

使用role =“presentation”或role =“none”来“清理”语义也很常见，而不理解它从可访问性树中删除了元素，在某些情况下包括其子元素。这也以“role =“application””频率出现，它将所有键盘控制转移到小部件并禁用屏幕阅读器快捷方式；它是为复杂的 Web 应用程序保留的，而不是为表单保留的。

重复的地标角色通常会造成混淆：在同一页面中使用两个 role="main"，或在 <article> 内部使用 role="banner"，导致区域导航不连贯。使用 axe-core 或浏览器的可访问性工具可以检测出许多此类情况，但任何自动化工具都无法替代真实的屏幕阅读器测试。

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

如何验证标记中的角色

手动检测和自动化相结合的角色组合。 Chrome 和 Firefox 的开发工具包括一个辅助面板，显示操作系统接收到的可访问性树，以及每个节点的计算角色。这是一种直接的方式，可以通过声明的形式来表示本机语义的含义。

axe-core（集成在 Lighthouse 中并提供插件）会标记无效角色、缺失的强制属性以及矛盾的组合。 Web 的 Accessibility Insights 扩展，以斧头规则为基础，增加了引导式检查。对于真实用户测试，NVDA 在 Windows 和 VoiceOver 在 macOS 上定义的验证：验证器检测到的结果是可在上下文中理解的。

MDN 的可访问性文档和 W3C 的 WAI-ARIA 模式指南是开发过程中建议同时打开的两大来源。前者解释每个角色，后者展示如何将它们组合成完整的组件。

资料来源和进一步阅读

• WAI-ARIA — 维基百科：Web 可访问性倡议 – 可访问的富互联网应用程序 (WAI-ARIA) 是万维网联盟 (W3C) 发布的一项技术规范，…

常见问题

存在多少个 ARIA 角色？

W3C WAI-ARIA 1.2 规范总共定义了 82 个角色，分为文档角色、地标角色、小部件角色、结构角色、窗口角色和抽象角色。在这种情况下，通常的开发中只使用了一小部分：抽象角色永远不会被编写，并且许多文档角色重复本机 HTML 元素。

ARIA 角色和 ARIA 属性之间有什么区别？

ARIA 角色描述元素“是什么”，而 ARIA 属性描述其“状态”或“属性”。例如，role="checkbox" 标识组件，而 aria-checked="true" 则传达其是否被选中。 角色通过 role 属性分配；状态和属性则使用 aria- 前缀。

如果我已经使用了语义化 HTML，还需要使用 ARIA 吗？

在大多数情况下，不会。语义 HTML 已经公开了隐式角色：<nav> 相当于 role="navigation"，而 <main> 相当于 role="main"。显式添加角色是多余的，并且可能会产生冲突。 ARIA 是为 HTML 未涵盖的组件保留的，例如选项卡、树或复杂的菜单。

¿Qué 角色 ARIA nunca debo escribir en el Marcado？

抽象角色不应该出现：“command”、“composite”、“input”、“landmark”、“range”、“roletype”、“section”、“sectionhead”、“select”、“structure”、“widget”和“window”。它们的存在只是为了规范定义角色之间的属性继承。写入它们会产生验证器标记的无效角色。

如何验证 ARIA 角色是否正常工作？

验证结合了三个步骤：检查浏览器开发工具中的可访问性树以确认计算出的角色，传递 axe-core 等验证器以检测缺少的强制属性，以及使用 NVDA 或 VoiceOver 等真实屏幕阅读器进行测试。只有最后一步才能确认该公告对于一个人来说是可以理解的。

ARIA 角色在不同版本的规范之间会发生变化吗？

巳。 ARIA 1.1 的角色包括“馈送”和“切换”，ARIA 1.2 修改了“组合框”的功能并整合了其他价值。 ARIA 1.3 正在开发中。始终查阅当前版本的规范，以避免应用被现代屏幕阅读器以不同方式解读的过时模式。。