ARIA 角色按钮：Guía Completa y Práctica

aria role button 是一个 ARIA 角色，它使辅助技术将通用容器宣布为按钮，但它不提供行为：必须添加 tabindex="0"，处理 Enter 和空格键，并使用 aria-pressed 或 aria-disabled 来反映状态。 WAI-ARIA 1.2 规范将此角色定义在 widget 类别中，且 ARIA 的第一条规则建议尽可能使用原生的 <button>。

aria role button 属于 WAI-ARIA 的角色分类，是 W3C 的标准，用于描述网络界面可访问的语义。当一个元素被赋予 role="button" 时，屏幕阅读器（NVDA, JAWS, VoiceOver, Narrator）构建的辅助功能树将不再将其视为通用的 div 或 span，而是将其呈现为一个可操作的控件。 这对于使用屏幕阅读器导航的用户来说差别巨大：没有该角色，用户听到的是“组”或仅仅是文本；有了该角色，用户听到的是“按钮”，并知道可以激活它。

常见的误区是认为 role="button" 能将 div 转换为一个功能完备的按钮。事实并非如此。 该角色仅改变宣布的语义；而行为（获取焦点、响应键盘、触发操作）仍由开发人员负责。这种语义与行为的分离是使用该角色时产生大多数错误的原因。

WAI-ARIA 作为 W3C 的推荐标准发布，其 1.2 版本是角色、状态和属性的现行参考标准。 button 角色是规范中最古老且最稳定的 widget 角色之一，自 ARIA 1.0 起就已存在。

Cuándo usar role=“button” 和 cuándo no

ARIA 的第一条规则（记录在 WAI-ARIA 创作实践中）非常明确：如果存在具有你所需语义和行为的原生 HTML 元素，请使用它。 <button> 已经自带了隐式角色、键盘焦点、Enter 和空格键激活以及禁用状态。使用 aria role role="button" 来重新实现这些功能是额外的工作，且容易产生 bug。

然而，在某些合法场景下可以使用该角色。最常见的情况是标记受框架或 CMS 限制，无法在不破坏布局或现有 JavaScript 的情况下引入 <button>。另一种情况是组件必须表现得像按钮，但其内部结构要求使用特定的容器，例如某些第三方组件。

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

第三个场景更具争议，即元素已经具有不同的原生角色但需要呈现为按钮。 在这种情况下，应该思考设计是否在强加错误的语义。如果某个元素看起来像按钮但实际上是导航到另一个页面，那么正确的做法是使用链接 <a> 而非按钮。

情况	推荐解决方案	莫蒂沃
交互公式行动	<按钮> navo	Rol、foco y teclado 包括
导航其他 URL	<a href>	正确连接语义
内容不可修改	role="button" + teclado + estados	乌尼科·卡索·东德·埃尔·罗尔·阿波尔塔
Botón de alternancia（开/关）	<按咏叹调的按钮>	国家发展
Botón 破坏	<按钮已禁用>	国家和焦点

执行与 role=“button” 更正相关的按钮

