# ARIA: complementary role

The `complementary` [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles#3._landmark_roles) is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the [HTML \<aside> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside) instead.

```html
<div role="complementary">
  <h2>Our partners</h2>
  <!-- complementary section content -->
</div>
```

This is a sidebar containing links to project sponsors.

## Description

The `complementary` role is [a landmark](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Techniques#landmark_roles) role. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. Content listed within a container with the `complementary` landmark role should make sense if separated from the main content of the document.

> **NOTE:**
> The [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) element has an implicit role of `complementary`, unless it has no [accessible name](https://developer.mozilla.org/en-US/docs/Glossary/accessible%20name) and is nested in [sectioning content](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#sectioning_content). Developers should always prefer using the correct semantic HTML element over using ARIA.

## Examples

```html
<div role="complementary">
  <h2>Trending articles</h2>
  <ul>
    <li><a href="#">18 tweets that will make you feel all the feels</a></li>
    <li>
      <a href="#">Stop searching! I've found the perfect lunch containers.</a>
    </li>
    <li>
      <a href="#">The time has come to decide how to call these foods</a>
    </li>
    <li><a href="#">17 really good posts we saw on Tumblr this week</a></li>
    <li><a href="#">10 parent hacks we know work because we tried them</a></li>
  </ul>
</div>
```

## Accessibility concerns

[Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Techniques#landmark_roles) are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

## Best practices

### Prefer HTML

The [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) element has an implicit role of `complementary`, unless it has no [accessible name](https://developer.mozilla.org/en-US/docs/Glossary/accessible%20name) and is nested in [sectioning content](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#sectioning_content). If possible, prefer using the semantic `<aside>` element instead of the `complementary` role.

### Labeling landmarks

#### Multiple landmarks

If there is more than one `complementary` landmark role or [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) element in a document, provide a label for each landmark using the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute, or, if the aside has an appropriately descriptive title, point to it with the [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) attribute. This label will allow an assistive technology user to be able to quickly understand the purpose of each landmark.

```html
<aside aria-label="Note about usage">
  <!-- content -->
</aside>

…

<aside id="sidebar" aria-label="Sponsors">
  <!-- content -->
</aside>
```

#### Redundant descriptions

Screen readers will announce the type of role the landmark is. Because of this, you do not need to describe what the landmark is in its label. For example, a declaration of `role="complementary"` with an `aria-label="Sidebar"` may be announced redundantly as, "complementary sidebar".

### Added benefits

Certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.

- [Landmarks browser extension](https://matatk.agrip.org.uk/landmarks/)

## Specifications

## See also

- [\<aside>: The Aside element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside)
- [Using HTML sections and outlines](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements)
- [Landmark roles: Using ARIA: Roles, States, and Properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Techniques#landmark_roles)
- [Accessible Landmarks | scottohara.me](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
- [Aside Revisited | HTML5 Doctor](https://html5doctor.com/aside-revisited/)