ARIA 角色示例：完整指南

作者： Niquelao Resource Desk · 更新于 2026年9月28日

ARIA 角色示例展示了角色属性如何将界面元素映射到可访问性树，WAI-ARIA 1.2 规范定义了 6 个角色类别（小部件、文档结构、地标、活动区域、窗口和摘要），涵盖 80 多个具体角色。本指南为每个类别提供了可供复制的实际示例，以及确定角色何时提供帮助以及何时主动造成伤害的规则。

要点

ARIA 角色告诉辅助技术一个项目是什么；它们从不自行添加行为、焦点或键盘支持。
使用 ARIA 的第一条规则是优先选择原生 HTML 元素，这些元素已经带有隐式角色、状态和键盘管理。
六个 WAI-ARIA 1.2 角色类别是小部件、文档结构、地标、活动区域、窗口和摘要 - 抽象角色永远不应出现在您的标记中。
地标角色是您可以添加到现有 XHTML/CSS 站点的最具成本效益和最低风险的 ARIA。
小部件角色几乎总是需要 JavaScript 映射来进行键盘交互和状态处理，否则它们会产生比纯 HTML 更糟糕的体验。
使用屏幕阅读器和自动检查器验证每个角色；规范中的有效角色对于您的内容来说可能仍然是错误的。

ARIA 角色的实际用途

ARIA 角色是您放置在“role”属性中的标记，用于替换或提供可访问性树中元素的语义标识。 <div role="button"> 告诉屏幕阅读器宣布“按钮”，但浏览器仍然将其视为通用容器：它不可聚焦，不响应 Enter 或 Space，并且没有禁用状态。声明的语义与实际行为之间的差距是 ARIA 失败的最常见原因。这些是常见的咏叹调角色示例，说明语义如何与行为不同。

WAI-ARIA 规范由 W3C 的可访问富互联网应用程序工作组维护，定义了角色以及状态和属性。角色是“它是什么”层；诸如 aria-expanded、aria-checked 和 aria-label 之类的状态和属性是“它所处的条件”层。没有所需状态的角色是不完整的 - role="checkbox" 需要 aria-checked，而 role="combobox" 需要 aria-expanded 加上一个受控列表框。

原生 HTML 元素具有隐含的角色。 <button> 对应于按钮角色，<nav> 对应于导航，<h1> 到 <h6> 对应于标题，<input type="checkbox"> 对应于复选框。由于浏览器自动提供角色、键盘行为和状态，因此使用 ARIA 的首要规则（记录在 W3C 的 ARIA 创作实践指南中）是只要存在等效元素就使用本机语义。仅当没有合适的本机元素时才查找显式角色，例如自定义树视图或从“

”构建的选项卡式面板。

WAI-ARIA 的六个角色类别

WAI-ARIA 1.2 将角色分为六类，了解角色属于哪一类可以告诉您需要编写多少 JavaScript。以下是一些常见的咏叹调角色示例：

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

类别	目的	角色示例	需要 JavaScript 吗？
小部件	互动控制	`button`、`checkbox`、`tab`、`slider`、`combobox`	是的 — 键盘 + 状态
文档结构	内容组织	`heading`、`list`、`listitem`、`table`、`article`	没有
地标	导航页面区域	`banner`、`main`、`navigation`、`complementary`	没有
直播区域	公布动态更新	`alert`、`status`、`log`、`timer`	通常 - 触发更新
窗口	子窗口和对话框	`dialog`、`alertdialog`	是的——焦点管理
摘要	超级角色，从未创作	`widget`、`input`、`section`、`landmark`	不适用 — 请勿使用

抽象角色只是为了组织分类而存在。在 HTML 中写入 role="input" 或 role="section" 会产生验证错误，并会产生不可预测的公告，因为这些角色没有针对辅助技术的定义行为。

地标角色示例

