Validación HTML: Valor incorrecto "sidebar" para el atributo "role" en el elemento "span".

Acerca de este problema HTML

ARIA define un conjunto fijo de valores de role que los agentes de usuario y las tecnologías de asistencia entienden. sidebar no está en ese conjunto, por lo que role="sidebar" falla la comprobación de conformidad y da señales poco fiables a los lectores de pantalla. Usar un role válido o el elemento HTML correcto mejora la accesibilidad, asegura un comportamiento consistente entre navegadores y tecnologías de asistencia, y mantiene tu marcado conforme a los estándares.

Las barras laterales típicamente contienen contenido tangencial o auxiliar (p. ej., enlaces relacionados, promociones, información del autor). El role ARIA que coincide con ese significado es complementary. En HTML, el elemento semántico para el mismo concepto es aside, que por defecto se mapea al punto de referencia complementary en las APIs de accesibilidad. Prefiere la semántica nativa primero: usa <aside> cuando sea posible. Solo añade role="complementary" cuando no puedas cambiar el tipo de elemento o cuando necesites un punto de referencia explícito para contenedores no semánticos.

Cómo solucionarlo:

Si el elemento es una barra lateral: cambia <div role="sidebar"> por <aside> (preferido), o por <div role="complementary">.
Asegúrate de que cada página tenga como máximo una región main principal y que las regiones complementarias no sean esenciales para entender el contenido principal.
Proporciona un nombre accesible para la región complementaria cuando existan múltiples, usando aria-label o aria-labelledby, para ayudar a los usuarios a navegar por los puntos de referencia.

Ejemplos

Desencadena el error del validador

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

</div>

Solucionado: usa el elemento semántico (preferido)

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

</aside>

Solucionado: mantén el contenedor, aplica un role válido

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

</div>

Ejemplo de documento completo con dos barras laterales (cada una etiquetada)

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

No inventes roles ARIA (p. ej., sidebar, hero, footer-nav). Usa roles definidos como complementary, navigation, banner, contentinfo, y main.
Prefiere elementos HTML nativos (aside, nav, header, footer, main) sobre contenedores genéricos con roles.
Etiqueta múltiples puntos de referencia complementarios para hacerlos distinguibles en las listas de puntos de referencia del lector de pantalla.