TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si estilizas un componente para que visualmente parezca apagado o desmarcado, pero dejas hardcodeado en el HTML aria-checked="true" o aria-expanded="true", estás mintiéndole al lector de pantalla. Lo que el ciego oye contradice la realidad de la base de datos.
La fragilidad del estado manejado por Javascript
Cuando construimos componentes personalizados (ej: un Switch/Toggle creado con Divs), el estado visual se cambia añadiendo clases CSS (.active). El problema crítico (WCAG 4.1.2) ocurre cuando el desarrollador olvida que Javascript también debe actualizar dinámicamente los estados ARIA a la par del CSS.
El patrón erróneo: Código Accesible Deficiente
El botón no tiene la clase .is-active (visualmente está apagado), pero el atributo ARIA afirma rotundamente a las tecnologías asistivas que está encendido.
<!-- MAL: Contradicción entre Estado Visual y Semántico -->
<div class="custom-toggle" role="switch" aria-checked="true">
Notificaciones
</div>La Solución Accesible: Código Recomendado
Utilizar elementos nativos (que manejan su estado en C++ dentro del navegador automáticamente) o garantizar una vinculación férrea en Javascript entre la clase visual y el atributo ARIA.
<!-- BIEN: Uso de semántica nativa infalible -->
<input type="checkbox" role="switch" id="notif">
<label for="notif">Notificaciones</label>
<!-- ACEPTABLE: Estados estrictamente sincronizados en DOM personalizado -->
<div class="custom-toggle is-active" role="switch" aria-checked="true">
Notificaciones
</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.
