AccessLint Rule: Aside (complementary) landmark should be top-level or directly inside main.

About this AccessLint rule

The complementary landmark, defined by the <aside> element or role="complementary", is expected to be either a top-level landmark in the page structure or a direct child of the <main> landmark. When an <aside> is nested deep inside other landmarks like <nav>, <section>, or <footer>, screen reader users may not be able to find it when navigating by landmarks.

Screen readers provide a way to list and jump between landmarks on a page. This landmark navigation gives users a quick mental map of the page's structure. If a complementary landmark is buried several levels deep inside other landmarks, it may not appear where users expect it in that list, or it may be difficult to reach. Users who rely on landmark navigation to move through content efficiently are directly affected by this issue.

This rule relates to WCAG Success Criterion 1.3.1: Info and Relationships (Level A), which requires that the structure and relationships conveyed visually are also available programmatically. Landmark hierarchy is part of that programmatic structure. When an <aside> is placed in an unexpected position in the landmark tree, the intended relationship between the complementary content and the rest of the page becomes unclear.

How to fix it

Move the <aside> element so that it is either:

A direct child of <body> (making it a top-level landmark), or
A direct child of <main>.

If the <aside> content is genuinely related to a specific section of the page, placing it as a direct child of <main> is appropriate. If it contains content that applies to the page as a whole (such as a blogroll, related links, or advertising), placing it at the top level alongside other landmarks like <header>, <main>, and <footer> is the better choice.

Do not nest <aside> inside <nav>, <section>, <header>, <footer>, or another <aside>.

Examples

Incorrect: aside nested inside a nav landmark

<body>
  <header>
    <nav aria-label="Main">
      <aside aria-label="Related links">
        <ul>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/resources">Resources</a></li>
        </ul>
      </aside>
    </nav>
  </header>
  <main>
    <h1>Welcome</h1>
  </main>
</body>

The <aside> is nested inside <nav>, which is inside <header>. Screen reader users navigating by landmarks are unlikely to discover it in this position.

Incorrect: aside nested inside a section within main

<body>
  <main>
    <h1>Article title</h1>
    <section aria-label="Article body">
      <p>Article content goes here.</p>
      <aside aria-label="Author bio">
        <p>About the author...</p>
      </aside>
    </section>
  </main>
</body>

The <aside> is a child of <section>, not a direct child of <main>. It needs to be moved up one level.

Correct: aside as a direct child of main

<body>
  <main>
    <h1>Article title</h1>
    <section aria-label="Article body">
      <p>Article content goes here.</p>
    </section>
    <aside aria-label="Author bio">
      <p>About the author...</p>
    </aside>
  </main>
</body>

The <aside> is now a direct child of <main>, making it easy to discover through landmark navigation.

Correct: aside as a top-level landmark

<body>
  <header>
    <nav aria-label="Main">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
  <aside aria-label="Related links">
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/resources">Resources</a></li>
    </ul>
  </aside>
  <footer>
    <p>Footer content</p>
  </footer>
</body>

The <aside> sits at the top level of the document, alongside <header>, <main>, and <footer>. Screen reader users will find it immediately when listing landmarks.