Honor accessibility settings
Swap motion for fades, blur for solid fills, faint edges for borders.
From apple-design, §14 Reduced motion & accessibility.
Three settings, one component
Flip each setting, then press New in both windows.
Ignores the settingsBad
New playlist
Pick songs to add.
.sheet { transition: transform 300ms }Honors the settingsGood
New playlist
Pick songs to add.
no query matchesReduced motion isn't no motion
Toggle both sheets, then drag the fade to 0 ms.
Transitions killedBad
* { transition: none !important; }Cross-fadeGood
transition: opacity 200ms easeBig surfaces fade in flight
Move the panel, interrupt it, then try reduced motion.
Opaque slab travelsBad
opacity: 1Fades in flightGood
opacity 1 → 0.35 → 1Why it matters, pros and cons
Why it matters
Big slides read as self-motion. Blur behind text hurts low vision.
Pros
- Three media-query overrides, no second design.
- A cross-fade keeps the cue of change.
- Solid, bordered surfaces help everyone in sunlight.
Cons
- Three flags make eight states to test.
prefers-reduced-transparencysupport is still uneven.- Solid surfaces lose depth; add a border instead.