Verificação HTML: O role "complementary" é desnecessário para o elemento "aside".

Sobre este problema HTML

Muitos elementos semânticos HTML5 vêm com roles ARIA incorporados (implícitos) definidos na especificação WAI-ARIA. O elemento <aside> é um desses elementos — mapeia nativamente para o role complementary, que informa às tecnologias assistivas que o conteúdo está relacionado com o conteúdo principal mas pode ser independente. Quando adiciona explicitamente role="complementary" a um <aside>, está a declarar algo que o navegador já sabe, o que desencadeia este aviso do validador W3C.

Embora esta redundância não vá quebrar nada para os utilizadores finais, cria ruído desnecessário no seu código e pode sinalizar uma incompreensão de como funciona o HTML semântico. Manter a marcação livre de atributos ARIA redundantes segue a primeira regra do uso de ARIA: “Se pode usar um elemento HTML nativo ou atributo com a semântica e comportamento que precisa já incorporados, em vez de reconfigurar um elemento e adicionar um role, estado ou propriedade ARIA para o tornar acessível, então faça-o.” HTML limpo e semântico é mais fácil de manter e menos propenso a erros se os roles ARIA forem acidentalmente alterados ou entrarem em conflito com a semântica nativa no futuro.

Este mesmo princípio aplica-se a vários outros elementos HTML, como <nav> (role implícito navigation), <main> (role implícito main), <header> (role implícito banner quando não aninhado), e <footer> (role implícito contentinfo quando não aninhado).

Exemplos

❌ Role redundante no `<aside>`

O atributo role="complementary" é desnecessário porque o <aside> já o implica:

<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>

✅ Usando `<aside>` sem o role redundante

Simplesmente remova o atributo role:

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>

✅ Quando um role explícito é apropriado

Se precisar dar ao elemento <aside> um role diferente do seu padrão, um atributo role explícito é válido e útil. Por exemplo, pode usar <aside> por razões estruturais mas atribuir-lhe um role ARIA diferente:

<aside role="note">
  <p>This feature is only available in version 3.0 and later.</p>
</aside>

✅ Rotular múltiplos elementos `<aside>`

Se a sua página tem múltiplos elementos <aside>, não precisa de adicionar role="complementary" para os distinguir. Em vez disso, use aria-label ou aria-labelledby para dar a cada um um nome acessível único:

<aside aria-label="Related articles">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
  </ul>
</aside>

<aside aria-labelledby="ad-heading">
  <h2 id="ad-heading">Sponsored Content</h2>
  <p>Check out our latest product.</p>
</aside>