TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Cuando se inyecta el foco dentro de una ventana con role="dialog" o role="alertdialog", el lector de pantalla enuncia "Diálogo". Si este contenedor no está vinculado a su título visual mediante aria-labelledby, la persona usuaria se enfrentará a una pantalla emergente de origen desconocido.
La desorientación del cambio de contexto violento
Una ventana modal interrumpe drásticamente el flujo de trabajo de la persona usuaria. Visualmente, la persona usuaria ve la cabecera (ej: "Confirmar eliminación de cuenta"). Auditivamente, si el desarrollador no enlazó la cabecera al contenedor del modal, la persona usuaria solo oirá: "Diálogo. Botón Aceptar. Botón Cancelar". La falta de Nombre Accesible viola la WCAG 4.1.2 de forma grave.
El patrón erróneo: Código Accesible Deficiente
El contenedor modal carece de una descripción primaria, obligando a la persona usuaria a tabular manualmente para descubrir el título visual y entender qué está pasando.
<!-- MAL: Diálogo anónimo -->
<div role="dialog" aria-modal="true">
<h2>Confirmar eliminación de trámite</h2>
<p>¿Está seguro que desea borrar esto?</p>
<button>Eliminar</button>
</div>La Solución Accesible: Código Recomendado
Vincular programáticamente el título visible con el contenedor principal del modal. Al recibir el foco, el sistema leerá: "Confirmar eliminación de trámite, Diálogo".
<!-- BIEN: Diálogo perfectamente identificado -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Confirmar eliminación de trámite</h2>
<p>¿Está seguro que desea borrar esto?</p>
<button>Eliminar</button>
</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.
