vibecheck0.3.0
AI readinessaeono-main-landmarkinfo

Missing <main> landmark in React

Landmarks like <main>, <nav>, and <article> tell assistive tech and content extractors where the primary content is, instead of forcing them to guess from a sea of <div>s. Screen-reader users jump straight to <main>; answer engines use it to separate content from chrome. AI scaffolds output <div>-only trees, so this signal is simply absent.

Framework fixes
GeneralReactVueSvelteVanilla JS

Symptoms

  • Screen readers offer no "skip to main content" landmark
  • The page is a tree of <div>s with no semantic regions
  • Content extractors include nav/footer boilerplate as if it were content
  • Accessibility audits flag "no main landmark"

How VibeCheck catches it

In your widget · Problems

infoaeoNo <main> landmark

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "aeo", issue: "No <main> landmark", threshold: "document.querySelector("main") returns null" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • The layout uses <div> everywhere instead of semantic elements
  • A component library wraps content without a <main> region
  • Multiple content areas but no single primary landmark

The fix for React

Render a <main> in your layout around the routed content — one per page, wrapping only the page-specific content, not the shared nav/footer.

tsx
<>
  <SiteHeader />
  <main>{children}</main>
  <SiteFooter />
</>

Steps

  1. Identify the primary content region unique to the page
  2. Wrap it in a single <main> element
  3. Use <nav>/<header>/<footer> for the surrounding chrome

See the general, framework-agnostic fix →

FAQ

Can I have more than one <main>?
Only one <main> should be visible per page. You may have multiple in the DOM if all but one are hidden, but the simplest and safest approach is exactly one visible <main> per page.
What goes inside <main> vs outside?
<main> holds the content unique to this page. The site header, primary navigation, and footer are repeated across pages, so they belong in <header>, <nav>, and <footer> outside <main>.