地标角色是最安全、最有影响力的 ARIA 角色示例，您可以添加到旧的 XHTML/CSS 站点，因为它们不需要 JavaScript 并且直接映射到您已有的区域。一个典型的页面骨架：

<header role="banner">
  <nav role="navigation" aria-label="Principal">
    <ul>...</ul>
  </导航>
</标题>
<主要角色=“主要”>
  <文章>...</文章>
  <aside role="complementary" aria-label="Artículos relacionados">...</aside>
</主要>
<页脚角色=“内容信息”>...</页脚>

每个标记角色对应于一个原生元素 - 顶层的“banner”对应于“

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

”，“main”对应于“

”，“navigation”对应于“

”，“complementary”对应于“

”，“contentinfo”对应于“

”。当你使用原生元素时，其作用是隐含的，你不应该重复它。仅当您陷入无法修改的“

”标记时，显式“role”属性才获得其位置，这在旧模板和 CMS 输出中很常见。

这里有两个警告。首先，banner、main 和 contentinfo 必须每页出现一次；几个“主要”地标干扰了导航。其次，当存在多个相同类型的地标时（例如三个“

”元素），为每个地标提供一个单独的“aria-label”，以便屏幕阅读器用户可以在地标列表中区分它们。未标记的“nav”以与其同级元素相同的方式被声明，这违背了目的。

小部件角色示例

Widget 角色是 ARIA 变得既强大又危险的地方。每个小部件角色都有一个隐式契约：特定的键盘键、特定的状态和特定的焦点行为。 ARIA 创作实践指南发布了每个模式的完整模式。这些咏叹调角色示例说明了所涉及的复杂性。

例如，切换按钮需要“aria-pressed”来传达其开/关状态：

<按钮类型=“按钮”aria-pressed=“假”id=“静音”>
  沉默者
</按钮>

<button> 元素提供角色、焦点和 Enter/Space 处理； JavaScript 仅在“false”和“true”之间翻转“aria-pressed”。这是 ARIA 使用的理想形式 — 原生元素、最小 ARIA、小脚本。

Related: — La certificación profesional que acredita tu experiencia en accesibilidad.

从 <div> 构建的自定义选项卡界面是相反的情况。它需要容器上的role =“tablist”，每个选项卡上的role =“tab”，每个面板上的role =“tabpanel”，活动选项卡上的aria-selected，将选项卡链接到面板的aria-controls，以及选项卡之间的箭头键导航。如果您错过其中任何一个，小部件会将自己声明为选项卡，但其行为类似于静态文本。这同样适用于role =“slider”（需要aria-valuenow，aria-valuemin，aria-valuemax和箭头键），role =“combobox”（需要aria-expanded和受控列表框）和role =“tree”（需要aria-expanded和完整箭头键遍历）。

一个有用的决策规则：如果有一个本机元素可以完成这项工作 - <button>、<input type="checkbox">、<select>、<details> - 使用它并完全忽略小部件角色。为真正新颖的控件保留自定义小部件角色，并在发货前预算 JavaScript 以实现完整的键盘模式。

文档结构和活动区域示例

当本机元素不可用时，文档结构角色描述内容关系。这些 aria 角色示例包括 role="heading" 和 aria-level，这是对充当标题的样式化 <div> 的经典救援：

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

<div role="heading" aria-level="2">我的新生活</div>

“aria-level”属性在这里是强制性的——没有级别的标题角色在没有排名的情况下被宣布，打破了文档大纲。类似地，当list-style: none等CSS或flex容器在某些浏览器中删除role =“list”和role =“listitem”时，role =“list”和role =“listitem”会恢复列表语义，并且role =“table”，role =“row”，role =“columnheader”和role =“cell”从<div>标记重建数据表。在实践中，重组为实际的“

