Sobre este problema HTML
Um elemento div sem um role explícito (ou com role="generic") não pode ter o atributo aria-labelledby porque contentores genéricos não têm significado semântico que beneficie de um rótulo.
O elemento div mapeia para o role ARIA generic por padrão. Elementos genéricos são puramente estruturais — não representam nada significativo para tecnologias de apoio. Rotular algo que não tem um propósito semântico cria uma experiência confusa para utilizadores de leitores de ecrã, uma vez que o rótulo aponta para um elemento que não transmite um role claro.
O atributo aria-labelledby é desenhado para elementos interativos ou marcos — coisas como dialog, region, navigation, form, ou group — onde um rótulo ajuda os utilizadores a compreender o propósito dessa secção.
Para corrigir isto, você tem duas opções: atribuir um role ARIA significativo ao div, ou usar um elemento HTML mais semântico que naturalmente suporte rotulagem.
Exemplos HTML
❌ Inválido: aria-labelledby num div simples
<h2 id="section-title">User Settings</h2>
<div aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</div>
✅ Corrigido: Adicionar um role significativo ao div
<h2 id="section-title">User Settings</h2>
<div role="region" aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</div>✅ Corrigido: Usar um elemento semântico em vez disso
<h2 id="section-title">User Settings</h2>
<section aria-labelledby="section-title">
<p>Manage your account preferences here.</p>
</section>
Usar um elemento section ou adicionar role="region" informa as tecnologias de apoio que esta é uma área distinta e significativa da página — tornando o rótulo útil e a marcação válida.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.