1---2name: audit-page-structure3description: Audits page structure for accessibility: landmark regions, heading hierarchy, navigation patterns, skip links, and document metadata. Use ONLY when the user explicitly asks about landmarks, heading order, page outline, or navigation structure — NOT for general accessibility scans or fix workflows (use scan-accessibility for those).4license: MIT5---67# Page Structure Audit89## What This Checks10111. **Landmark regions** — header, nav, main, footer, aside (correct nesting and labeling)122. **Heading hierarchy** — single h1, no skipped levels, meaningful text133. **Navigation patterns** — skip links, consistent navigation, labeled nav regions144. **Document metadata** — lang attribute, title element, viewport meta1516## Procedure1718### With Browser (URL provided)19201. Call `run_accessibility_scan` with the URL. For an audit (one-shot, high-confidence review),21 prefer dual-engine: `run_accessibility_scan({ url, engines: ["axe", "htmlcs"] })`. The extra22 ~2–4 s is acceptable for audits and surfaces structural issues axe alone can miss23 (e.g. deprecated `align` attributes, missing iframe titles).242. Filter results for structural rules:25 - `region`, `landmark-one-main`, `landmark-no-duplicate-main`, `landmark-banner-is-top-level`,26 `landmark-contentinfo-is-top-level`, `landmark-main-is-top-level`, `landmark-unique`27 - `heading-order`, `page-has-heading-one`, `empty-heading`, `p-as-heading`28 - `document-title`, `html-has-lang`, `html-lang-valid`29 - `bypass`303. Present findings grouped by category (landmarks, headings, navigation, metadata)3132### Without Browser (source files provided)33341. Identify the layout/page component files (layout.tsx, App.vue, index.html, etc.)352. Check for landmark elements per `navable://docs/semantic-html` reference:36 - Is there a `<header>` / `<footer>` / `<main>` / `<nav>`?37 - Are there multiple `<nav>` elements? Each needs a unique `aria-label`.383. Trace heading hierarchy across components:39 - Is there exactly one `<h1>`?40 - Are levels sequential (h1 → h2 → h3, no skips)?414. Check the `<html>` tag for `lang` attribute425. Check `<head>` for `<title>` element436. Check for skip link as first focusable element4445## Expected Page Structure4647```48<html lang="de"> ← Document language49<head>50 <title>Page Title — Site Name</title> ← Document title51 <meta name="viewport" content="width=device-width, initial-scale=1">52</head>53<body>54 <a href="#main" class="skip-link"> ← Skip navigation55 Skip to content56 </a>57 <header> ← banner landmark58 <nav aria-label="Main"> ← navigation landmark (labeled)59 ...60 </nav>61 </header>62 <main id="main"> ← main landmark (skip link target)63 <h1>Page Title</h1> ← Single h164 <section aria-label="..."> ← region landmark (labeled)65 <h2>Section Title</h2> ← Sequential heading66 <h3>Subsection</h3> ← No skipped levels67 </section>68 </main>69 <footer> ← contentinfo landmark70 <nav aria-label="Footer"> ← labeled to distinguish from main nav71 ...72 </nav>73 </footer>74</body>75</html>76```7778## Common Issues7980| Issue | Rule | Fix |81| -------------------------- | -------------------- | ------------------------------------------------------------------------------------ |82| No `<main>` landmark | landmark-one-main | Wrap primary content in `<main>` |83| Content outside landmarks | region | Ensure all content is inside `<header>`, `<main>`, `<nav>`, `<footer>`, or `<aside>` |84| Multiple unlabeled `<nav>` | landmark-unique | Add `aria-label` to each `<nav>` |85| No skip link | bypass | Add skip link as first focusable element |86| Missing `<h1>` | page-has-heading-one | Add one `<h1>` per page |87| Skipped heading levels | heading-order | Use sequential levels (h1 → h2 → h3) |88| Missing `lang` attribute | html-has-lang | Add `lang` to `<html>` element |89| No `<title>` | document-title | Add `<title>` to `<head>` |9091## Fix Guides9293- Landmarks: see `scan-accessibility/references/fix-guide-landmarks.md`94- Headings: see `scan-accessibility/references/fix-guide-headings.md`95- Navigation: see `scan-accessibility/references/fix-guide-navigation.md`96- Language: see `scan-accessibility/references/fix-guide-language.md`9798## MCP Resources99100- `navable://docs/semantic-html` — HTML elements → implicit ARIA roles101- `navable://docs/wcag-mapping` — WCAG 2.1 AA criteria for structural elements102103## Gotchas104105- **`<header>` and `<footer>` only map to banner/contentinfo landmarks when they are direct children106 of `<body>`.** Nested inside `<article>` or `<section>`, they have no implicit landmark role.107- **SPA frameworks** may render heading hierarchy across multiple components. Trace the full108 component tree to audit heading levels.109- **Multiple `<main>` elements** are allowed if only one is visible (others have `hidden`110 attribute). But only one should be visible at a time.
web-DnA