O atributo “aria-label” não deve ser especificado em qualquer elemento “div” a menos que o elemento tenha um valor de “role” diferente de “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, ou “superscript”.

Um elemento div sem um role explícito resolve para o role generic, que não suporta nomenclatura — por isso adicionar aria-label a um div simples é inválido.

O atributo aria-label fornece um nome acessível para um elemento, mas nem todos os elementos podem ter um. A especificação ARIA define certos roles como “nomenclatura proibida”, significando que as tecnologias assistivas ignorarão qualquer nome acessível aplicado a eles. O role generic é um destes, e como um div sem um atributo role explícito assume por defeito generic, o aria-label é efetivamente sem significado.

Para corrigir isto, você tem duas opções principais: atribuir um role ARIA apropriado ao div para que se torne um landmark ou widget nomeável, ou mudar para um elemento HTML semântico que já carregue um role válido. Roles comuns que suportam nomenclatura incluem region, group, navigation, alert, e muitos outros.

Se o div é realmente apenas um wrapper genérico sem significado semântico, considere se o aria-label é mesmo necessário. Talvez a etiqueta pertença a um elemento filho em vez disso, ou o conteúdo já seja auto-descritivo.

Exemplos HTML

❌ Inválido: aria-label num div simples

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

✅ Correção: Adicione um role apropriado

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

✅ Correção: Use um elemento semântico em vez disso

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

Saiba mais:

MDN Reference

ARIA: generic role - Accessibility | MDN

→

MDN Reference

HTML Element: div - HTML | MDN

→

MDN Reference

Using the aria-label attribute - Accessibility | MDN

→