Main Landmarks
Use semantic HTML5 landmarks (header, nav, main, footer) to create navigable page regions for screen reader users.
The Bad (Inaccessible)
<div id="wrapper">
<div id="top">
<div class="logo">My Site</div>
<div class="menu">
<a href="/">Home</a>
<a href="/about">About</a>
</div>
</div>
<div id="content">
<p>Welcome to our website!</p>
</div>
<div id="bottom">
<p>© 2024 My Site</p>
</div>
</div>
Accessibility-Ready Code
<body>
<header>
<a href="/" class="logo">My Site</a>
<nav aria-label="Main Navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Welcome to our website!</h1>
<p>Main content goes here.</p>
</main>
<footer>
<p>© 2024 My Site</p>
</footer>
</body>
body
header
a.logo(href="/") My Site
nav(aria-label="Main Navigation")
a(href="/") Home
a(href="/about") About
main
h1 Welcome to our website!
p Main content goes here.
footer
p © 2024 My Site
<>
<header>
<a href="/" className="logo">My Site</a>
<nav aria-label="Main Navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Welcome to our website!</h1>
<p>Main content goes here.</p>
</main>
<footer>
<p>© 2024 My Site</p>
</footer>
</>
<template>
<header>
<a href="/" class="logo">My Site</a>
<nav aria-label="Main Navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Welcome to our website!</h1>
<p>Main content goes here.</p>
</main>
<footer>
<p>© 2024 My Site</p>
</footer>
</template>
<header class="flex justify-between items-center px-6 py-4 bg-white shadow-sm">
<a href="/" class="text-xl font-bold text-slate-900">My Site</a>
<nav aria-label="Main Navigation" class="flex gap-6">
<a href="/" class="text-slate-600 hover:text-indigo-600">Home</a>
<a href="/about" class="text-slate-600 hover:text-indigo-600">About</a>
</nav>
</header>
<main class="max-w-4xl mx-auto px-6 py-12">
<h1 class="text-3xl font-bold text-slate-900 mb-4">Welcome to our website!</h1>
<p class="text-slate-600">Main content goes here.</p>
</main>
<footer class="bg-slate-100 px-6 py-8 text-center text-slate-500">
<p>© 2024 My Site</p>
</footer>
The Standard
HTML5 landmark elements (<header>, <nav>, <main>, <footer>, <aside>) create navigable regions. Screen reader users can jump directly to these sections instead of reading the entire page.
WCAG Criteria
- 1.3.1 Info and Relationships (Level A): Page structure must be programmatically determinable.
- 2.4.1 Bypass Blocks (Level A): Users must be able to skip repeated content.
- 4.1.2 Name, Role, Value (Level A): Landmark roles must be exposed to AT.
❌ The Bad (Inaccessible)
What’s Wrong?
- No Landmarks: Screen readers see one giant block of content.
- No Skip Option: Users must read through the entire header on every page.
- ID-Based Styling:
#top,#contentare for CSS—invisible to screen readers.
✅ The Good (Accessibility-Ready Code)
Why This Works
- Native Roles:
<header>= banner,<nav>= navigation,<main>= main,<footer>= contentinfo. - Jump Navigation: Screen readers can list and jump to any landmark.
- Unique
<main>: Each page should have exactly one<main>element.
Accessibility Checklist
- Use
<header>for the site banner/branding area. - Use
<nav>for navigation blocks; addaria-labelif multiple navs exist. - Use exactly one
<main>for the primary page content. - Use
<footer>for site-wide footer content. - Use
<aside>for complementary content (sidebars). - Avoid using
<div>where a landmark element would be appropriate.
📍 Perfect Implementation Reference
<header>...</header>
<nav aria-label="Main">...</nav>
<main>
<h1>Primary Heading</h1>
...
</main>
<footer>...</footer>Technical Deep Dive
The Accessibility Tree
Role: banner (header)
├── Role: navigation, Name: "Main Navigation"
Role: main
Role: contentinfo (footer)Landmark List
Screen readers provide a landmarks list (e.g., VoiceOver Rotor):
- Banner: Site header
- Navigation: Nav blocks
- Main: Primary content
- Contentinfo: Footer
Multiple Navigations
When using multiple <nav> elements, add aria-label to distinguish them:
<nav aria-label="Main Navigation">...</nav>
<nav aria-label="Footer Navigation">...</nav> 🧪
Interactive Behavioral Lab
💻
Interactive Sandbox
LIVE PREVIEW
🔬 Technical Internals
Understand how this component is processed by the browser and Assistive Technology (AT). This section bridges the gap between visual code and the hidden logic that powers accessibility.
🌲 Accessibility Tree
The data structure used by screen readers to "see" your page. It translates HTML roles and attributes into standardized objects.
⚙️ Event Logic
Expected behavioral standards for keyboard navigation and state transitions. Crucial for users who don't use a mouse.
- Focus: Highlights via
:focus-visible - Activation: Responds to
EnterandSpace - Role: Identified as
Landmark Regions
🌐 Browser & Screen Reader Compatibility
Browser
Screen Reader
Status
🍎 Safari
VoiceOver
✓ Safe
🪟 Chrome
NVDA
✓ Safe
🪟 Edge
JAWS
✓ Safe
🦊 Firefox
NVDA
✓ Safe
📱 iOS Safari
VoiceOver
✓ Safe
🤖 Chrome Android
TalkBack
✓ Safe