TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si creas un interruptor (Toggle/Switch) personalizado y gestionas su estado con aria-checked, debes asegurarte de asignarle un aria-label o aria-labelledby. Si no lo haces, el lector de pantalla anunciará "Interruptor, activado", dejando a la persona usuaria sin saber qué es lo que acaba de activar.
El estado sin propósito
Es común en paneles de configuración diseñar interruptores redondeados tipo iOS. El desarrollador agrega role="switch" y aria-checked="true", creyendo cumplir con la accesibilidad. Sin embargo, al ignorar la parte de "Nombre" de la regla de Nombre, Función, Valor (WCAG 4.1.2), el componente es inoperable a nivel cognitivo.
El patrón erróneo: Código Accesible Deficiente
El lector transmite la mecánica de interacción perfectamente, pero omite por completo el contexto de negocio.
<!-- MAL: Control interactivo sin identidad -->
<div class="toggle-container">
<span>Suscripción al boletín</span>
<!-- El interruptor no está vinculado al texto adyacente -->
<div role="switch" aria-checked="true" tabindex="0"></div>
</div>La Solución Accesible: Código Recomendado
Vincular el componente ARIA con su texto visible utilizando el atributo aria-labelledby apuntando al ID del texto.
<!-- BIEN: El control hereda su nombre del texto adyacente -->
<div class="toggle-container">
<span id="lbl-boletin">Suscripción al boletín</span>
<div role="switch" aria-checked="true" tabindex="0" aria-labelledby="lbl-boletin"></div>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, presionar F para saltar entre campos de formulario. Verificar que el lector de pantalla anuncie correctamente el nombre, tipo y estado del campo. Si el campo no posee una etiqueta vinculada programáticamente, el lector solo anunciará el tipo de control sin contexto. En VoiceOver (iOS), tocar el campo y confirmar que la descripción sea completa.
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.
