TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Los atributos WAI-ARIA son fuertemente tipados (Booleanos, Tokens, Cadenas, IDs). Escribir aria-expanded="1" o aria-hidden="si" no solo es un error sintáctico, sino que causa que el motor de accesibilidad ignore el atributo por completo, emitiendo un estado erróneo.
La intolerancia de ARIA a las expresiones coloquiales
Un error grave (WCAG 4.1.2 Crítico) ocurre cuando un desarrollador acostumbrado a bases de datos binarias (1 y 0) o strings coloquiales traslada esa lógica a los atributos ARIA generados dinámicamente mediante frameworks como React o Angular.
El patrón erróneo: Código Accesible Deficiente
El valor no es admitido por la especificación y el navegador falla silenciosamente, dejando el menú oculto pero semánticamente visible y bloqueando la interacción.
<!-- MAL: Valores binarios y coloquiales inválidos -->
<div class="modal" aria-hidden="yes">...</div>
<button aria-expanded="1">Desplegar</button>La Solución Accesible: Código Recomendado
Consultar siempre la especificación ARIA. Los booleanos ARIA son estrictamente cadenas exactas: "true" o "false".
<!-- BIEN: Valores estrictamente tipados y reconocidos -->
<div class="modal" aria-hidden="true">...</div>
<button aria-expanded="true">Desplegar</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.
