·4 min read
How to add an accessible skip link and ARIA-correct navigation
How to build a keyboard-friendly skip link with the visually-hidden-until-focus pattern, and mark up navigation correctly with aria-label and aria-current.
❯grep -rl "#accessibility" ./posts
#accessibility
7 posts
·5 min read
How to respect prefers-reduced-motion without breaking your layout
Animations can make some users sick. Here's how to switch them off with prefers-reduced-motion — and the keyframe trick that keeps content visible instead of stuck at width zero.
·4 min read
How to add keyboard navigation that doesn't hijack form inputs
Add arrow-key and Home/End navigation to a React slideshow, and learn the one guard that stops it from stealing keystrokes while a visitor is typing in a form.
·4 min read
How to build an accessible form with react-hook-form and Zod
Wire up react-hook-form with a Zod resolver, then make it accessible with aria-invalid, aria-describedby, and an aria-live region — plus a simple status state machine for submit feedback.
·4 min read
How to make tabbed/one-at-a-time React UI crawlable with sr-only mirrors
Tabs and carousels only render the active item, so crawlers and screen readers miss everything else. The fix: a visually-hidden sr-only block that mirrors the full dataset into the DOM.
·6 min read
How to build an image, SVG, and code lightbox with zoom and keyboard support
A small, dependency-free lightbox that opens images, diagrams, and code full-screen with zoom, drag-to-pan, and keyboard controls. Here's the real client-side logic, piece by piece.
·6 min read
How to build a code-block toolbar (copy + fullscreen) with a rehype plugin
Wrap every Shiki code block in a toolbar with a language label, a copy button, and a fullscreen button — emitted at build time by a rehype plugin so there's no layout shift and it works before JavaScript loads.