Elements chosen for meaning give accessibility for free.
The guidance#
nav for navigation, main for primary content, article for self-contained units, aside for tangents. Screen readers navigate by these landmarks — divs are invisible to them.
In markup#
<header class="border-b">…</header>
<nav aria-label="Primary">…</nav>
<main id="main">…</main>
<footer class="border-t">…</footer>Checklist#
- Tested with keyboard only
- Screen-reader spot check
- Contrast verified for new pairs
- Reduced-motion behavior confirmed
- Zoomed to 200% without loss
Related#
accessibility/index|Accessibility hub · sr-only