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

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:

<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:

<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:

<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:

<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>

Learn more:

MDN Reference

HTML aside element

→

MDN Reference

ARIA: complementary role

→

WHATWG Spec

WHATWG HTML Sections

→