Posted on by Patrick H. Lauke in Design and development
Tags: Foundations, WCAG
Animation and movement can add to the visual appeal of content, but poorly designed animations can cause problems for many people unless they are implemented correctly.
The types of issues animations and flashing content can cause are:
The first thing to consider is whether you need to use animation or flashing content. Only include them if they enhance the user experience without causing undue distraction. Make sure that animations and flashing are only used as additional “eye-candy”, and give people control over the animations and movement. For example movement can be removed or suppressed without affecting the meaning of the content and without loss of important information.
Avoid using animated content that starts automatically — for example on page load, or animation triggered by any event outside of direct user interaction such as a timer or external event — and lasts for longer than five seconds.
If the use of animated content is unavoidable, add a mechanism for people to pause/hide the animation. Generally, the mechanism can be a control/button on the page itself, or an option in a site-wide user account profile or set of preferences. This is particularly important for large “hero” type animated panels, or panels that use auto playing video.
In the case of more minor animations, for example animated effects on controls, designed to catch people’s attention, where it wouldn’t be possible to add separate play/pause controls, consider stopping the animation effect after five seconds.
Consider keeping the animation effect very subtle for animations that happen due to user interaction — such as parallax scrolling effects or animations that start once a control has been triggered. Avoid excessively fast and big movements that last for more than a few seconds.
Another suggestion is to take advantage of the prefers-reduced-motion media query. CSS-based animations can be set to only play if a person has not enabled the relevant reduced motion setting in their browser/operating system. See for instance Defensive prefers-reduced-motion use - no motion first design).
/* non animated styles */
@media (prefers-reduced-motion: no-preference) {
/* specific animation styles, only shown if the browser
supports the media query and an explicit preference
for reduced motion has not been set*/
}You can also provide explicit fallback/alternative styles that come into effect if a person did enable the setting for reduced motion:
@media (prefers-reduced-motion: reduce) {
/* alternative styles when a preference for
reduced motion has been set*/
}This media query feature can also be queried from JavaScript, and can be used to inform the default state of any custom play/pause buttons that are added to animations.
const mqList = window.matchMedia('(prefers-reduced-motion:no-preference)');
if (mqList.matches) {
/* the browser supports the media query, and no preference
for reduced motion has been set.
consider it safe to start playing animations by default */
} else {
/* the browser either doesn’t support the media query, or an
explicit preference for reduced motion has been set.
start off with animations paused */
}Even if you provide explicit play/pause controls for animations, or take advantage of the prefers-reduced-motion media query, there are additional requirements if your animations include flashing content. People may be severely affected by flashing content even before they get a chance to pause/stop an animation or explicitly set a preference in their browser. In extreme cases, a severe seizure can put someone in hospital, so there are critical rules to follow when using content that flashes:
The safest option is usually to avoid flashing altogether. If it’s absolutely necessary to flash content, make sure the flashing frequency is very low.
When designing animations and movement consider it's goal:
For flashing content:
Read more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。