按钮必须是“role=”button”`，需要使用以下命令：foco、teclado、estado 和 nombre accessible。 Omitir cualquiera de ellos 生产不受控制的“parece”，可在 pruebas reales 中访问 pero Falla。

可以使用 tabindex="0"，在自然表格顺序中插入元素。 Nunca 使用“tabindex”来表示积极的价值：改变所有页面的制表顺序和不可预知的一般变化。 El valor ‘0’ 是个性化交互元素的正确选择。

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

El teclado requiere manejar dos teclas: 输入 y Espacio。 Un <button> nativo responde a ambas, pero un div con un aria role de botón no lo hace por sí alone.如果按下“keydown”并执行“Enter”或“Space”操作，则会在页面上弹出一个挑衅性的空间或叛逃。这是一个与频率和声音有关的中音部分，它具有独立的功能。

El estado se comunica con atributos ARIA。 Un botón de alternancia usa aria-pressed="true" 或 "false" para indicar si está active.如果使用 aria-disabled="true" 按钮，则表示无法进行单独的互动：请在代码中进行操作。 “aria-disabled”和“disabled”之间的区别在于，首先要指定元素，然后再选择表格顺序。

名称可与可见元素或文本一起构建，如果没有文本，则与“aria-label”或“aria-labelledby”有关。一个按钮可以通过一个按钮来访问，该按钮可以通过“按钮”来访问，但它是一个按钮。

<div
  角色=“按钮”
  标签索引=“0”
  咏叹调-pressed =“假”
  id="btn-modo"
>
  奥斯库罗模式
</div>

<脚本>
  const btn = document.getElementById('btn-modo');
  函数切换（）{
    const activo = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!activo));
  }
  btn.addEventListener('点击', 切换);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      切换（）；
    }
  });
</脚本>

El ejemplo anterior cubre foco, teclado, estado y nombre。至少可以控制海上可用的潘塔拉和特克拉多连接器。

错误频率和检测器错误

如果在tabindex中使用role="button"，则会出现错误，导致无法在技术上使用按钮。自动检测器以“不可强制交互的元素”的方式，将小提琴报告为可访问的报告。

第二个错误是不存在的。 Un div con un aria role de botón y tabindex pero sin manejadores de tecla recibe foco y no responde a Enter ni Espacio. El usuario de teclado queda atrapado: puede enfocar el botón pero no activarlo.

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

使用 role="button" 时会出现第三个错误。这与导航的语义和混淆了潘塔拉的朗诵者的含义有关，但它是“按钮”，通常是与捆绑在一起的。 Si el elemento navega，debe ser un enlace。

错误发生在 olvidar el estado en botones de alternancia。 Un botón que cambia entre dos modos sin ‘aria-pressed’ deja al usuario sin saber en qué estado se encuentra.该属性是通讯格式的属性，是程序格式的标准。

检测到问题，自动装置与斧头、灯塔或 WAVE 信号中提琴的作用，但没有验证国家逻辑的技术配合。 Esa 部分 exige prueba 手册：navegar con Tab，activar con Enter y Espacio，y escuchar la salida del lector de pantalla。自动审计和手动审计的组合可有效验证和个性化按钮。

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

Cómo probar un botón con role=“button”

La prueba empieza por el teclado。在选项卡上记录页面并计算与咏叹调角色按钮可见的按钮。脉冲输入和单独空间： ambos deben disparar la acción。如果您在页面上的空间中激活按钮，则可以“防止默认”。

La segunda prueba es con lector de pantalla. Windows 上的 NVDA、macOS 上的 VoiceOver 和 Windows 上的讲述人都是美国的参考。 Al enfocar el botón, el lector debe anunciar el rol (“botón”), el nombre accessible y el estado si lo titene. Si anuncia “grupo” o no menciona el estado, algo Falla。

La tercera prueba es de orden de foco。该按钮将按照表格顺序排列，并显示相应的视觉效果。 ‘tabindex’ 积极地促进了 Claro de Mala 实施的指示。

La cuarta prueba es de contre y foco 可见。 El indicador de foco no debe Eliminarse con outline: none sin sustituirlo por una aternativa 可见。在此过程中，请使用正确的食谱。

现代替代品角色按钮

El elemento <button> nativo sigue siendo la mejor option en 2024 y en cualquier proyecto nuevo。 Aporta rol, foco, teclado y estados sin código adicional, y los navegadores lo tratan de forma permanente.

洛斯 自定义元素 o Web 组件 ofrecen otra vía。扩展“HTMLElement”组件需要封装按钮并解释正确的语义，因此需要使用“role=”button”`的焦点和技术手册。 La ventaja es la reutilización; la desventaja, la Misma responsabilidad de Implementación.

Las ARIA in HTML （reglas que Definen qué 角色 ARIA se alloweden sobre cada elemento HTML） desaconsejan sobrescribir 角色 nativos。应用 aria 角色 role="button" 与 <button> 是多余的；应用一个与“href”相反的“”。一般建议和保留有关语义相关内容的建议。

要点

• role="button" cambia alone la semántica anunciada; el foco、el teclado 和 el estado hay que Implementarlos a mano。
• La Primera regla de ARIA 建议使用 <button> nativo siempre que el marcado lo perpera。
• 与 aria 角色按钮相关的按钮需要 tabindex="0"，需要输入 Enter 和 Espacio，名称可访问并可设置为 aria-pressed 或 aria-disabled。
• 自动检测 falta de foco、pero el comportamiento de teclado 和 estado exige prueba 手动连接 pantalla。
• Nunca 使用 tabindex 正面附加 role="button" 来连接导航。

常见问题

¿角色=“按钮”和元素按钮之间有何区别？

“<按钮>”元素本身包括隐式角色、桌面按钮、输入空间和附加功能的激活。 El atributo role="button" 单独 aporta la semántica anunciada;恢复程序的兼容性。 Por eso la Primera regla de ARIA 建议使用可能的海洋元素。

¿Necesito tabindex con role=“button”？

巳。 Un div 或 span con role="button" 不能强制执行，因为 tabindex="0" 无法执行制表顺序，也无法执行命令。 El valor Correcto es 0;改变页面顺序和删除表格的积极价值。

¿Cómo hago que un div con role=“button” 响应 Enter y Espacio？

按下“keydown”并按下“Enter”或“Space”按钮。在空间中，您可以使用“preventDefault”来防止页面消失。如果是这样，您可以在没有任何活动的情况下进行操作。

¿Cómo indico que un botón está activo or deshabilitado?

使用 aria-pressed="true" 或 "false" 更改状态。如果您使用“aria-disabled=”true“`，则表示无法进行单独的互动：但会阻碍您的行动。本地属性“已禁用”最好使用“<按钮>”。

¿Es mala práctica usar role=“button” en un enlace？

那么，请连接另一个 URL。 Sobrescribir 的角色与 <a href> 和 role="button" 一起使用导航语义，并混淆了潘塔拉的读者，而“按钮”则通常与捆绑在一起。 Si el elemento navega，debe conservar su rol de enlace。

¿如何检测角色=“按钮”的错误？

自动工具是斧头、灯塔或 WAVE 小提琴，是交互元素中的 falta de foco。但是，无法验证国家逻辑的技术配合，无法将自动音频与使用 NVDA、旁白或旁白的手动音频组合进行验证。