El atributo “aria-label” no debe especificarse en ningún elemento “div” a menos que el elemento tenga un valor de “role” distinto de “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript” o “superscript”.

Un elemento div sin un role explícito se resuelve al role generic, que no admite nomenclatura — por lo que añadir aria-label a un div simple es inválido.

El atributo aria-label proporciona un nombre accesible para un elemento, pero no todos los elementos pueden tener uno. La especificación ARIA define ciertos roles como “nomenclatura prohibida”, lo que significa que las tecnologías de asistencia ignorarán cualquier nombre accesible aplicado a ellos. El role generic es uno de estos, y dado que un div sin un atributo role explícito por defecto es generic, el aria-label es efectivamente sin sentido.

Para solucionar esto, tienes dos opciones principales: asignar un role ARIA apropiado al div para que se convierta en un punto de referencia o widget con nombre, o cambiar a un elemento HTML semántico que ya tenga un role válido. Los roles comunes que admiten nomenclatura incluyen region, group, navigation, alert, y muchos otros.

Si el div es realmente solo un contenedor genérico sin significado semántico, considera si realmente se necesita aria-label. Tal vez la etiqueta pertenezca a un elemento hijo en su lugar, o el contenido ya se autodescribe.

Ejemplos HTML

❌ Inválido: aria-label en un div simple

<div aria-label="User profile section">
  <p>Welcome, Jane!</p>
</div>

✅ Solución: Añadir un role apropiado

<div role="region" aria-label="User profile section">
  <p>Welcome, Jane!</p>
</div>

✅ Solución: Usar un elemento semántico en su lugar

<section aria-label="User profile section">
  <p>Welcome, Jane!</p>
</section>

Más información:

MDN Reference

ARIA: generic role - Accessibility | MDN

→

MDN Reference

HTML Element: div - HTML | MDN

→

MDN Reference

Using the aria-label attribute - Accessibility | MDN

→