TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si conviertes un <div> en un botón agregando role="button", el lector de pantalla dirá "Botón". Sin embargo, si ese <div> solo contiene un icono sin texto interno o aria-label, la persona usuaria escuchará "Botón" en seco, sin tener idea de qué ocurrirá al pulsarlo.
La promesa incompleta del atributo Role
El Criterio WCAG 4.1.2 exige tres cosas: Nombre, Función (Role) y Valor. Muchos desarrolladores corrigen auditorías solucionando la "Función" (agregando roles ARIA), pero olvidan el "Nombre". Esta omisión es severa porque fuerza a la persona usuaria a ejecutar acciones destructivas (como borrar o enviar) a ciegas.
El patrón erróneo: Código Accesible Deficiente
El sistema conoce cómo se opera el elemento (es un botón, se oprime), pero desconoce totalmente su propósito.
<!-- MAL: Rol presente, Nombre Accesible ausente -->
<div role="button" tabindex="0" onclick="deleteItem()">
<i class="fa fa-trash"></i>
</div>La Solución Accesible: Código Recomendado
La inyección obligatoria de un texto descriptivo, ya sea visible o programático mediante aria-label.
<!-- BIEN: Ecuación ARIA completa (Rol + Nombre) -->
<div
role="button"
tabindex="0"
aria-label="Eliminar registro actual"
onclick="deleteItem()">
<i class="fa fa-trash" aria-hidden="true"></i>
</div>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.
