Practical Accessibility: Making Prerecorded Video-Only Media Accessible, by Online ADA.
This training video addresses video-only media content and is a companion piece to our previous training video that discussed audio-only media content. Using video-only content can have accessibility problems that are quite similar to the problems associated with audio-only content. What those problems are depends on your purpose for using the video and how you deploy it.
When determining accessibility needs related to video, the first task is to identify your purpose for using video. Having a clear sense of that purpose will help you decide what accessibility supports you need to ensure that the video content and the content around it are accessible to the widest range of users.
Decorative video is video that is used to create a particular mood or look, but not to communicate any specific information. This includes videos such as action clips, moving abstract shapes, and animated panoramic images. With decorative video, it’s important to remember that not all users will have the same response to the video. Some may enjoy it, but others may find that it creates visual interference or otherwise distracts them from their primary reasons for interacting with your site.
Video is considered primary content when the video communicates contextually relevant information that is not duplicated by text or other elements on the page. This includes content such as visual walkthroughs and slide presentations. Primary content video must be accessible for users who have difficulty perceiving or understanding visual content. It can have the same kinds of problems as decorative video. Primary content video also has additional requirements for making the information it communicates accessible to users.
Accessible video content helps a wide range of users. Most obviously, accessible video media helps users with fully or partially impaired vision. Those users need accessibility supports to perceive the information communicated by the video content. Accessible video also helps users who have trouble processing visual information. These users may have trouble understanding or retaining non-text visual information, so having alternative media gives them a way to review the information in their own time.
Accessibility doesn’t have to add significant time or cost into the content development process. Considering accessibility needs during the planning stages makes it easier and often less expensive to incorporate the necessary supports. Storyboards and scripts for the video can be used as the foundation for the planned alternative media. Considering accessibility early on in content development makes it easier to anticipate how accessibility could affect the production timeline and cost, and is simpler and less stressed than having to create accessibility supports under time constraints or the threat of a lawsuit.
The first two steps in making video content accessible are determining the purpose of the video content and considering user needs. After these two steps, there’s one more step to complete in the accessibility support cycle: identifying the standards and success criteria that will help you to determine whether or not your video content is actually accessible.
For this, we turn to the Web Content Accessibility Guidelines created by the W3C organization’s Web Accessibility Initiative. WCAG for short, these guidelines are an internationally recognized standard that gives us a common set of success criteria to use when planning for and evaluating the accessibility of digital tools and content.
The main WCAG success criterion that applies to decorative video is 2.2.2: Pause, Stop, Hide. This success criterion requires that any video that plays automatically for more than 5 seconds has a mechanism to pause, stop, or hide the video. Note that scrolling down the page does NOT count as this type of mechanism. The key to 2.2.2 is that users must be able to control the video element to suit their needs. An important note for success criterion 2.2.2: it is best NEVER to have video autoplay on page load. Giving users the choice to opt into and control the timing of the video start is better than forcing them to opt out or to restart the video because they missed the beginning.
A success criterion that is closely related to 2.2.2 is 2.4.3: Focus Order. 2.4.3 requires that if a webpage can be navigated sequentially and the navigation sequences affect meeting or operation, focusable components receive focus in an order that preserves meaning and operability. This success criterion is relevant because for users to customize their experience of your video, they need to be able to get to the controls quickly and without difficulty. Burying the video controls half a dozen focusable items in will make it harder for keyboard users to find and use those controls. It’s best to put those controls early on in the focus order so that hitting the tab key one or two times gets the user to the controls that let them pause or stop the video.
This need for easy access to the controls brings up another success criterion, 2.1.1: Keyboard. 2.1.1 simply requires that all functionality be keyboard accessible without requiring specific timings for individual key strokes. This functionality is required unless the specific function of the element relies on the path of the user’s movement, rather than simply getting to the right end points. Full keyboard functionality is an element that’s critical for a wide range of users, including users with visual impairments. Constructing the video controls correctly, preferably using semantic HTML markup, will ensure that users can find and operate those controls using the keyboard. This can be easily accomplished by using an accessible media player, or by using native HTML markup to embed the file.
Last, label the controls both visibly and programmatically in the HTML markup so that users can easily identify them as the video controls. This will ensure that you meet success criteria related to labeling, such as 3.3.2: Labels and Instructions, which requires that labels or instructions be provided when content requires user input, and 4.1.2: Name, Role, Value, which requires that all user interface components, including but not limited to: form elements, links, and components generated by scripts, have a programmatically determined name and role that when the user can set states, properties, and values, those user initiated settings will be reflected in the markup and that notification of changes to these items is available to user agents, including assistive technologies.
3.3.2 and 4.1.2 are essential for users who rely on assistive technologies such as screen readers and voice recognition so that these users can identify controls via the names of those controls, even outside of the immediate context. Clear labels or names coupled with appropriate roles will make identifying the controls much easier. Screenreaders such as Jaws, NVDA. and Voice-Over, actually read off labels for controls, but default to generics like “button” if there’s no accessible label.
Users who rely on voice commands need clear labels so that they can verbally name the correct control. Specific labels that make it easier for users to identify the purpose of the control or the form field will make navigation much simpler for these users. Roles are important because users will expect different functionality for elements, depending on whether that element is a link, button, checkbox, etc. Ensuring that the role matches the functionality helps users to predict what will happen when they use a particular control. When video is primary content rather than decorative content, all of the success criteria mentioned previously – video controls, focus order, keyboard functionality, clear labels, and appropriate roles – still apply.
In addition, there’s one more success criterion to account for: 1.2.1: Audio Only and Video-Only, Prerecorded. 1.2.1 requires that information communicated solely through video must be available to all users, which means providing alternative media versions that contain equivalent information to users who have difficulty using or processing visual information. An accessible transcript that describes what happens in the video is one way to do that.
That transcript can also be recorded as an audio description: audio of someone describing what happens in the video, and a link near or even included as the audio track. To ensure users know it is there, include text that points it out and explains how to get to the audio description. As an example, if one were to develop a descriptive transcript of the video shown in this film strip graphic, it could say:
“The video starts with a person holding a framed picture. The person wants to hang the picture. The person uses a pencil to mark the spot on the wall where they want to hang the picture, then hammers a nail into the wall.Finally, they hang up the picture.”
This descriptive transcript does not give every tiny detail of every frame, but instead describes the action as a narrative that helps the audience to understand what is happening and how it fits into the full context of the video.
If you have a pre-written script or storyboard that was used to create the video, creating a transcript is easy – just start with that script or storyboard and revise it to relay information about the visual action as a smooth, clear narrative. Include it as text, and preferably also as an audio file adjacent to the video, or as a similarly placed link to a separate page. If there is no script or storyboard, the video’s action will have to be transcribed, but planning that into your process will ensure that the costs and time needed to create the transcription can be factored in from the start.
In the end, including video content does require more effort than just embedding the video on your page. That said, a little planning goes a long way toward making accessibility simple. Give users control over the video if it plays automatically and for more than 5 seconds, clearly and programmatically label video controls and make them easy to find, and include an alternative such as a descriptive transcript so that all users can get the information contained in the video.
Incorporating these steps into your content development process removes barriers and gives you access to a larger audience.