Navigation Motion Accessibility Checklist

Context

Navigation motion looks great when it helps the user understand where they went. It stops helping when it becomes hard to follow, uncomfortable, or impossible to reduce. This checklist keeps the transition readable for everyone.

The snippet

@Environment(\.accessibilityReduceMotion) private var reduceMotion

var transition: AnyTransition {
    reduceMotion ? .opacity : .scale.combined(with: .opacity)
}

Why this works

The screen checks the user’s motion preference instead of guessing. That means the app can keep continuity for most users while choosing a calmer fallback for people who need it. The same idea applies to navigation transitions, card zooms, and banner animations.

Use this checklist:

verify the motion still makes sense without movement
keep a visible source and destination relationship
fall back to opacity or small scale changes when needed
test the screen with Reduce Motion enabled
check that text remains legible during the transition

If the effect only works because it is flashy, it is probably doing too much.

Use it when…

a transition changes screens or major layouts
a card-to-detail flow depends on motion to feel connected
accessibility testing reveals that motion is the thing making the screen hard to parse

Avoid it when…

the motion is decorative and not part of the user’s understanding
a simpler transition would communicate the change just as well
the screen already feels calm without extra animation

Takeaway: Accessibility checks should shape motion, not cancel good design.