Accessible website motion starts with a simple agreement: people should be able to understand the page and complete their task without depending on decorative movement. Keep animation that explains a useful change, offer a calmer presentation when someone requests reduced motion, and give people control over ongoing movement where needed.
For a business commissioning a website, the practical question is what to put in the brief and how to review the delivery. This guide provides a motion inventory, a decision table and an acceptance checklist. You can use them with a new design or an existing site, without having to decide every implementation detail yourself.
1. Give every moving element a purpose
Start by listing what moves during one ordinary customer journey. Open the homepage, read a service, expand a question and reach the enquiry form. Include the opening animation, scrolling effects, automatic slides, background video, menu transitions, loading indicators and success messages. Look beyond the most visible hero section: small effects can accumulate across a page.
For each item, describe what a visitor learns from the movement. A panel opening can show where extra information belongs. A progress indicator can explain that a request is still being processed. A rotating decorative object may support the visual identity, but it should not be the only way to discover the service or find the next button.
Write the intended result before discussing duration or style. “The customer can see which question is open” gives a designer room to choose a clear solution. “Every section must fly in” commits the project to an effect before anyone has checked whether it helps. Ask the team to show a still version alongside the animated concept.
Use a short motion inventory
A useful inventory records the page, element, trigger, purpose, whether it repeats, the proposed reduced-motion behavior and the person reviewing it. Add a column for evidence: a preview address, recording or test note. This becomes a small acceptance document that you can revisit when a new campaign introduces another carousel or video.
2. Agree what the calmer version should do
MDN documents prefers-reduced-motion as a way for a website to detect a preference for reducing non-essential motion. It is a signal that the implementation needs to respond to. Turning on the device setting does not automatically redesign every animation on a website.
Ask for a behavior decision for each effect. A large zoom might become an immediate state change; a decorative moving background might become a still image. An expanding answer can appear without travelling across the screen. Avoid accepting “we slow everything down” as the complete plan: a slower large movement can still be an unnecessary part of the experience.
| Element and purpose | Calmer presentation to discuss | Acceptance question |
|---|---|---|
| Decorative hero movement establishes the visual style | Use a deliberate still composition | Can the visitor immediately read the offer and use the main link? |
| Sections enter as the visitor scrolls | Show content without large travel or waiting | Is every section available during fast scrolling and keyboard navigation? |
| A menu reveals navigation choices | Open and close in place with a clear state | Can the visitor reach the links and return to the trigger? |
| A carousel presents several offers | Provide explicit controls and an agreed static or paused state | Can all offers be reached without racing automatic changes? |
| A form indicates processing and completion | Keep understandable status text and a stable confirmation | Does the visitor know whether to wait, retry or continue? |
This table is a planning example, not evidence that a particular site passes an accessibility standard. Replace its rows with the actual components in your project. Record what happens on first load and what should happen if the preference changes while the page is open. Ask the developer to identify any third-party component whose behavior needs separate checking.
3. Separate preferences, controls and accessibility criteria
Reduced-motion support and a pause button solve related but different problems. A preference can select a calmer experience from the start. A visible control can let someone stop ongoing movement while they read. The brief should explain both where they are relevant, rather than treating either one as a universal substitute.
WCAG 2.2 criterion 2.3.3, Animation from Interactions, is Level AAA. It addresses disabling motion animation triggered by interaction unless that animation is essential to the functionality or information. Do not present this particular criterion as a Level AA requirement.
Criterion 2.2.2, Pause, Stop, Hide, is Level A. Its moving-content provision applies when movement starts automatically, lasts more than five seconds and appears alongside other content, with an essential-activity exception. It also has a separate provision for automatically updating information, without that five-second exception. These distinctions matter when reviewing a carousel, ticker or animated background.
Ask the supplier which criteria and conformance level the project will be assessed against, who performs that assessment and what evidence will be delivered. Passing a reduced-motion checklist does not establish full WCAG conformance. A review of motion is one part of a broader review that also considers structure, input methods, contrast, alternatives and other requirements.
Check whether controls actually give control
A pause control should be findable, understandable and usable with the agreed input methods. Check what happens after moving focus elsewhere or opening another component. A carousel that resumes immediately when the visitor leaves its pause button does not provide a useful reading pause. Agree whether a preference or pause choice persists across navigation, then test the agreed behavior.
4. Preserve the task when movement changes
The quieter version must still work as a complete page. Removing an animation should not leave text transparent, navigation outside the viewport or a button waiting for an animation to finish. Ask the developer to demonstrate that content reaches its usable final state even when the decorative sequence does not run.
Follow keyboard focus through menus, dialogs and expanding sections. Can you see where you are? Does opening a component place you in a sensible context, and does closing it return you to the expected place? Avoid a design where the visual movement is the only clue that something changed. Clear labels, selected states and stable layout should carry the meaning too.
Pay particular attention to forms. A spinning shape alone does not explain whether a request is processing, has failed or has succeeded. Ask for clear status wording and appropriate communication of important updates to assistive technologies. If the team removes the spinner in the calmer version, the underlying status and next action must remain available.
For content that moves with scrolling, compare slow scrolling, fast scrolling and navigation by keyboard. Check whether headings, prices or controls disappear before they can be read. Essential information should not require a precisely timed gesture. If a visual story needs a sequence, agree an accessible way to reach the same information without performing that sequence.
A hypothetical service page review
Imagine a consultancy with a decorative hero animation and an enquiry form. In its calmer version, the hero becomes a still image, service details appear immediately and the form retains its processing message and confirmation. The reviewer checks the same enquiry journey in both versions. This illustrates an acceptance method; it is not a reported client result or a promise of higher conversions.
5. Review the finished pages in both modes
Request the exact preview version intended for release. Review it with the ordinary motion setting, then with the device or browser's reduced-motion preference enabled. A design file can communicate intent, but it cannot prove how the built page responds. Record the browser, device, setting and page address alongside each observation.
Use a small, repeatable set of tasks: read the offer, open navigation, expand supporting details and reach the enquiry form. On a test environment, include the agreed form success and error states. Do not send real customer enquiries just to test animation. The project team should provide a safe way to inspect these states without triggering operational messages.
Check on a phone and a desktop, and use a keyboard as well as touch or a pointer where applicable. Increase text size to inspect whether moving overlays obscure content. If an effect depends on hover, ask how the same information is available on touch. Include embedded booking tools, videos and other external components that are part of the customer journey.
Write defects as observable examples. “With reduced motion enabled, opening the mobile menu leaves the contact link invisible” is actionable. “The animation feels wrong” needs further explanation. Include the steps, expected behavior and a short recording when movement is the issue. After a correction, repeat the affected task on the corrected preview.
6. Ask for evidence that matches the claim
Keep the motion inventory beside the results. Each row should say what was tested, what passed, what remains unresolved and who owns the next action. Ask for the actual pages and states covered, rather than a badge that says “accessible”. An automated report can help identify some problems, while manual task review reveals behavior that needs direct observation.
Chrome's Lighthouse documentation explains that manual accessibility checks do not contribute to its accessibility score. A score of 100 therefore does not establish that every accessibility requirement has been assessed. Ask to see the manual findings as well as the automated report, particularly for motion controls and the complete enquiry journey.
Review performance separately. Ask which version, device profile and conditions produced a lab result, and whether important interactions were checked after the initial load. A decorative effect that looks smooth on the designer's computer still needs evaluation on the agreed target devices. A reduced-motion preference is not a reliable proxy for a slower device, and the ordinary presentation also needs appropriate performance review.
Keep claims precise in the handover. “Tested these five components with reduced motion enabled in these browsers” is useful evidence. “Fully accessible because animation is disabled” is not a conclusion this checklist supports. If a broader accessibility assessment is part of the project, record its scope and outstanding issues separately.
7. Make motion part of the brief and handover
Before accepting the work, agree these decisions in writing. They make a visual preference reviewable and help future editors avoid reintroducing an unresolved problem.
- Purpose: every moving component has a stated role and a content owner.
- Alternative: reduced-motion behavior is defined, implemented and checked on the actual pages.
- Control: ongoing movement and automatic updates have the agreed controls and behavior.
- Continuity: content, keyboard focus, status messages and the main customer task remain usable.
- Evidence: review notes identify the version, environments, results and unresolved issues.
- Maintenance: someone knows how to review new videos, embeds and campaign components after launch.
Send your inventory, reference pages and priority customer journey with the project enquiry. Our website project brief guide helps organise the wider scope, and the website redesign checklist helps decide what to retain and retest on an existing site.
Digital Studio's current website package starts at EUR 2,190 for up to five responsive pages, SEO foundations, a lead form and launch on your domain. Review the current services and scope and describe your motion and accessibility requirements in the website brief. Agree any specialist assessment and additional work explicitly; do not assume a package price promises a particular accessibility certification.
