Provide users with control over animations in the carousel. Pausing animation is essential for people who find movement distracting or who need more time to read.
Add Play/Stop button
Provide a button to allow users to stop and resume animation. The example below illustrates how such a button can be marked-up. The button label and its function changes, depending on whether the animation is currently running or not.
<button> element and its attributes. Replacing the entire button would result in loss of keyboard focus.
Pause on mouse hover and keyboard focus
Pause the carousel animation when the mouse pointer is hovering over the carousel or when it receives keyboard focus. Pausing on mouse hover is useful for people who need more time to read the content and makes it easier to click links in the carousel. Keyboard users do not lose their position when the carousel is paused.
focusout events are defined in the W3C Document Object Model (DOM) Level 3 Events Specification (Working Draft) and implemented in many browsers. Firefox needs a short polyfill at the time of publication of this tutorial.
Hiding transitioning elements from assistive technologies
During transitions, the current and next items are visible. This also means that those two items are available to assistive technologies, with the current item disappearing, which can be confusing to screen reader users.
In the following example, the item that is being activated gets an
in-transition class that makes it visible. The
aria-hidden is attribute set to
true to hide the item from assistive technologies. When the transition completes, the
aria-hidden attribute is removed.
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:
Moving, blinking, scrolling: For 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; and
Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.