Skip to content

Home / Guides / Accessible design

Accessible design

Make motion optional without losing the message

Design a complete calm version of animated work so people can keep the information, controls and sense of progress without unnecessary movement.

By Shane Rounce · 2 min read

I enjoy using motion, but I want the quieter version of a design to feel complete too. Switching off an effect should leave a usable composition with the same important information and actions.

In my Ace Media experiments, calm presentation work included keeping captions and highlights while reducing the surrounding effects. That is the principle I carry into other projects: decide what the visitor needs to understand, then make sure that meaning survives when decorative movement is absent.

Separate the message from the movement

I list what each animation communicates. It might indicate selection, introduce a new section or simply create atmosphere. If an effect is decorative, the underlying content should work without it. If it carries information, I need an alternative way to show that information.

A tour, for example, can identify its current subject through a clear heading and highlight. It does not have to move the viewpoint dramatically for the visitor to understand what is being discussed. Thinking about the calm version early can improve the main version as well.

Design the still state deliberately

I choose where elements should sit when they are not animating. I check the spacing, visibility and reading order in that state. Stopping an animation at an arbitrary point can leave text overlapping or an important item outside the useful area.

I also check entrance effects. Content that normally slides into view should remain available when the effect is disabled or fails. The visitor came for the information; the reveal is a presentation choice around it.

Respect preferences and offer clear controls

The W3C explanation of animation from interactions describes supporting motion preferences and allowing non-essential interaction-triggered movement to be disabled. It also distinguishes this from automatically starting animation, which has separate pause, stop or hide considerations.

I use that distinction when reviewing a design. A calm control should have an understandable label and should affect the relevant motion consistently. It should not remove one background effect while leaving another large movement running elsewhere on the page.

Keep feedback visible

A quieter interface still needs to respond. I retain clear selected states, useful status text and an obvious indication when an action has completed. Removing movement is not a reason to remove confirmation.

For a fictional interactive exhibition, I might replace a sweeping transition with an immediate view change and a persistent title. The visitor still knows which section they are in and can move between sections. The content and control remain; the extra motion becomes optional.

Review both experiences

I walk through the main journey in the animated and calm presentations. I check the same tasks in both: finding information, understanding the current state and using the controls. I also check the first visit, because preferences should matter before a visitor has endured a sequence they did not choose.

This is a design review, not a claim that one preference setting establishes complete accessibility. Motion is one part of the experience. Treating its alternative as a first-class composition gives people more control and usually exposes which parts of the design were carrying the real meaning all along.

Need a hand with your next project?

I help with web design, with practical advice and hands-on work. Tell me what you are trying to improve.

Email Shane