Animated sites are unique, but not always accessible

The hidden accessibility costs of nonstop motion

In the design world, it’s important to have a unique portfolio website. Your goal is to attract and retain your audience’s attention. Whether it be a hiring manager, client, or fellow designer, keeping your user engaged in a personal website is no easy feat.

Like many, I visit portfolios to design-winning websites to get inspiration or observe trends. With each visit, I see something new…kinetic typography, scroll effects, or 3D elements — each creating a distinct experience and keeping my eyes peeled.

But I also notice the lack of accessibility in these websites — especially when it comes to looped animations (GIFs) and autoplaying videos.

For some users, this isn’t a problem. For other users, like a person with ADHD or a person who uses a screen reader, these animations and videos can be distracting and inhibiting. There needs to be a way for users to easily stop added motion so they can use your website.

Of course, animations and videos help differentiate your website. They add visual value to keep users exploring more, but sometimes at a disruptive cost.

Luckily, there are ways to have unique and accessible websites. Let’s review a few Web Content Accessibility Guidelines (WCAG), risks of nonstop motion, and strategies to integrate accessible motion into our one-of-a-kind websites.

What WCAG criteria ties into animation?

I’m not just saying you shouldn’t use animations; there are WCAG success criteria to follow when you add any videos or animations. It’s important to understand these guidelines to make sure your website is accessible to more user groups.

Let’s look at 3 specific guidelines and which user groups they benefit. I only included guidelines for Level AA compliance, so Level AAA success criteria, like Animations from interactions (SC 2.3.3), were not reviewed.

I. Audio control (SC 1.4.2, Level A)

• Guideline: Any audio that automatically plays for more than 3 seconds must include a mechanism to pause (stop) the audio or control the audio’s volume without impacting the system’s volume.
• Example: You open a portfolio and a song starts automatically playing in the background, and you can’t figure out how to turn it off without muting your computer.
• Users who benefit: Users with assistive technology need to be able to hear their tool, like a screen reader. If audio plays, the user may not be able to hear their screen reader, so they need a way to mute the audio without also muting their screen reader.
• Best practice: Don’t autoplay audio. If the user didn’t initiate the sound, they probably don’t want to hear it.

II. Pause, stop, hide (SC 2.2.2, Level A)

• Guideline: Any content that automatically moves, blinks, or scrolls and lasts longer than 5 seconds must include a mechanism to pause (stop) it unless the content is essential to the webpage (e.g., loader animation without any other content on the page that indicates progress).
• Example: A portfolio has a looped GIF of beach waves in the homepage’s background that can’t be paused or stopped.
• Users who benefit: Though many users are distracted by content that moves or blinks, users with ADHD or dyslexia can be significantly distracted and can’t focus on any other content.
• Best practice: Challenge the necessity of any content that automatically moves or blinks on a webpage. If it’s needed, ensure the content can easily be paused or stopped by the user.

III. Three flashes or below threshold (SC 2.3.1, Level A)

• Guideline: Any webpage cannot include content that flashes more than 3 times per second. Or if a flash is included, the flash is below specified thresholds (low-contrast and doesn’t include a saturated red color).

Note: A “flash” is different from a “blink” because it’s rapid and repeated changes in brightness and/ or color. Flashing content is more intense to look at compared to blinking content.

• Example: The movie Breaking Dawn, Part II infamously caused people with photo-sensitive epilepsy to have seizures during an intense scene with flashing red, white, and black colors.
• Users who benefit: Flashing content can cause seizures in users who are photosensitive, as well as cause dizziness or nausea in users with vestibular disorders.
• Best practice: Avoid any flashing content to not heavily distract or interrupt the user’s flow. If flashing content is needed, ensure the flash’s frequency and color-intensity is low.

Risks of nonstop motion

Designing for inclusion should be reason enough, but if you claim to be an “accessible designer,” including nonstop motion on your site damages your credibility. Or let’s say a recent job you applied to requires web accessibility skills; your chances might be ruined if there are obvious WCAG failures.

But what are some other risks of including looped animation or autoplaying videos on your portfolio?

• Assistive technology barrier: As content continuously animates or changes, assistive technology like screen readers (e.g., JAWS), may be disrupted as the user tries to navigate the webpage.
• Cognitive load: Autoplaying animations or videos splits your user’s attention — making it harder to process content and overloading their senses; this is especially true for users with ADHD, dyslexia, or autism.
• Motion sensitivity: Some motion effects, like parallax scrolling and animations from interactions, cause nausea or dizziness in certain users; especially those with vestibular disorders.

https://medium.com/media/e868b9982267aae623c3194b774c0caa/href

• Usability issues: All users may find constant movement irritating while they’re reading or focusing on a specific piece of content. When animations are overused, the website’s primary message will be overshadowed and lose its effectiveness.
• Performance impact: Heavy animation usage means heavier files compared to static images. Animations need significant bandwidth to render and might cause slow page loading speeds — causing high bounce rates.

https://medium.com/media/86d2b6d937ae9c874968c9cd8fac3db3/href

Strategies for accessible motion

You might be thinking, “But I love animations, and they help my portfolio stand out!” And that’s true. Animation engages users and differentiates your website from others, which is important as you search for new jobs or clients in this oversaturated job market.

I’m definitely not against motion (and neither is WCAG), but there’s a line between accessible and inaccessible motion.

Let’s go through some ways you can include animations while maintaining accessibility in your portfolio.

• Add a pause/ stop button: For autoplaying content, like GIFs or animated SVGs, make sure there is a method for the user to easily pause the animation. One method is a visible button next to the animation for the user to activate.
• Keep animations short and smooth: Animations should be quick and non-jarring, whether they play on page-load or as feedback from an interaction. For example, a GIF shouldn’t loop continuously; it should stop after “n” cycles (within 5 seconds).

https://medium.com/media/0376176072aab60123b9c56da8b2a50f/href

• Avoid autoplay unless essential: Unless the content is critical for the webpage, like a page loader showing progress, it shouldn’t autoplay. The user should initiate the animation or video when they want to see it.
• Test animations with assistive technology: To make sure your animations don’t create obstacles for users who need specific tools, test your animations using screen readers like Voiceover (macOS) and using only your keyboard (no mouse or trackpad).
• Use animations with purpose: Animations are powerful at grabbing attention; so intentionally use them to guide the user through your website, but don’t overuse and overload them.
• Follow the user’s preferences: If the user prefers reduced or no motion, your website needs to respect the user’s OS settings. This can be done by using CSS “prefers-reduced-motion” media query, which detects the user’s motion preference.

Balance unique and accessible

Animations and videos aren’t accessibility villains. By designing with an accessibility-first mindset, you can have a dynamic and engaging portfolio website without excluding any users. Unique UX UI design isn’t only about how things visually look, it’s also about how people feel when they use it.

Memorable websites aren’t just trendy. They’re accessible.

Animated sites are unique, but not always accessible was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More