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

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

ARIA defines a closed set of role tokens. Browsers and assistive technologies rely on this fixed list to determine how an element should be announced and how it fits into the page's landmark structure. When a role value falls outside that list, the attribute is effectively ignored. A screen reader encountering `role="sidebar"` will not recognize the element as a landmark, so users who navigate by landmarks will skip right past it. Automated accessibility testing tools will also flag it as an error, and the validator will reject it outright.

The concept most people mean when they write `role="sidebar"` is ancillary or tangential content related to the main content of the page. ARIA calls this the `complementary` role. In semantic HTML, the `<aside>` element maps to `complementary` without any explicit `role` attribute. Using `<aside>` is the simplest fix and keeps the markup clean.

A few things to keep in mind when choosing the replacement:

- If the sidebar contains related content, promotional links, or supplementary information, `complementary` (via `<aside>` or `role="complementary"`) is correct.
- If the sidebar is actually a set of navigation links, use `<nav>` or `role="navigation"` instead. Pick the role that matches the content's purpose, not its visual position.
- When a page has more than one `complementary` region, each one needs a distinct accessible name so screen reader users can tell them apart. Use `aria-labelledby` pointing to a visible heading, or `aria-label` if no heading is present.
- Do not add `role="complementary"` to an `<aside>` element. The implicit mapping already handles it, and the redundant attribute adds noise without benefit.

## Examples

### Invalid: non-existent ARIA role

This triggers the validator error because `sidebar` is not a defined ARIA role.

```html
<div role="sidebar">
  <h2>Related links</h2>
  <ul>
    <li><a href="/guide-a">Guide A</a></li>
    <li><a href="/guide-b">Guide B</a></li>
  </ul>
</div>
```

### Fixed: use `role="complementary"` on a generic container

If you need to keep the `<div>`, assign the correct ARIA role and provide an accessible name.

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

### Fixed: use `<aside>` for semantic HTML

The `<aside>` element has an implicit `complementary` role, so no `role` attribute is needed.

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

### Multiple complementary regions with distinct labels

When a page has more than one `<aside>`, give each a unique accessible name so users can distinguish them.

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

### When the content is navigation, not complementary

A sidebar that contains section links or site links is navigation, not complementary content. Use `<nav>` instead.

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

## Valid ARIA landmark roles

For reference, these are the ARIA landmark roles that browsers and assistive technologies recognize:

- `banner` (implicit on `<header>` when not nested inside a sectioning element)
- `navigation` (implicit on `<nav>`)
- `main` (implicit on `<main>`)
- `complementary` (implicit on `<aside>`)
- `contentinfo` (implicit on `<footer>` when not nested inside a sectioning element)
- `region` (implicit on `<section>` when it has an accessible name)
- `search` (implicit on `<search>`)
- `form` (implicit on `<form>` when it has an accessible name)

Stick to these defined values. Inventing role names like `sidebar`, `content`, or `wrapper` will always produce a validation error and provide no accessibility benefit.