How to fix landmark no duplicate main on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Search your entire component and layout codebase (e.g., grep -r '<main\|role=.main' src/) for every occurrence of '<main>' elements or 'role="main"' attributes.
2. Trace which components are composed into a single page render — layout shell, header component, footer component, sidebar, main content area — and ensure only the top-level content wrapper uses '<main>' or 'role="main"'.
3. Replace all other occurrences with semantically appropriate elements: '<section>' for thematic content groupings, '<article>' for self-contained pieces, or '<div>' for purely presentational wrappers.
4. Add an automated accessibility test (e.g., jest-axe or Playwright with axe-core) to your CI pipeline that asserts landmark-no-duplicate-main passes on every page template.

What is landmark no duplicate main?

Every web page should have exactly one "main" landmark — the HTML `<main>` element (or any element with `role="main"`) — that wraps the primary content of that page. This landmark is part of the ARIA landmark system, which acts like a table of contents for assistive technology users. When a page has more than one `<main>` landmark, the structure is ambiguous and broken: screen readers, keyboard navigators, and other assistive tools cannot reliably identify where the page's core content begins and ends. The fix is to ensure only one `<main>` or `role="main"` exists in the entire rendered HTML of any given page.

Screen reader users — including blind shoppers and customers with motor disabilities — routinely press a single keystroke to jump directly to the main content area, skipping repeated navigation menus. If two `<main>` landmarks exist, assistive technology either stops at the first one (potentially landing on a header or widget instead of your products) or announces confusing duplicate regions, eroding trust and causing shoppers to abandon the page. WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and wider landmark guidance require unique landmark roles; failing this check exposes your store to accessibility-compliance risk in jurisdictions with ADA, EAA, or EN 301 549 obligations. Fixing it is typically a quick template change with zero visual impact, so the risk-to-effort ratio strongly favours acting immediately.

See the complete Landmark no duplicate main guide for every platform and the full background.