TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El atributo para vincular un nombre accesible es aria-labelledby (con doble L, gramática británica/W3C). Si escribes aria-labeledby (con una L, gramática americana), el atributo será descartado por el navegador, dejando a tu componente sin nombre accesible (WCAG 4.1.2).
La traición de los linters visuales
En el desarrollo web normal, inventar un atributo data-custom="algo" es legal y no rompe la interfaz. Pero WAI-ARIA es un estándar fuertemente tipado en los motores de los navegadores. Un error de teclado en un atributo como aria-required (ej: aria-reqiured) condena a la persona usuaria a no saber que el campo era obligatorio hasta que choca contra un error de validación.
El patrón erróneo: Código Accesible Deficiente
El desarrollador cree haber vinculado la etiqueta correctamente, pero el motor de accesibilidad no encuentra el atributo en su diccionario interno.
<!-- MAL: Falla ortográfica silenciosa (Falta una L) -->
<div role="dialog" aria-labeledby="titulo-modal">
<h2 id="titulo-modal">Información Importante</h2>
</div>La Solución Accesible: Código Recomendado
Memorizar la sintaxis exacta de la especificación o integrar un linter estricto (como eslint-plugin-jsx-a11y) en la cadena de compilación.
<!-- BIEN: Sintaxis exacta del estándar W3C -->
<div role="dialog" aria-labelledby="titulo-modal">
<h2 id="titulo-modal">Información Importante</h2>
</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.
