Verificação HTML: Valor inválido "sidebar" para o atributo "role" no elemento "span".

Sobre este problema HTML

O ARIA define um conjunto fixo de valores de role que os agentes de utilizador e tecnologias assistivas compreendem. sidebar não está nesse conjunto, portanto role="sidebar" falha na verificação de conformidade e dá sinais não confiáveis aos leitores de ecrã. Usar um role válido ou o elemento HTML correto melhora a acessibilidade, garante comportamento consistente em navegadores e AT, e mantém a sua marcação em conformidade com os padrões.

As barras laterais normalmente contêm conteúdo tangencial ou auxiliar (por exemplo, ligações relacionadas, promoções, informações do autor). O role ARIA que corresponde a esse significado é complementary. Em HTML, o elemento semântico para o mesmo conceito é aside, que por defeito mapeia para o landmark complementary nas APIs de acessibilidade. Prefira primeiro a semântica nativa: use <aside> quando possível. Adicione apenas role="complementary" quando não puder alterar o tipo de elemento ou quando precisar de um landmark explícito para contentores não-semânticos.

Como corrigir:

Se o elemento é uma barra lateral: altere <div role="sidebar"> para <aside> (preferível), ou para <div role="complementary">.
Certifique-se de que cada página tem no máximo uma região main primária e que as regiões complementares não são essenciais para compreender o conteúdo principal.
Forneça um nome acessível para a região complementar quando existirem múltiplas, usando aria-label ou aria-labelledby, para ajudar os utilizadores a navegar pelos landmarks.

Exemplos

Desencadeia o erro do validador

<div role="sidebar">
<!-- Sidebar content -->

</div>

Corrigido: use o elemento semântico (preferível)

<aside aria-label="Related articles">
<!-- Sidebar content -->

</aside>

Corrigido: mantenha o contentor, aplique um role válido

<div role="complementary" aria-label="Related articles">
<!-- Sidebar content -->

</div>

Exemplo de documento completo com duas barras laterais (cada uma rotulada)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sidebar Landmarks Example</title>
  </head>
  <body>
    <header>
      <h1>News Today</h1>
    </header>

    <main id="main">
      <article>
        <h2>Main Story</h2>
        <p>...</p>
      </article>
    </main>

    <aside aria-label="Trending topics">
      <ul>
        <li>Science</li>
        <li>Politics</li>
        <li>Sports</li>
      </ul>
    </aside>

    <div role="complementary" aria-labelledby="sponsor-title">
      <h2 id="sponsor-title">Sponsored</h2>
      <p>Ad content</p>
    </div>

    <footer>
      <p>&copy; 2026</p>
    </footer>
  </body>
</html>

Notas:

Não invente roles ARIA (por exemplo, sidebar, hero, footer-nav). Use roles definidos como complementary, navigation, banner, contentinfo e main.
Prefira elementos HTML nativos (aside, nav, header, footer, main) em vez de contentores genéricos com roles.
Rotule múltiplos landmarks complementares para os tornar distinguíveis nas listas de landmarks dos leitores de ecrã.