{"id":296,"date":"2022-08-24T12:00:29","date_gmt":"2022-08-24T09:00:29","guid":{"rendered":"https:\/\/www.accessi.org\/blog\/?p=296"},"modified":"2022-12-28T13:16:28","modified_gmt":"2022-12-28T11:16:28","slug":"5-things-to-consider-to-make-your-web-animations-accessible","status":"publish","type":"post","link":"https:\/\/www.accessi.org\/blog\/5-things-to-consider-to-make-your-web-animations-accessible\/","title":{"rendered":"5 Things To Consider To Make Your Web Animations Accessible"},"content":{"rendered":"

Remember spinning around as a child and instantly feeling dizzy when you stop? Or the belly-dropping sensation you probably get when you look down from a high building?\u00a0<\/span><\/p>\n

Apparently, certain content on your website can make people feel that way too. If you haven\u2019t already figured it out, I\u2019m talking about animations – moving content.\u00a0<\/span><\/p>\n

While animations may be great for engagement, they can cause more harm than good for certain groups of users if not used with great care.\u00a0<\/span><\/p>\n

These include people with hearing-related problems, photosensitivity, or attention deficit disorder (ADD). Besides, just about anyone can get headaches from long exposure to flashing and moving content.\u00a0<\/span><\/p>\n

So, how do you make animated content safe to watch? I\u2019ll share a few tips. They are all based on WCAG recommendations, so you can be sure they\u2019ll make your content accessible:\u00a0<\/span><\/p>\n

1. Allow users to pause, stop, or hide moving content<\/span><\/h2>\n

WCAG Success criterion 2.2.2 (Pause, Stop Hide)<\/span><\/a> expressly pertains to animation. Its title gives you a fair idea of what it entails. It says:\u00a0<\/span><\/p>\n

\u2018For any moving, blinking, or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.\u2019<\/b><\/p><\/blockquote>\n

While most web animation durations fall well below the five-second limit, some last longer than five seconds. These include slideshows, auto-advancing carousels, and animated illustrations and backgrounds.\u00a0<\/span><\/p>\n

In such cases, provide stop-and-play controls that let users manage the motion and any auto-playing pattern. Doing so helps users with vision-related disabilities, attention-related disorders, and certain neurocognitive conditions.\u00a0<\/span><\/p>\n

2. Avoid flashing content<\/span><\/h2>\n

Users with photosensitivity may experience seizures when flashing content appears frequently. That is why the <\/span>WCAG 2.3.1 (Three Flashes or Below Threshold)<\/span><\/a> success criterion mandates that:\u00a0<\/span><\/p>\n

‘Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.’<\/b><\/p><\/blockquote>\n

The guideline also gives information on the size, ratio, and viewing angle thresholds that help to determine if flashing the screen is safe. However, it’s probably the best practice to totally avoid all flashing content.\u00a0<\/span><\/p>\n

Still, if you must use flashing animations in your content, give users advance notice about it. Also, provide an alternative version of the content without the flashing effect.<\/span><\/p>\n

One more thing, WCAG 2.3.1 is a Level A requirement. That means your website is not reasonably accessible if it fails to meet this success criterion.\u00a0<\/span><\/p>\n

3. Avoid unnecessary animations<\/span>\u00a0<\/span><\/h2>\n

Motion-based animations are two-edged – they could improve engagement, but some users may find them distracting. The best practice here is to avoid them or provide an animation-free alternative.\u00a0<\/span><\/p>\n

Here, it is essential to take context and expectations into serious consideration. For instance, you\u2019d expect to see more motion animation on an educational or video game website than on a government or health website.\u00a0<\/span><\/p>\n

4. Provide options for users to turn off motion animation\u00a0<\/span><\/h2>\n

The <\/span>WCAG 2.3.3 success criterion<\/span><\/a> expressly states that:\u00a0<\/span><\/p>\n

‘Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.’<\/b><\/p><\/blockquote>\n

Essentially, if your website contains content that could disturb motion-sensitive users, provide options to turn it off. Alternatively, you could offer a scaled-down version of the animation.<\/span><\/p>\n

Such options could be a toggle or preference-setting that, when engaged, allows users to indicate their choice for reduced motion.\u00a0<\/span><\/p>\n

5. Provide reduced-motion feature<\/span><\/h2>\n

Sometimes, a custom toggle may not be the best approach for websites or mobile applications that don’t rely much on rapid movement. Instead, they can use the prefers-reduced-motion media query on its own.<\/span><\/p>\n

The feature allows them to offer a condensed version of heavily animated content when the user’s operating system makes that preference available globally.<\/span><\/p>\n

Additionally, users can configure it in one location to affect several contents they come across. That makes it a great tool to effectively recognize and respond to a user’s desire for reduced motion.<\/span><\/p>\n

Putting it all together<\/span><\/h2>\n

Web animations are great for user engagement, but this must not override the need to make them accessible. I\u2019ve provided some tips to get you started, but it does not end with accessible animations.\u00a0<\/span><\/p>\n

Explore other articles on this blog for great resources that provide a more holistic view of web accessibility and recommendations to make your website compliant.\u00a0<\/span><\/p>\n

Psst\u2026 Take advantage of this free <\/span>ADA compliance testing tool<\/span><\/a>. Did I mention it\u2019s free and you could download a PDF report too?\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

While animations may be great for engagement, they can cause more harm than good for certain groups of users. So, how do you make animated content safe to watch? I\u2019ve shared a few tips in this article.<\/p>\n","protected":false},"author":1,"featured_media":299,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/posts\/296"}],"collection":[{"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/comments?post=296"}],"version-history":[{"count":2,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/posts\/296\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/posts\/296\/revisions\/303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/media\/299"}],"wp:attachment":[{"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/media?parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/categories?post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessi.org\/blog\/wp-json\/wp\/v2\/tags?post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}