Complementary regions must be programmatically distinct from main content

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Use `<aside>` only for supporting (secondary) content — never for the main story.

Why this matters and how to fix it

Why this matters

The complementary landmark identifies content that supports, but is not essential to, the main content. Screen reader users rely on landmark navigation to move between primary content and supporting regions. If a complementary region is nested or structured incorrectly, users cannot understand the layout or efficiently navigate the page.

How to fix this issue

Ensure that `<aside>` or elements with `role="complementary"` are used for supporting information and are not confused with primary content. If the complementary region supports the entire page, place it as a sibling to `<main>`. If it supports only part of the page (such as a sidebar inside a blog article), it may appear inside `<main>` — **but it must be clearly separate and unique**.

Automated detection · Manual review recommended

Developer guidance

Do not use `<aside>` or `role="complementary"` for main content blocks or layout wrappers. Use it strictly for tangential or secondary content (related links, promos, filters, context panels). Ensure that only one complementary region exists per logical scope and that each complementary region has a descriptive label if multiple appear on the same page.

Code examples

Incorrect Implementation

<main>
  <div role="complementary">Filters</div>
  <article>Main article content</article>
</main>
<!-- Complementary region appears before main content and is indistinguishable → Confusing landmark structure -->

Correct Implementation

<main>
  <article>Main article content</article>
  <aside role="complementary">Filters</aside>
</main>
<!-- Supporting region is visually and structurally separate → Landmarks are meaningful -->

Real-World Examples

Before

<aside role="complementary">Related Articles</aside>
<!-- No context: Screen reader hears 'complementary' with no label → unclear purpose -->

After

<aside role="complementary" aria-labelledby="related-heading">
  <h2 id="related-heading">Related Articles</h2>
  …
</aside>
<!-- Screen reader: 'Related Articles, complementary region' → clear meaning -->

CSS Example (Guidance)

/* Use CSS, not structural nesting, to position complementary content visually */
.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

Manual testing

  1. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Confirm that only 0–2 complementary regions exist per page, and each is separate from the main landmark.
  3. 3. Turn on a screen reader:
  4. • NVDA: Press D to move between landmarks
  5. • VoiceOver: VO + U → Landmarks
  6. 4. Navigate through landmarks.
  7. • Expected: Complementary region is announced clearly (e.g., 'Related articles, complementary region').
  8. • Failure: Complementary region is mixed into main content or indistinguishable.
  9. 5. If multiple complementary regions exist, verify each has a unique accessible label (`aria-labelledby`).
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance