# Bad value “sidebar” for attribute “role” on element “span”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-sidebar-for-attribute-role-on-element-span
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

ARIA defines a fixed set of role values that user agents and assistive technologies understand. `sidebar` is not in that set, so `role="sidebar"` fails conformance checking and gives unreliable signals to screen readers. Using a valid role or the correct HTML element improves accessibility, ensures consistent behavior across browsers and AT, and keeps your markup standards‑compliant.

Sidebars typically contain tangential or ancillary content (e.g., related links, promos, author info). The ARIA role that matches that meaning is `complementary`. In HTML, the semantic element for the same concept is `aside`, which by default maps to the `complementary` landmark in accessibility APIs. Prefer native semantics first: use `<aside>` when possible. Only add `role="complementary"` when you can’t change the element type or when you need an explicit landmark for non-semantic containers.

How to fix:
- If the element is a sidebar: change `<div role="sidebar">` to `<aside>` (preferred), or to `<div role="complementary">`.
- Ensure each page has at most one primary `main` region and that complementary regions are not essential to understanding the main content.
- Provide an accessible name for the complementary region when multiple exist, using `aria-label` or `aria-labelledby`, to help users navigate landmarks.

## Examples

### Triggers the validator error
```html
<div role="sidebar">
  <!-- Sidebar content -->
</div>
```

### Fixed: use the semantic element (preferred)
```html
<aside aria-label="Related articles">
  <!-- Sidebar content -->
</aside>
```

### Fixed: keep the container, apply a valid role
```html
<div role="complementary" aria-label="Related articles">
  <!-- Sidebar content -->
</div>
```

### Full document example with two sidebars (each labeled)
```html
<!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>
```

Notes:
- Do not invent ARIA roles (e.g., `sidebar`, `hero`, `footer-nav`). Use defined roles like `complementary`, `navigation`, `banner`, `contentinfo`, and `main`.
- Prefer native HTML elements (`aside`, `nav`, `header`, `footer`, `main`) over generic containers with roles.
- Label multiple complementary landmarks to make them distinguishable in screen reader landmark lists.
