HTML Guides for complementary

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.

<divrole="sidebar">

<h2>Related links</h2>

<ul>

<li><ahref="/guide-a">Guide A</a></li>

<li><ahref="/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.

<divrole="complementary"aria-labelledby="sidebar-title">

<h2id="sidebar-title">Related links</h2>

<ul>

<li><ahref="/guide-a">Guide A</a></li>

<li><ahref="/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.

<asidearia-labelledby="sidebar-title">

<h2id="sidebar-title">Related links</h2>

<ul>

<li><ahref="/guide-a">Guide A</a></li>

<li><ahref="/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.

<asidearia-labelledby="filters-title">

<h2id="filters-title">Filter results</h2>

<!-- filter controls -->

</aside>

<asidearia-labelledby="related-title">

<h2id="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.

<navaria-label="Section navigation">

<ul>

<li><ahref="#intro">Intro</a></li>

<li><ahref="#examples">Examples</a></li>

<li><ahref="#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.

ARIA defines a fixed set of role values that user agents and assistive technologies understand. sidebar is not in that set, so role="sidebar" fails conformance checking and gives unreliable signals to screen readers. Using a valid role or the correct HTML element improves accessibility, ensures consistent behavior across browsers and AT, and keeps your markup standards‑compliant.

Sidebars typically contain tangential or ancillary content (e.g., related links, promos, author info). The ARIA role that matches that meaning is complementary. In HTML, the semantic element for the same concept is aside, which by default maps to the complementary landmark in accessibility APIs. Prefer native semantics first: use <aside> when possible. Only add role="complementary" when you can’t change the element type or when you need an explicit landmark for non-semantic containers.

How to fix:

• If the element is a sidebar: change <div role="sidebar"> to <aside> (preferred), or to <div role="complementary">.
• Ensure each page has at most one primary main region and that complementary regions are not essential to understanding the main content.
• Provide an accessible name for the complementary region when multiple exist, using aria-label or aria-labelledby, to help users navigate landmarks.

Examples

Triggers the validator error

<divrole="sidebar">

<!-- Sidebar content -->

</div>

Fixed: use the semantic element (preferred)

<asidearia-label="Related articles">

<!-- Sidebar content -->

</aside>

Fixed: keep the container, apply a valid role

<divrole="complementary"aria-label="Related articles">

<!-- Sidebar content -->

</div>

Full document example with two sidebars (each labeled)

<!doctype html>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>Sidebar Landmarks Example</title>

</head>

<body>

<header>

<h1>News Today</h1>

</header>

<mainid="main">

<article>

<h2>Main Story</h2>

<p>...</p>

</article>

</main>

<asidearia-label="Trending topics">

<ul>

<li>Science</li>

<li>Politics</li>

<li>Sports</li>

</ul>

</aside>

<divrole="complementary"aria-labelledby="sponsor-title">

<h2id="sponsor-title">Sponsored</h2>

<p>Ad content</p>

</div>

<footer>

<p>&copy; 2026</p>

</footer>

</body>

</html>

Notes:

• Do not invent ARIA roles (e.g., sidebar, hero, footer-nav). Use defined roles like complementary, navigation, banner, contentinfo, and main.
• Prefer native HTML elements (aside, nav, header, footer, main) over generic containers with roles.
• Label multiple complementary landmarks to make them distinguishable in screen reader landmark lists.

Many HTML5 semantic elements come with built-in (implicit) ARIA roles defined in the WAI-ARIA specification. 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:

<asiderole="complementary">

<h2>Related Articles</h2>

<ul>

<li><ahref="/article-1">Understanding ARIA roles</a></li>

<li><ahref="/article-2">Semantic HTML best practices</a></li>

</ul>

</aside>

✅ Using <aside> without the redundant role

Simply remove the role attribute:

<aside>

<h2>Related Articles</h2>

<ul>

<li><ahref="/article-1">Understanding ARIA roles</a></li>

<li><ahref="/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:

<asiderole="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:

<asidearia-label="Related articles">

<h2>Related Articles</h2>

<ul>

<li><ahref="/article-1">Understanding ARIA roles</a></li>

</ul>

</aside>

<asidearia-labelledby="ad-heading">

<h2id="ad-heading">Sponsored Content</h2>

<p>Check out our latest product.</p>

</aside>