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

Sobre este problema HTML

O atributo role expõe o propósito de um elemento às tecnologias assistivas. ARIA define um conjunto fixo de valores de role; sidebar não está entre eles, por isso os validadores reportam um valor inválido. Sidebars tipicamente contêm conteúdo relacionado ou auxiliar, que corresponde ao role de landmark complementary. Em HTML, o elemento <aside> já representa este conceito e mapeia implicitamente para o role complementary.

Deixar um role inválido prejudica a acessibilidade porque leitores de ecrã podem ignorar o landmark ou reportá-lo incorretamente, e ferramentas automatizadas não conseguem criar um mapa fiável de landmarks. A conformidade com normas também importa para comportamento consistente entre navegadores e tecnologias assistivas.

Para corrigir:

Substitua role="sidebar" por role="complementary" num contentor genérico; adicione um nome acessível com aria-labelledby ou aria-label quando existirem múltiplas regiões complementary.
Prefira <aside> para HTML semântico. Tem implicitamente o role complementary; adicione um rótulo quando houver mais de um <aside>.
Não adicione role="complementary" ao <aside> a menos que precise sobrepor algo; roles duplicados são desnecessários.
Se a área for navegação do site, use <nav> ou role="navigation" em vez disso; escolha o role que melhor corresponde à intenção.

Exemplos

Inválido: role ARIA inexistente

<div role="sidebar">
<!-- Related links and promos -->

</div>

Corrigido: usar o role complementary num contentor genérico

<div role="complementary" aria-labelledby="sidebar-title">
  <h2 id="sidebar-title">Related</h2>
  <ul>
    <li><a href="/guide-a">Guide A</a></li>
    <li><a href="/guide-b">Guide B</a></li>
  </ul>
</div>

Corrigido: usar HTML semântico com aside (complementary implícito)

<aside aria-labelledby="sidebar-title">
  <h2 id="sidebar-title">Related</h2>
  <ul>
    <li><a href="/guide-a">Guide A</a></li>
    <li><a href="/guide-b">Guide B</a></li>
  </ul>
</aside>

Múltiplas sidebars: garantir rótulos únicos e descritivos

<aside aria-labelledby="filters-title">
  <h2 id="filters-title">Filter results</h2>
<!-- filter controls -->

</aside>

<aside aria-labelledby="related-title">
  <h2 id="related-title">Related articles</h2>
<!-- related links -->

</aside>

Quando é realmente navegação: usar o landmark navigation

<nav aria-label="Section navigation">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#examples">Examples</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Dicas:

Use <aside> para conteúdo tangencial; é a abordagem mais simples e baseada em normas.
Forneça um nome acessível quando houver mais de uma região complementary presente.
Evite inventar roles ARIA; mantenha-se nos valores definidos como banner, main, navigation, complementary, contentinfo, e outros.