A developer discovered that a logo carousel appeared broken when the OS-level 'Reduce Motion' setting was enabled, causing logos to stack vertically instead of scrolling horizontally. This revealed that carousels are not inherently accessible: when reduced motion is active, the layout and meaning of the content can break entirely. The fix involves using the CSS `@media (prefers-reduced-motion: reduce)` query to provide a stable, non-animated fallback layout that preserves the visual structure and communicates the same information to all users.

2m read timeFrom thoughtbot.com
Post cover image

Sort: