Audio
Auto-play
Never auto-play audio.
Pause, stop or hide button
All audio should have an accessible pause, stop or hide button so that users can turn the audio off as needed.
Transcripts
Video (including gifs and animations)
Avoid flashing content
Content that flashes can trigger seizures or other adverse effects for some users.
Nothing should flash on the screen more than 3 times within a single second. In general, flashing content should be avoided entirely.
Avoid auto-play
Auto-playing video content in any situation is strongly discouraged.
Pause, stop or hide button
All videos, gifs or animations should have an accessible pause, stop or hide button.
Captions
Any time a video includes audio, there should also be captions provided. These should include words spoken AND any other meaningful sounds from the audio (such as a sigh or laugh in conversation, or the chopping of a knife in cooking) as well.
Closed captions are preferable so that users can turn them on or off per their preferences.
Ensure captions have appropriate color contrast with the video (rendering captions as white text on a dark gray background is common), and keep the captions in sentence case. Avoid kinetic captions, which are captions with "fun" effects like changing text size and location, which make them harder to read and thus less accessible.
Below is an example of how captions should look on a video.
Transcripts
Video descriptions
Don't rely on video alone to convey important information. Video descriptions should be provided in text so that blind and low-vision users understand what the video shows.
Transcripts guidance
Anytime there is audio or a video including audio, there should also be a transcript provided. These should include words spoken AND any other meaningful sounds from the audio (such as a sigh or laugh in conversation, or the chopping of a knife in cooking) as well.
Transcripts should be prominently placed near the audio or video they transcribe. Don't hide transcripts behind other menus.
Below is a good example of prominent transcript placement.
Timestamps are usually not necessary and can make transcripts unnecessarily cluttered.
Speaker names should be provided whenever there is more than one speaker in a video or audio. See the example below.
Always confirm transcript accuracy manually when using automated transcribers.
Animations and reduced motion
Some users, including those with vestibular motion disorders, may have system settings to reduce motion in the web content.
For instance, on a Mac, there is a "Reduce motion" toggle in the System Settings under Accessibility/Display:
We have to write code that recognizes these system settings in order to adjust motion accordingly.
To do this, we use the prefers-reduced-motion CSS media feature, as documented by MDN.
Our Tooltip component uses prefers-reduced-motion to decide whether to include an animation when tooltip content is opened. If the user does not have reduced motion settings turned on, then the animation is used.
We built a shortcut media query "@reducedMotion" for use in our WPDS components. It does the same thing as @media (prefers-reduced-motion).
Below is an example of how this looks in practice. The code is from our Carousel component. Note the animation is eliminated when the user prefers reduced motion:
const Slider = styled("div", {
display: "flex",
transition: `transform 0.5s ${theme.transitions.inOut}`,
"@reducedMotion": {
transition: "none", // animation eliminated when user prefers reduced motion
},
});