Warning Valor de rol ARIA no reconocido
Por qué un role con un error de tipeo o inventado es ignorado en silencio por los lectores de pantalla, anulando la corrección de accesibilidad buscada.
El validador advierte cuando el valor de un atributo role no coincide con ningún rol de la especificación WAI-ARIA.
Ejemplo
<!-- Incorrecto: "botn" no es un rol real -->
<div role="botn" tabindex="0">Enviar</div>
<!-- Correcto -->
<div role="button" tabindex="0">Enviar</div>
<!-- Generalmente mejor todavía: usar el elemento nativo -->
<button>Enviar</button>Por qué importa
Un valor de role no reconocido no provoca un error — simplemente se ignora. La tecnología de asistencia recurre al rol implícito del elemento en su lugar (un <div> simple no tiene ningún rol implícito), lo cual anula en silencio cualquier corrección de accesibilidad que el atributo role pretendía dar. Como los usuarios videntes no ven ninguna diferencia visible, este tipo de error tiende a pasar desapercibido sin un lector de pantalla o una revisión de accesibilidad automatizada que lo busque específicamente. La solución más confiable suele ser evitar la situación por completo: usar el elemento HTML nativo que ya tiene el rol y el comportamiento correctos incorporados (un <button> real en vez de un <div role="button">) en lugar de reconstruirlo con ARIA.
Frequently asked questions
¿Por qué el navegador no muestra un error para un role inválido?
Los atributos ARIA están diseñados para fallar de forma segura, como la mayor parte de HTML — un valor no reconocido simplemente no se aplica, sin ninguna advertencia en la consola en la mayoría de los navegadores. Ese silencio es exactamente por qué este problema es fácil de publicar sin notarlo.
¿Debería usar atributos role en general, o quedarme con elementos nativos?
La primera regla del uso de ARIA es preferir un elemento HTML nativo con el comportamiento y la semántica que se necesitan, en vez de agregar atributos role y ARIA a un elemento genérico. Recurre a role solo cuando genuinamente no exista ningún elemento nativo que encaje — un widget personalizado como un panel de pestañas o un combobox, por ejemplo.