# Bad value “complimentary” for attribute “role” on element “aside”.

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

The WAI-ARIA specification defines a strict set of valid role values, and `"complimentary"` is not among them. This is a straightforward typo — `"complimentary"` (meaning "expressing praise or given free of charge") versus `"complementary"` (meaning "serving to complete or enhance something"). When a browser or assistive technology encounters an unrecognized role value, it ignores it. This means screen reader users lose the semantic meaning that the `<aside>` element would normally convey, making it harder for them to understand the page structure and navigate effectively.

The `<aside>` element already carries an implicit ARIA role of `complementary` as defined by the HTML specification. This means assistive technologies automatically treat `<aside>` as complementary content without any explicit `role` attribute. Adding `role="complementary"` to an `<aside>` is redundant. The simplest and best fix is to remove the misspelled `role` attribute and let the element's native semantics do the work.

If you have a specific reason to explicitly set the role — for example, when overriding it with a different valid role — make sure the value is spelled correctly and is an appropriate role for the element.

## Examples

### ❌ Incorrect: misspelled role value

```html
<aside role="complimentary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>
```

The value `"complimentary"` is not a valid ARIA role. Assistive technologies will ignore it, and the element loses its semantic meaning.

### ✅ Correct: remove the redundant role

```html
<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>
```

The `<aside>` element already implies `role="complementary"`, so no explicit role is needed. This is the recommended approach.

### ✅ Correct: explicitly set the properly spelled role

```html
<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>
```

This is valid but redundant. It may be appropriate in rare cases where you want to be explicit for clarity or to work around edge cases with certain assistive technologies.

### Quick reference for similar typos

| Incorrect (typo) | Correct | Implicit on element |
|---|---|---|
| `complimentary` | `complementary` | `<aside>` |
| `navagation` | `navigation` | `<nav>` |
| `presentaion` | `presentation` | (none) |

Always double-check role values against the [WAI-ARIA role definitions](https://www.w3.org/TR/wai-aria/#role_definitions) to ensure they are valid. When an HTML element already provides the semantics you need, prefer using the element without an explicit `role` — this follows the first rule of ARIA: "If you can use a native HTML element with the semantics and behavior you require, do so."