# The “complementary” role is unnecessary for element “aside”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-complementary-role-is-unnecessary-for-element-aside
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Many HTML5 semantic elements come with built-in (implicit) ARIA roles defined in the [WAI-ARIA specification](https://www.w3.org/TR/html-aria/). The `<aside>` element is one of these — it natively maps to the `complementary` role, which tells assistive technologies that the content is related to the main content but can stand on its own. When you explicitly add `role="complementary"` to an `<aside>`, you're stating something the browser already knows, which triggers this W3C validator warning.

While this redundancy won't break anything for end users, it creates unnecessary noise in your code and can signal a misunderstanding of how semantic HTML works. Keeping markup free of redundant ARIA attributes follows the first rule of ARIA use: **"If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."** Clean, semantic HTML is easier to maintain and less prone to errors if ARIA roles are accidentally changed or conflict with the native semantics in the future.

This same principle applies to several other HTML elements, such as `<nav>` (implicit role `navigation`), `<main>` (implicit role `main`), `<header>` (implicit role `banner` when not nested), and `<footer>` (implicit role `contentinfo` when not nested).

## Examples

### ❌ Redundant role on `<aside>`

The `role="complementary"` attribute is unnecessary because `<aside>` already implies it:

```html
<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>
```

### ✅ Using `<aside>` without the redundant role

Simply remove the `role` attribute:

```html
<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>
```

### ✅ When an explicit role *is* appropriate

If you need to give the `<aside>` element a *different* role than its default, an explicit role attribute is valid and useful. For example, you might use `<aside>` for structural reasons but assign it a different ARIA role:

```html
<aside role="note">
  <p>This feature is only available in version 3.0 and later.</p>
</aside>
```

### ✅ Labeling multiple `<aside>` elements

If your page has multiple `<aside>` elements, you don't need to add `role="complementary"` to distinguish them. Instead, use `aria-label` or `aria-labelledby` to give each a unique accessible name:

```html
<aside aria-label="Related articles">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
  </ul>
</aside>

<aside aria-labelledby="ad-heading">
  <h2 id="ad-heading">Sponsored Content</h2>
  <p>Check out our latest product.</p>
</aside>
```