TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La Primera Regla de ARIA es: "Ningún ARIA es mejor que mal ARIA". Si asignas un atributo como aria-checked="true" a un enlace (role="link"), el lector de pantalla puede colapsar o ignorarlo, porque un enlace, por especificación, no posee estados de verificación.
La crisis de la sobre-ingeniería accesible
En el afán de lograr el "100% de accesibilidad", algunos desarrolladores inyectan atributos ARIA indiscriminadamente tratando de describir todo el comportamiento visual de un componente. Esto viola el Criterio 4.1.2 y envenena el Árbol de Accesibilidad con estados contradictorios.
El patrón erróneo: Código Accesible Deficiente
Intentar simular un checkbox utilizando un div con rol de botón, y mezclando estados incompatibles.
<!-- MAL: Botón con estado checked (Los botones no pueden estar checked, solo pressed) -->
<button aria-checked="true" onclick="toggle()">
Aceptar Términos
</button>La Solución Accesible: Código Recomendado
Consultar estrictamente la matriz de compatibilidad de la Especificación W3C WAI-ARIA. En este caso, si es seleccionable, debe ser un role="checkbox" o un input nativo.
<!-- BIEN: Uso de elemento nativo correcto -->
<label>
<input type="checkbox" checked>
Aceptar Términos
</label>
<!-- ACEPTABLE: Botón tipo toggle con estado válido -->
<button aria-pressed="true" onclick="toggle()">
Activar Filtro
</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.
