Lesson 6 of 7
Accessible page structure
Give every page a navigable map, visible focus, comfortable targets, and styles that survive user preferences.
Build a native landmark map
Use header, nav, main, aside, and footer for the regions they actually represent. Put SkipLink before repeated navigation and point it at the main landmark. Native landmarks let assistive-technology users jump between major regions without tabbing through every control.
<>
<SkipLink href="#main">Skip to main content</SkipLink>
<header>...</header>
<nav aria-label="Primary">...</nav>
<main id="main" tabIndex={-1}>
...
</main>
<footer>...</footer>
</>;Keep focused controls visible
Sticky headers, cookie banners, and docked toolbars must not completely cover the control that receives focus. Reserve scrolling space around focus destinations and test keyboard navigation at high zoom. The browser can then bring the focused element into a visible area instead of hiding it behind an overlay.
:focus-visible {
scroll-margin-block: 6rem 2rem;
}Leave room to activate controls
WCAG 2.2 requires a pointer target to contain a 24 by 24 CSS-pixel area or have enough separation from nearby targets. comp0 is headless, so your styles own this requirement. Give compact icon buttons a minimum size and avoid packing small targets directly against one another.
<Button className="min-h-6 min-w-6">...</Button>;Respect direction and display preferences
Set dir on the document or the nearest application region and let logical keyboard navigation follow it. Keep focus and state visible in forced-colors mode, and remove non-essential motion when reduced motion is requested.
@media (forced-colors: active) {
:focus-visible {
outline: 2px solid CanvasText;
}
}
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto;
}
}