Validación HTML: Valor inválido "sidebar" para el atributo "role" en el elemento "div".

Acerca de este problema HTML

El atributo role expone el propósito de un elemento a las tecnologías de asistencia. ARIA define un conjunto fijo de valores de role; sidebar no está entre ellos, por lo que los validadores reportan un valor incorrecto. Las barras laterales típicamente contienen contenido relacionado o complementario, lo cual se corresponde con el role de landmark complementary. En HTML, el elemento <aside> ya representa este concepto e implícitamente se mapea al role complementary.

Dejar un role inválido perjudica la accesibilidad porque los lectores de pantalla pueden ignorar el landmark o reportarlo incorrectamente, y las herramientas automáticas no pueden construir un mapa confiable de landmarks. El cumplimiento de estándares también importa para un comportamiento consistente entre navegadores y tecnologías de asistencia.

Para solucionarlo:

Reemplaza role="sidebar" con role="complementary" en un contenedor genérico; añade un nombre accesible con aria-labelledby o aria-label cuando existan múltiples regiones complementarias.
Prefiere <aside> para HTML semántico. Implícitamente tiene el role complementary; añade una etiqueta cuando haya más de un <aside>.
No añadas role="complementary" a <aside> a menos que necesites sobrescribir algo; los roles duplicados son innecesarios.
Si el área es navegación de todo el sitio, usa <nav> o role="navigation" en su lugar; elige el role que mejor coincida con la intención.

Ejemplos

Inválido: role ARIA inexistente

<div role="sidebar">
<!-- Enlaces relacionados y promociones -->

</div>

Corregido: usa el role complementary en un contenedor 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>

Corregido: usa HTML semántico con 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últiples barras laterales: asegura etiquetas únicas y descriptivas

<aside aria-labelledby="filters-title">
  <h2 id="filters-title">Filter results</h2>
<!-- controles de filtro -->

</aside>

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

</aside>

Cuando realmente es navegación: usa el landmark de navegación

<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>

Consejos:

Usa <aside> para contenido tangencial; es el enfoque más simple y basado en estándares.
Proporciona un nombre accesible cuando haya más de una región complementaria presente.
Evita inventar roles ARIA; adhiérete a valores definidos como banner, main, navigation, complementary, contentinfo, y otros.