Accessibility: Making Videos and Audio Accessible
3 min read
When adding media such as videos, GIFs, and audio files to your site, you should ensure that it is accessible to all site visitors.
You can do this by adding alternatives, such as transcripts and captions. This ensures that visitors on your site with disabilities and impairments can access and enjoy the content on your site.
In this article, learn more about:
Adding text descriptions to media without sound
If your site contains GIFs or videos that do not have sound, visitors with sight-related impairments may not be able to access them.
We recommend adding a text description to the piece of media that describes the events that are taking place. For example, the text description of this GIF could be: A GIF of the sun with the word "New" flashing across it.
This improves your site's accessibility, as screenreaders can "read" the description, and inform the visitor of the media's content. Learn more about text descriptions for media
Adding text transcripts to audio files
You should attach text transcripts to any audio files you upload to your site. This improves accessibility, as it ensures that visitors who are deaf or hard of hearing can access and enjoy this content.
You can create a transcript by writing it into a document, and then linking the document under or above the audio file. Learn more about creating transcripts for your audio files
Tip:
You can link your transcript through text, or with a button.
Adding captions to videos
Adding captions to your videos is a good way to ensure that visitors with hearing or cognitive impairments can understand and enjoy your content.
Closed captions do not just contain subtitles. They also contain description of sounds that aren't dialogue. For example, the closed captions in the video screenshot below include the background music. Learn more about video captions
Most videos hosting sites (such as YouTube) have a "Closed Caption" feature, which allows viewers to turn on captions while viewing the video. If you upload your own video, you can add captions with external video editing software, such as Amara. See more closed captioning software options
Tip:
We recommend providing captions in multiple languages, as they are also helpful for viewers who may not speak the language spoken in your video.
Adding audio descriptions to videos
Audio descriptions are a type of audio that is added to videos to improve accessibility. They do so by describing events to visitors who have sight-related impairments, and who may be relying on audio to navigate and understand the content on your site.
Audio descriptions are recorded descriptions of visual events that do not make sound, such as movement, facial expressions, and lighting changes. For example, a weather report may include the audio description: "The meteorologist is pointing to the northwest of the country".
Audio descriptions are added between dialogue and other important audio, so the audience can hear them clearly. You can add audio descriptions within the video itself, or by adding an extra audio track. Learn more about making audio descriptions
Adding captions to live events
We recommend adding captions to any live events that you stream on your site. This ensures that visitors who are deaf or hard of hearing can also view and enjoy them.
There are two methods of adding captions to live events on your site:
- Script: The performers, hosts, or presenters work from a pre-determined script. This script is then embedded into the live stream. This method is commonly used in events such as plays.
- Live: The captions are added in real time to the event stream, either by a person or a software program. This method is used in events that use minimal or no scripts, such as live podcast tapings and award ceremonies.
Some browsers, such as Chrome, allow visitors to enable live captioning from their device. However, if you would like to stream your event from YouTube, the captions will need to be embedded into the video or sent via software that can send captions over HTTP POSTs, such as StreamText.
Did this help?
|