Welcome
If you’re feeling lost or are new to web accessibility, the following articles will help contextualize the content within this article:
Keeping in mind that our Web Accessibility training series articles are written with a website content creator in mind, the content in this article may not be directly applicable to that role. However, it has been included so you can make informed accessibility choices when building web pages that contain multimedia and audio/video elements. We have only included the criterion and success techniques for situations which are relevant.
Who do these guidelines help?
- Users using screen readers who need to hear the software’s speech output rather than automatically playing audio.
- Users who are photosensitive and prone to seizures.
- Users with low literacy, reading or intellectual abilities, or attention deficit disorders.
- Users who are deaf or hard of hearing.
Audio and Video Controls
- Principle 1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- Criterion 1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
While this criterion speaks to audio control specifically, it applies to both audio and video elements.
Audio and Video Elements
Any media elements (audio or video) on a web page that plays automatically which is longer 3 seconds with an audio track must be muted by default or controls must be available to allow users to pause or stop it.
Audio-only elements
Any audio on a web page that plays automatically which is long than 3 seconds must have controls available to pause or stop it or an audio volume control (that functions separately from the regular computer volume) must be available.
No Seizure Triggers
- Principle 2. Operable: User interface components and navigation must be operable.
- Guideline 2.3 Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions.
- Criterion 2.3.1 Three Flashes or Below Threshold: Web pages must 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, or the area that is flashing is less than 25% of 10 degrees of visual field.
The easiest way to meet this criterion is to not include anything (multimedia, animations, videos) that flashes more than 3 times in a one second period.
Controls for Moving and Blinking Content
- Principle 2. Operable: User interface components and navigation must be operable.
- Guideline 2.2 Enough Time: Provide users enough time to read and use content.
- Criterion 2.2.2 Pause Stop, Hide: Controls must be available for the user to pause, stop, or hide moving and blinking content which is longer than 5 seconds. The most common types of content covered by this criterion would be media carousels/slideshows, or interactive presentations which are set to automatically advance.
Pausing
A valid mechanism for pausing would be a pause button. An animation that stops only when the user has focus on it (ex. when a mouse is hovered over it) would not meet this success criterion.
Time Limits
- Principle 2. Operable: User interface components and navigation must be operable.
- Guideline 2.2 Enough Time: Provide users enough time to read and use content.
- Criterion 2.2.1 Timing Adjustable:The criterion is outlined below.
As this criterion would only have very specific impacts for website content editors, it has only been explained in brief. Please be sure to read the criterion in full for detailed information about how to achieve it in situations other than carousels/slideshows, which are outlined under A Note on Carousels below.
This criterion states that for content that has a time limit which is less than 20 hours or is not part of a real-time event, one of the following must be true:
- The user can turn off or adjust the time limit before they encounter it.
- The user is warned before time expires and is given enough time to extend the time limit.
A time limit in this case might be the number of seconds it takes before a carousel automatically advances to the next slide.
Transcripts for Audio-Only and Video-Only Content
- Principle 1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Guideline 1.2 Time-Based Media: Provide alternatives for time-based media.
- Criterion 1.2.1 Audio-only and Video-only (Prerecorded): Audio recordings should have transcripts available. Videos with no sound should provide a text description of the action in the video.
Video Captions
- Principle 1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Guideline 1.2 Time-based Media: Provide alternatives for time-based media.
- Criterion 1.2.2 Captions (Prerecorded): Captions should be provided for pre-recorded video where audio is present. Captions can be open (always visible) or closed (can be toggled on). Captions should include all dialogue and important sound effects.
Automatic Captioning
Some video services have an auto-captioning feature which attaches captions to your video which have been written by software. While captions of this type have come a long way, they are often confusing or incorrect. We strongly suggest that automatic captions are manually reviewed for errors.
Keep in mind when automatic captioning is used, key information about your video may be missed by a user who is deaf or hard of hearing, including notes about the music and sound effects used in the video.
Manual Captioning
The most common caption file is a .vtt file (Web Video Text Tracks), and they be easily created on your own computer. Visit 3PlayMedia for instructions on how to create your own .vtt file.
Professional Captioning
There are numerous captioning services available online that produce high quality captions that meet accessibility criteria. There may be a cost associated with professional captioning.
Captioning Resources
- YouTube – Add subtitles and captions
- Rev.com Open and Closed Captioning
- Captions and Subtitles – Do You Know the Difference?
- The Ultimate Guide to Caption and Description Formats for Popular Video Players
Note: Resources are for information purposes only, no endorsement implied.
A Note on Carousels
Carousels, also known as slideshows or sliders, rotate through content. They are often animated, and can include images, text, and even videos. Carousels are impacted by multiple accessibility criteria including the Timing Adjustable criterion, which ties in closely with the Pause, Stop, Hide criterion. They are also impacted by criteria which cover keyboard accessibility and colour contrast.
Please be aware of these requirements when selecting media players and carousels for your web site.
In order to accessible, carousels must have the following features:
- Play and Pause Buttons: Adding a play button and a pause button for carousel set to autoplay allows the user to pause the content, and then play the content at the point that it was paused, allowing them enough time to read or review the content.
- Stop Button: Including a stop button allows the user to turn off the time limit of a carousel set to autoplay, and manually move through slides at their own pace.
All buttons associated with media players, carousels and sliders must also meet the below requirements:
- Be keyboard accessible (learn more: 2.1.1 Keyboard Criterion).
- Meet colour contrast requirements. Learn more about Colour and Contrast.
Examples of buttons/interactive elements include linked thumbnail images or icons to show the number of slides, back and forward buttons, play, pause, stop buttons, closed captioning or subtitle buttons, and volume controls.
