TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si declaras role="nav" en lugar de role="navigation", o role="btn" en lugar de role="button", el navegador no entenderá tu orden y el elemento se degradará a texto plano, destruyendo su interactividad semántica.
La tiranía del estándar exacto
A diferencia de las clases CSS, donde un error tipográfico solo causa un fallo visual evidente, un rol ARIA inventado o mal deletreado produce una falla silenciosa catastrófica (WCAG 4.1.2). La persona usuaria ciego simplemente no detectará el botón o el menú, porque la API de Accesibilidad lo descartó.
El patrón erróneo: Código Accesible Deficiente
Uso de abreviaturas o malas interpretaciones de la documentación de W3C WAI-ARIA.
<!-- MAL: Rol inexistente. Se leerá como texto estático. -->
<div role="btn" onclick="enviar()">Enviar</div>
<!-- MAL: Confusión con etiquetas HTML -->
<div role="nav">...</div>La Solución Accesible: Código Recomendado
Utilizar exclusivamente la sintaxis oficial, o mejor aún, confiar siempre que sea posible en los elementos HTML5 nativos que ya poseen estos roles integrados.
<!-- BIEN: Rol oficial exacto -->
<div role="button" tabindex="0" onclick="enviar()">Enviar</div>
<!-- MEJOR: Evitar ARIA y usar HTML nativo -->
<button type="button" onclick="enviar()">Enviar</button>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar D para saltar entre landmarks (puntos de referencia). Verificar que las regiones semánticas sean detectadas correctamente y que sus nombres sean descriptivos. En JAWS, usar R para navegar entre regiones. En VoiceOver (macOS), abrir el Rotor (VO+U) y verificar la lista de "Puntos de referencia".
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
