Skip to content

A11Y Cheat Sheet

Powered byA11y University

Structure & headings

A Sidebar Landmark Sits Inside Another Landmark

When a sidebar (`aside`) is placed inside the main content or another region, screen reader users get a muddled map of the page and may skip it.

landmark-complementary-is-top-levelBest practiceBest practice — not a WCAG requirement, but it helps people all the same.

Status
MinorMinor — Cosmetic, or best practice.Retiredaxe-core no longer runs this rule. Its card says why, and what still applies.
Owner
DesignDevTest
Audit
AutomatedA scanner finds it, and a clean scan means it's fixed.

Retired rule. Retired in axe-core: scanners no longer run this check. Keep complementary content easy to find, though an <aside> inside another landmark isn't a WCAG failure in itself.

Why it matters

Landmarks are named areas of a page, like header, main content, sidebar and footer. Screen reader users jump between them to find their way. A sidebar, or "complementary" landmark, holds content that supports the page but stands on its own.

If the sidebar is tucked inside the main area, the page map gets nested and unclear. People may think it is part of the main content, or miss it. This is a best practice, not a WCAG requirement, and axe has now retired the rule. It is still worth a quick check.

Who it affects

Who it affects, and how much
WhoWhat they experienceImpact
Screen reader usersIn the landmarks list they find the sidebar buried inside "main", so the page structure is harder to follow.Partial impact
Low-vision users (magnification)Affected only if they also use a screen reader; the screen looks the same.Partial impact
Cognitive and neurodivergent usersAffected only if they use a screen reader or landmark tool, where the muddled order can confuse.Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
AreaWhyImpact
LegalThis is a best practice, not a WCAG 2.2 failure, so it won't on its own breach the Disability Discrimination Act. Clear landmarks do support related requirements.Low impact
ConversionA sidebar with offers or related products is easier to find when it is a clear, separate area.Low impact
SEOSearch engines don't reward landmark placement — don't sell it as a search win.Low impact
Brand trustA tidy page map shows care to screen reader users.Low impact
Cost to fixUsually a small template change. Fix it once in the page layout.Moderate impact

Fixing it in code

Move the sidebar out of the main area

Don't

<main>
  <h1>Recipes</h1>
  <aside aria-label="Popular recipes">…</aside>
</main>

A screen reader says: “Main landmark … Popular recipes, complementary landmark (listed inside main)”

Do

<main>
  <h1>Recipes</h1>
</main>
<aside aria-label="Popular recipes">…</aside>

A screen reader says: “Popular recipes, complementary landmark (listed beside main)”

The sidebar now stands on its own in the page map.

A box that belongs inside the content

Don't

<main>
  <div role="complementary">Tip: soak the beans overnight.</div>
</main>

A screen reader says: “Complementary landmark, Tip: soak the beans overnight.”

Do

<main>
  <p class="tip">Tip: soak the beans overnight.</p>
</main>

A screen reader says: “Tip: soak the beans overnight.”

A small note within the content doesn't need to be a landmark.

Designer's handoff note

In your page layout, mark the sidebar as its own area, next to the main content, not inside it.

Keep small call-out boxes inside the content as plain content, not as sidebars.

Quick test

Tool

NVDA (opens in a new tab) (free, on Windows)

Duration

1 min

Checklist

Pass
The complementary landmark sits at the top level, beside main.
Fail
The complementary landmark is listed inside main or another landmark.

Check these at the same time

What a green scan still misses

A scanner can find a nested sidebar. It can't judge whether the content truly is sidebar material, or whether its label makes sense.

Reference

Status
RetiredRetired in axe-core: scanners no longer run this check. Keep complementary content easy to find, though an <aside> inside another landmark isn't a WCAG failure in itself.
Rule ID
landmark-complementary-is-top-level
Raised by
  • axe-core: “Aside should not be contained in another landmark”
WCAG
Best practice — not a WCAG requirement
Last reviewed
16 October 2026