Acerca de este problema HTML
Un elemento div sin un role explícito (o con role="generic") no puede tener el atributo aria-labelledby porque los contenedores genéricos no tienen significado semántico que se beneficie de una etiqueta.
El elemento div se mapea al rol ARIA generic por defecto. Los elementos genéricos son puramente estructurales — no representan nada significativo para las tecnologías asistivas. Etiquetar algo que no tiene propósito semántico crea una experiencia confusa para los usuarios de lectores de pantalla, ya que la etiqueta apunta a un elemento que no transmite un rol claro.
El atributo aria-labelledby está diseñado para elementos interactivos o de referencia — cosas como dialog, region, navigation, form o group — donde una etiqueta ayuda a los usuarios a entender el propósito de esa sección.
Para solucionar esto, tienes dos opciones: asignar un rol ARIA significativo al div, o usar un elemento HTML más semántico que soporte naturalmente el etiquetado.
Ejemplos HTML
❌ Inválido: aria-labelledby en un div simple
<h2 id="section-title">User Settings</h2>
<div aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</div>
✅ Corregido: Agregar un role significativo al div
<h2 id="section-title">User Settings</h2>
<div role="region" aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</div>✅ Corregido: Usar un elemento semántico en su lugar
<h2 id="section-title">User Settings</h2>
<section aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</section>
Usar un elemento section o agregar role="region" le dice a las tecnologías asistivas que esta es un área distinta y significativa de la página — haciendo que la etiqueta sea útil y el marcado válido.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.