axe-core region error content not contained by landmarks

axe-core region error content not contained by landmarks - how to fix it

TL;DR

Move stray content inside landmarks: every meaningful block should sit in header, nav, main, footer, or a labeled section. Cookie banners, chat widgets, and skip-link targets left as bare divs are the usual strays. One line of why: landmark navigation is how screen reader users skim a page, and content outside landmarks is invisible to that skimming.

The error, verbatim

{
  "id": "region",
  "impact": "moderate",
  "help": "All page content should be contained by landmarks",
  "nodes": [
    { "target": [".chat-widget"], "failureSummary": "Fix any of the following: Some page content is not contained by landmarks" }
  ]
}

Fix it step by step

Step 1: Reproduce on one page

npx @axe-core/cli https://example.com --rules region --save axe-region.json

Expected: Violations array contains region with the stray content selectors.

Step 2: List the stray blocks

node -e "const r=require('./axe-region.json'); r.violations[0].nodes.forEach(function(n){console.log(n.target.join(' '))})"

Expected: Selectors for content outside any landmark.

Step 3: Find them in source

rg -n 'chat-widget|cookie-banner' src --glob '*.{jsx,tsx,vue,html}' | head -20

Expected: Shows the components rendering outside landmarks.

Step 4: Contain them and re-scan

npx @axe-core/cli https://example.com --rules region

Expected: Exit code 0, 0 violations. Landmark navigation now reaches every content block.

Step 5: Gate the rule in CI

npx @axe-core/cli https://example.com --exit | tail -3

Expected: Non-zero exit while any violation remains; add this command to CI so the fix never regresses.

When to use this skill

• Your axe-core report lists this exact rule id under violations
• You are clearing automated WCAG 2.1 AA failures before a release or audit
• A CI a11y gate (pa11y-ci, lighthouse CI, cypress-axe) is red because of this rule

When NOT to use this skill

• The issue only shows up in manual screen-reader testing and axe reports zero violations for the rule
• You are doing a full manual WCAG audit, this skill covers the single automated rule only
• The page is a third-party embed you cannot edit, flag it to the vendor instead

Compatibility

axe-core 4.8+ (rule region, WCAG 1.3.1). Pair with landmark-one-main, both must pass for clean landmark structure. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

some page content is not contained by landmarks

The failureSummary wording, same fix.

axe region rule chat widget

The classic stray: third-party widgets injected at body level.

axe DevTools flags the same rule

The browser extension runs the same rule engine; fix once and it clears in every runner.

Why it happens

The region rule requires all content to live inside landmark roles, but modals, chat widgets, cookie banners, and toast containers are routinely portaled to document body outside every landmark. Axe ignores content hidden from assistive tech, so the failures are always visible strays. Teams fix landmark-one-main first and are surprised region still fails, because main alone does not cover the strays. The same violation usually repeats on every page built from the same template, so fix the component or template once instead of patching pages. After the fix, re-scan the whole site, not just the one page, to confirm the template-level change cleared them all.

Edge cases

• Give the chat widget a labeled complementary landmark or an aria-label on its container instead of leaving it bare.
• Skip links are fine outside landmarks only if they are the first focusable element and properly targeted.
• Third-party scripts that inject body-level divs need a post-injection wrapper or a vendor fix.
• Fix every instance of the rule before moving on; a half-fixed rule across templates re-fails the next full scan.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst1uFyZM9X6GzSwt2J7AiIw