TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si usas una etiqueta <a> pero le aplicas role="button", el lector de pantalla dirá "Botón". Sin embargo, si no implementas soporte Javascript para la tecla Espacio, la persona usuaria intentará accionarlo y fracasará. ARIA no otorga comportamiento, solo modifica la pronunciación.
La falsa promesa de los disfraces ARIA
Es el error más frecuente en sistemas de diseño como Bootstrap. Se estiliza un enlace para que parezca un botón (`class="btn"`) y se le inyecta un rol de botón para "arreglarlo". El conflicto emerge cuando los enlaces solo responden a la tecla Enter, mientras que los botones reales deben responder a Enter y Espacio.
El patrón erróneo: Código Accesible Deficiente
La persona usuaria de tecnología asistiva confía ciegamente en el nombre del rol. Al escuchar "Botón", pulsa la barra espaciadora, la cual hará scroll hacia abajo en la página en lugar de ejecutar la acción, causando frustración.
<!-- MAL: Contradicción entre semántica nativa y ARIA -->
<a href="/dashboard" role="button" class="btn btn-primary">
Ir al Panel
</a>La Solución Accesible: Código Recomendado
Si la acción es ir a otra URL, mantén la semántica de enlace (no modifiques su rol), sin importar que visualmente tenga bordes o fondos como un botón.
<!-- BIEN: Enlace estilizado sin falsos roles -->
<a href="/dashboard" class="btn btn-primary">
Ir al Panel
</a>
<!-- BIEN: Acción en página con un botón real -->
<button type="button" onclick="openPanel()" class="btn btn-primary">
Abrir Panel
</button>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, tabular hasta el componente ARIA personalizado. Verificar que el lector de pantalla anuncie correctamente el rol, nombre y estado actual. Si alguno de estos tres elementos falta o es incorrecto, la persona usuaria no podrá operar el componente de forma predecible.
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.
