WAI-ARIA: Role=Complementary
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
Description
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
There are various types of content that would appropriately have this role. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable from the main content, it may be appropriate to use a more general role.
User agents SHOULD treat elements with the role of complementary as navigational landmarks.
Role=Complementary Example
One Complementary Landmark on Page
When only one complementary landmark exists on a page, a label is optional.
<div role=”complementary”>
<h2>Title for complementary area<h2>
…. complementary content area ….
</div>Multiple Complementary Landmarks
When there is more than one complementary landmark on a page, each should have a unique label.
<div role="complementary" aria-labelledby="comp2">
<h2 id="comp2">Title for complementary area 2</h2>
... complementary content area 2 ...
</div>HTML5 Example
<main>
<article role="article">...</article>
<aside role="complementary">...</aside>
</main>Characteristics
Superclass Role
- landmark
Required Attributes
- none
Optional Attributes
- aria-labelledby
- aria-label
Requires Scripting
- No
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML5 <aside> tag.
<article>
<p>
The Disney movie <cite>The Little Mermaid</cite> was
first released to theatres in 1989.
</p>
<aside>
<p>
The movie earned $87 million during its initial release.
</p>
</aside>
<p>
More info about the movie…
</p>
</article>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=complementary.
