This page is in progress -
Why This is Important
Having the ability to turn off moving content allows people to remove distractions. This is accessible to people with attention disorders, anxiety, Autism, and others who experience sensory overload.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
While moving content and animation might feel like a minor distraction to some, it could be a significant barrier to people with attention disorders or visual sensitivities. This includes automatically playing animation (e.g. carousel) and animation triggered by interaction (e.g. parallax scrolling).
This references WCAG criteria 2.2.2 Pause, Stop, Hide (Level A) and 2.3.3 Animation from Interactions (Level AAA).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
How to Implement This
The most effective way to ensure the accessibility of animation is to avoid having too much moving content on the page. Moving content includes:
- Animated content (e.g. moving pictures and gifs)
- Carousel (which is a slideshow of moving images)
- Automatically playing videos (e.g. ads)
- Scroll animation (e.g. parallax scrolling, content appearing and disappearing on scroll)
- Automatically updating content (e.g. changing stock numbers)
If moving content is critical to the feeling of your brand or the functionality of your website/app, you can use other techniques to ensure they are accessible. 2 main ways you can do that is to add a pause/close button and use a manual update.
Add a Pause or Close Button
A pause button allows people to pause and play the animation, giving them more control of how they experience the content. This is helpful because people can pause animations they find distracting or pause a slideshow so that they can take more time to read something.
Here are some carousel components with pause/play capabilities:
A close button is great for removing animated ads. Currently, animated ads are becoming much more common. Without a close button, they can be intrusive and annoying. The existence of a close button might depend on the ad creation service, which only sometimes allow close buttons and even then sometimes just on their pro paid version.
Manual Update
If there’s a significant amount of content that’s constantly changing, such as stock numbers, analytics views, and public transit times, it’s better to give people the ability to update the content themselves using a button or manual refresh.
This isn’t necessarily applicable if the main content itself relies on animation, such as a timer countdown. If you were to pause the timer, that would change the functionality itself.
How to Test This
- Interact with the website/app by scrolling, moving keyboard focus, hovering over things, and simply waiting a few minutes
- Make note of any animation or moving content that occurs
- If there is animation or moving content, try to find a way to stop or pause it
Credits
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.