role="button"

¿Qué es role="button"?

role="button" es un rol ARIA que identifica un elemento como un botón cuando no se puede usar el elemento HTML semántico <button>. Se usa típicamente en elementos <div> o <span> que actúan como botones.

Relación con WCAG 2.1

El Criterio 4.1.2 (Nombre, Rol, Valor) requiere que los elementos tengan roles apropiados. El Criterio 2.1.1 (Teclado) requiere que todos los elementos interactivos sean operables por teclado.

Ejemplos prácticos

✅ Correcto: Div como botón accesible

<div 
  role="button" 
  tabindex="0"
  aria-label="Cerrar ventana"
  onclick="cerrar()"
  onkeydown="if(event.key==='Enter'||event.key===' '){cerrar()}">
  Cerrar
</div>

✅ Correcto: Icono clickeable

<span 
  role="button"
  tabindex="0"
  aria-label="Eliminar elemento"
  onclick="eliminar()"
  onkeydown="if(event.key==='Enter'||event.key===' '){eliminar()}">
  <span aria-hidden="true">🗑️</span>
</span>

❌ Incorrecto: Sin teclado

<!-- Falta soporte de teclado -->
<div role="button" onclick="accion()">
  Hacer algo
</div>

❌ Incorrecto: Sin nombre accesible

<!-- Falta aria-label o texto -->
<div role="button" tabindex="0">
  <span aria-hidden="true">×</span>
</div>

Requisitos de accesibilidad

1. Teclado: Debe responder a Enter y Espacio
2. Nombre accesible: aria-label o texto visible
3. Indicador de foco: Visible cuando tiene foco
4. Estado: Si es toggle, usar aria-pressed

Errores comunes

1. Olvidar soporte de teclado: No manejar eventos de teclado
2. Sin nombre accesible: Elementos sin texto o aria-label
3. Sin indicador de foco: No visible cuando tiene foco
4. Usar cuando es posible: Preferir HTML semántico
5. No actualizar estados: Si es toggle, no actualizar aria-pressed

Buenas prácticas

• Preferir : Usar HTML semántico cuando sea posible
• Soporte completo de teclado: Enter y Espacio
• Nombre accesible: Siempre proporcionar
• Indicador de foco: Visible y claro
• Probar con lectores de pantalla: Verificar que funciona correctamente

Términos relacionados

• [[Botón]]
• [[Navegación por teclado]]
• [[Nombre accesible]]
• [[aria-label]]
• [[WCAG 2.1]]
• [[Criterio 4.1.2]]