Skip to content
Back to all notes
Interface Design5 min read

Devesh JoshiCo-founder, product

Nine years building AI platforms serving 12,000+ engineers. LLM platforms, agentic systems (MCP), and multi-model safety evaluation.

Accessible web motion: Keyboard focus, screen readers, and reduced motion

Designing high-end interactive websites that look cinematic without breaking WCAG AAA keyboard navigation or causing scroll-jacking disorientation.

Balancing visual impact with inclusive accessibility

Creating award-winning visual web experiences should never come at the expense of accessibility for screen readers or keyboard users. Accessible engineering enhances usability for every site visitor.

Respecting `prefers-reduced-motion`

Listen to system motion preferences via CSS media queries `@media (prefers-reduced-motion: reduce)`. Automatically disable continuous 3D canvas orbits, parallax background shifts, and aggressive scroll triggers for users with vestibular sensitivities.

Preserving DOM order during complex visual layouts

When using absolute positioning or CSS flex reordering for visual layouts, ensure the underlying HTML DOM structure matches logical keyboard tab order (`Tab` / `Shift+Tab`). Never rely on arbitrary `tabindex` values greater than 0.

Topic Focus & Target Concepts

accessible web motionWCAG keyboard navigationprefers-reduced-motion CSSaccessible webgl interactioninclusive UI design

This is the work behind our design practice — UX, design systems, and motion built into the engagement from day one rather than bolted on after the architecture is set.

Product and interface design

Running into this in your own stack? Twenty minutes, no deck.

Book the call