Multimedia consists primarily of audio and video content. These have been a big part of our web experience for a long time, and the trend is growing stronger as we consume more and more thanks to our increasingly faster connections.
That said, this content poses a double challenge for developers:
First, what about those who do not have access to a sufficiently high-quality internet connection? What solutions can you use to make this content usable to everyone?
Second, how can you make this content perceivable to those who can’t see or hear?
We'll tackle these questions in this final chapter on content!
But before you learn the techniques that allow you to make your audio and video content accessible, here is a brief reminder of the target audiences that will benefit from this improvement:
Users who are visually impaired or those using assistive technologies, such as screen readers.
Users who are deaf or hard of hearing.
Users with limited motor abilities, such as those who have had a stroke, an accident, or those with mobility disabilities.
Users who do not understand the language used in videos.
The good news for developers is that making your audio and video content widely accessible does not take as much work as you might imagine.
Modify Your Audio and Video Content
First, let’s look at the audio and video tags and attributes.
The Audio Tag
The audio tag is the simplest. It is used in conjunction with the source tags.
The most important thing to keep in mind when using the audio tag is to offer formats that are compatible with different browsers. Consider using the Ogg (for Firefox and Chrome) and ACC/MP3 (for Internet Explorer and Safari) formats.
Whenever you include an audio file, make sure you also include a text transcript to make the content available to users who can’t hear. A transcript is also useful as a reference document.
The Video Tag
This tag is also used in conjunction with the source and track tags:
The
sourcetag allows you to offer several possible encodings depending on the browser.The
tracktag allows you to define the available subtitles for your video.
As you can see in the example below, the track tag allows you to define the subtitles and language of these videos for your visitors.
<!-- A simple example -->
<video src="fichiervideo.webm" autoplay poster="vignette.jpg">
Votre navigateur ne permet pas de lire les vidéos.
Mais vous pouvez toujours
<a href="fichiervideo.webm">la télécharger</a> !
</video>
<!-- Video with subtitles -->
<video src="toto.webm">
<track kind="subtitles" src="toto.en.vtt" srclang="en" label="Anglais">
<track kind="subtitles" src="toto.sv.vtt" srclang="sv" label="Suédois">
</video>A couple of things to keep in mind when using the video tag:
Avoid setting the
autoplayattribute totrueon videos so that they don’t start playing automatically. More and more browsers block autoplay (Mozilla Firefox, for example).Add the
controlsattribute to the video tag so your users can maintain control over the video (i.e., to avoid epileptic seizures if the video contains flashing content).
Limits to the Audio and Video Tags
Although these tags are a good start, they are not yet perfect from an accessibility point of view:
The controls, visual rendering, and keyboard shortcuts are not standardized across all browsers. Video implementation is done by the browser and not a third-party library. The different browsers, such as Google Chrome, Mozilla Firefox, or Safari, have different visuals and controls.
Not all of the controls necessary for accessibility are present by default. Some browsers do not have keyboard shortcuts to control audio or video content (i.e., mute the audio, slow down or pause the video, etc.).
Let’s have a look at a few third-party solutions to integrate your audio and video content.
Tools and Libraries for Creating Accessible Multimedia Content
To create accessible audio or video content, you have two solutions:
Create a tool yourself using JavaScript and ARIA to indicate the states.
Use a third-party library that will manage this for you.
While creating a tool from scratch is a good idea from a learning point of view, you will sometimes need to go through a third-party library.
You have to find a balance between essential and non-essential libraries.
Here is a selection of possible libraries:
Plyr (This library is compatible with many formats, accessible, customizable, and can be used with ReactJS.)
Now that we've touched on the particulars of different types of multimedia content, you're ready to start creating!
Let’s Recap!
It is important to provide files of different source types for both audio and video to manage compatibility between browsers.
Audio and video content should have transcripts.
Videos should have subtitles.
In some cases, a good option for creating accessible multimedia content is to go through third-party libraries, such as Plyr.
You have reached the end of Part 1! Now head to the quiz to check your understanding. In the next part, we'll examine interactions and CSS.
