Are Auto-Play Sliders ADA Compliant?
By Andrew Delossantos on January 3, 2024 in ADA and Bar Rule Compliance Development Web Design Tips and Tools
In today’s day and age, visuals play a pivotal role in engaging and captivating users. One visual element that often finds its place on websites is the auto-play slider. These sliders, though visually engaging, can pose significant accessibility issues. Here’s how the Web Content Accessibility Guidelines (WCAG) criteria 2.2.2 addresses this and what it means for website developers and designers.
Understanding WCAG 2.2.2
WCAG 2.2.2 “Pause, Stop, Hide,” is designed to ensure that users, especially those with disabilities, aren’t overwhelmed or distracted by content that moves, blinks, scrolls, or auto-updates on a website. The guideline essentially mandates:
For moving, blinking, scrolling content: If such content starts automatically, lasts more than five seconds, and exists alongside other content, there must be a way for users to pause, stop, or hide it.
For auto-updating content: If the content starts automatically and appears alongside other content, users should have the means to either pause, stop, hide it, or control the frequency of the updates.
However, there are exceptions. If the movement or auto-updating is an essential part of a website’s activity, these controls might not be necessary. For instance, a live auction site might have auto-updating bid amounts which are crucial for the functionality of the site.
The Issue with Auto-Play Sliders
When it comes to auto-play sliders, several concerns arise:
Distraction: Continuous movement can be distracting for many users, making it difficult for them to focus on other content.
Inaccessibility: Users with certain disabilities, like ADHD or certain visual impairments, might find it challenging to process rapidly changing content.
Loss of control: Without controls to pause or stop the movement, users might feel a lack of control over the browsing experience.
Achieving Compliance
To make auto-play sliders compliant with WCAG 2.2.2:
Integrate Controls: Add clearly labeled play/pause buttons to the sliders. This way, users can decide if they want to view the moving content or pause it to absorb the information at their own pace.
Limit Auto-Play Duration: If you must have auto-play, limit its duration to less than five seconds or ensure there’s an easily accessible mechanism to pause or stop it.
Provide Alternatives: Offer alternative ways to access the information presented in the slider. This could be in the form of static content below the slider or a list of headlines that users can click on to read more.
Reconsider Necessity: Evaluate whether the auto-play feature is genuinely essential. In many cases, a static visual or a manually controlled slider can convey the same information without causing accessibility issues.
As a side note, if using an icon button (pictured above) when integrating pause/play functionality to auto-play sliders, ensure that the buttons are labeled appropriately. If using the Accessible Slick library for the slider, pause/play buttons with appropriate labeling will already be integrated.
For developers, labeling can be achieved through the “aria-label” attribute on the button element. This label will be visually hidden, but will still be visible to screen readers. Be sure to use Javascript to update the label on click from “Pause” to “Play” and vice versa.
While auto-play sliders can add a dynamic touch to websites, it’s crucial to prioritize user experience and accessibility. By understanding and adhering to guidelines like WCAG 2.2.2, developers and designers can create inclusive web experiences that cater to all users, regardless of their abilities.
