# 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

```text
{
  "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

```bash
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

```bash
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

```bash
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

```bash
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

```bash
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/pst_1uFyZM9X6GzSw_t2J7AiIw