实时区域角色无需重新加载页面即可宣布更改内容。 role="alert" 立即中断屏幕阅读器并容纳错误消息和紧急通知； role="status" 礼貌地等待，并且可以接受像“Guardado”这样的确认； role="log" 适合聊天和活动源； role="timer" 对应倒计时。关键细节是，活动区域容器必须在内容更改之前存在于 DOM 中——同时注入带有“role=”alert“”的新元素及其文本通常不会产生任何通知，因为该区域不存在可供监视。在页面加载时创建一个空的 <div role="status"> 并稍后更新其文本。

常见的 ARIA 角色错误

冗余角色位居榜首。这些 aria 角色示例，例如 <button role="button"> 和 <nav role="navigation">，不会添加任何内容并使标记变得混乱；隐含角色已经存在。当开发人员将“role=”heading“”添加到“

”时，也会出现相同的冗余。

缺少必需的状态排在第二位。没有 `aria-checked` 的 `role="checkbox"`、没有 `aria-valuenow` 的 `role="slider"` 和没有 `aria-expanded` 的 `role="combobox"` 都会产生不完整的公告，从而误导用户。该规范列出了每个角色所需的状态和属性，自动检查器会标记它们的缺失。

第三，在错误的元素上滥用角色。将 `role="button"` 放在 `<a href>` 上会覆盖链接语义并破坏预期行为，例如在新选项卡中打开。将 `role="presentation"` 或 `role="none"` 放在可聚焦元素上会删除其语义，同时将其保留在 Tab 键顺序中，从而创建一个没有声明标识的可聚焦元素。使用诸如`role =“widget”`或`role =“input”`之类的抽象角色始终是一个错误。

最后，ARIA 角色无法修复损坏的 DOM。无论您添加多少个属性，嵌套在其自己的“role =”tab”中的“role =”tabpanel”`都会生成一棵无意义的树。首先修复结构，然后将 ARIA 放在上面。

如何测试 ARIA 角色

测试 ARIA 角色需要多种方法，因为自动化工具可以检测有效性错误，但不能检测语义不匹配。从可访问性检查器（ax DevTools、WAVE 或 Lighthouse）开始，以检测标记中的无效角色、缺少必需的属性和抽象角色。这些工具速度快，可以检测机械错误。

随后使用屏幕阅读器通行证。 Windows 上使用 Firefox 的 NVDA、Chrome 上使用的 JAWS 以及 macOS 上使用 Safari 的 VoiceOver 都以不同的方式公开可访问性树，并且在一个角色中正确宣布的角色可能在另一个角色中无法正确宣布。按地标和标题导航以确认您的结构角色产生了预期的轮廓，然后通过每个小部件进行选项卡以验证宣布的角色、状态和键盘行为是否匹配。

直接在 Chrome 或 Firefox DevTools 中检查辅助功能树，其中“辅助功能”面板显示任何元素的计算角色和名称。这揭示了您编写的角色与浏览器实际公开的角色之间的差距 - 这是检测被父级覆盖或完全忽略的角色的最快方法。

资料来源和进一步阅读

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

常见问题

ARIA 角色是什么以及它们如何工作？

ARIA 角色是 role 属性中的值，定义可访问性树中元素的标识，以便屏幕阅读器正确地宣布它。它们只改变语义，而不改变外观、焦点或键盘行为。 WAI-ARIA 1.2 规范定义了 6 个角色类别和 80 多个具体角色，每个角色都有所需的状态和属性。

我什么时候应该使用 ARIA 角色而不是本机 HTML？

仅当没有本机 HTML 元素提供您需要的语义时，才使用 ARIA 角色。 <button>、<nav> 和 <input type="checkbox"> 等本机元素具有隐式角色以及内置键盘支持和状态管理。 ARIA 使用的第一条规则是优先使用本机语义，并且仅为自定义小部件或无法重构的遗留标记添加显式角色。

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

ARIA 角色回答“这个项目是什么”，而 ARIA 属性（例如“aria-expanded”、“aria-checked”和“aria-label”）回答“它处于什么状态”或“它叫什么”。角色及其所需的属性协同工作：作为 aria 角色示例，如果没有 aria-checked，role=“checkbox”是不完整的，而role=“combobox”需要aria-expanded` 加上一个受控列表框。

