SkipLink + LiveRegion
AtomSkipLink is visually hidden until focused, enabling keyboard users to bypass navigation. LiveRegion announces dynamic content to screen readers.
Tab into the area below to reveal the skip link:
Skip to main content
Main content area
// Place at top of layout:
<SkipLink href="#main-content" />
// Linked target:
<main id="main-content">...</main>function Demo() {
const [msg, setMsg] = useState('');
return (
<>
<button onClick={() => setMsg('Action completed')}>Act</button>
<LiveRegion message={msg} />
</>
);
}