我可以在任何 HTML 元素上使用 ARIA 角色吗？

ARIA 角色可以应用于大多数元素，但某些组合是无效或有害的。永远不应该编写“widget”和“input”等抽象角色。将链接的角色更改为“role=“button””会破坏链接的预期行为，而可聚焦元素上的“role=“presentation””会删除其语义，同时保留 Tab 键顺序。

ARIA 角色可以在没有 JavaScript 的情况下工作吗？

文档结构和地标角色无需 JavaScript 即可工作，因为它们仅修改语义。像“tab”、“slider”和“combobox”这样的小部件角色需要 JavaScript 来实现键盘交互和更新状态 - 如果没有它，元素会声明自己是一个控件，但行为却不像控件，这比纯 HTML 更糟糕。

如何检查我的 ARIA 角色是否正确？

结合自动化和手动测试。运行 axe DevTools、WAVE 或 Lighthouse 以检测无效角色和缺少所需属性，然后使用 NVDA、JAWS 和 VoiceOver 进行测试以确认读屏播报和键盘行为。 Chrome 和 Firefox DevTools 中的辅助功能面板显示计算出的角色，显示浏览器覆盖或忽略的任何角色。

Frequently asked questions

ARIA 角色是什么以及它们如何工作？

ARIA 角色是角色属性中的值，用于定义可访问性树中元素的标识，以便屏幕阅读器正确地读出它。它们只改变语义，而不改变外观、焦点或键盘行为。 WAI-ARIA 1.2 规范定义了 6 个角色类别和 80 多个具体角色，每个角色都有所需的状态和属性。

我什么时候应该使用 ARIA 角色而不是本机 HTML？

仅当没有本机 HTML 元素提供您需要的语义时，才使用 ARIA 角色。 <button>、<nav> 和 <input type='checkbox'> 等本机元素具有隐式角色以及内置键盘支持和状态管理。 ARIA 使用的第一条规则是优先使用本机语义，并且仅为自定义小部件或无法重构的遗留标记添加显式角色。

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

ARIA 角色回答“这个项目是什么”，而 ARIA 属性（例如 aria-expanded、aria-checked 和 aria-label）回答“它处于什么状态”或“它叫什么”。角色及其所需的属性协同工作：作为 aria 角色示例，如果没有 aria-checked，role='checkbox' 是不完整的，而 role='combobox' 需要 aria-expanded 加上受控列表框。

我可以在任何 HTML 元素上使用 ARIA 角色吗？

ARIA 角色可以应用于大多数元素，但某些组合是无效或有害的。永远不应该创建诸如小部件和输入之类的抽象角色。将链接的角色更改为 role='button' 会破坏链接的预期行为，而可聚焦元素上的 role='presentation' 会删除其语义，同时保留 Tab 键顺序。

ARIA 角色可以在没有 JavaScript 的情况下工作吗？

文档结构和地标角色无需 JavaScript 即可工作，因为它们仅修改语义。选项卡、滑块和组合框等小部件角色需要 JavaScript 来实现键盘交互和更新状态 - 如果没有它，元素会宣称自己是一个控件，但其行为却不像控件，这比纯 HTML 更糟糕。

如何检查我的 ARIA 角色是否正确？

结合自动化和手动测试。运行 ax DevTools、WAVE 或 Lighthouse 以检测无效角色和缺少所需属性，然后使用 NVDA、JAWS 和 VoiceOver 进行测试以确认公告和键盘行为。 Chrome 和 Firefox DevTools 中的辅助功能面板显示计算出的角色，显示浏览器覆盖或忽略的任何角色。

Añade accesibilidad en 5 minutos

Widget de accesibilidad con plan gratuito para empezar hoy mismo