*This article is an English translation of a Japanese article.
Publishing videos on a website is an effective way to visually enhance the content and communicate information clearly to users. However, video content requires careful attention from an accessibility perspective. To ensure that users with visual or hearing impairments can understand the content, proper measures are needed. This article outlines key points for publishing videos with web accessibility in mind.
1. Providing Subtitles (Captions)
Importance of Subtitles
Providing subtitles is crucial for users who cannot hear the audio or cannot turn it on. Subtitles benefit not only those with hearing impairments but also users in noisy environments or those who need to keep the sound off. Ideally, subtitles should include not only the speaker’s words but also important sounds, such as music or environmental noises, that convey context.
Good Example of Subtitles
<video controls>
<track src="captions.vtt" kind="captions" srclang="ja" label="Japanese Subtitles">
Your browser does not support the video tag.
</video>
- Use the <track> tag to add subtitles to the video.
- Provide a subtitle file (such as .vtt format) and allow users to toggle the subtitles on or off.
- Include both speech and necessary sound information (e.g., laughter, applause, or door slams).
Bad Example of Subtitles
<video controls>
Your browser does not support the video tag.
</video>
- Without subtitles, users with hearing impairments cannot understand the content.
- Videos with important audio information should not rely solely on visual elements and need to include audio details.
2. Adding Audio Descriptions
Role of Audio Descriptions
For users with visual impairments or those unable to fully see the screen, audio descriptions are highly effective. Audio descriptions provide verbal explanations of important visual elements (e.g., character expressions, scene changes, and text information) in the video.
Implementation of Audio Descriptions
You can offer a separate audio description track or provide a version of the video with audio descriptions included.
HTML Example:
<a href="video-with-description.mp4">Watch the video with audio description</a>
- Describe important visual elements (e.g., scenery, character movements).
- Offer a separate version with audio descriptions or allow users to switch between versions.
3. Providing Video Playback Controls
Enabling User Control
Videos should be easily playable, paused, volume-adjusted, and subtitled through keyboard controls and assistive technologies. It’s essential that users who rely solely on keyboards or voice commands can fully control the video player.
HTML Example:
<video controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- Use the controls attribute to offer basic functions like play, pause, and volume control.
- Ensure the video player is fully operable using only a keyboard (test for play, pause, volume, and subtitle toggling).
Avoid Auto-Play
For accessibility reasons, avoid auto-playing videos. Sudden audio can confuse users or interfere with assistive technology. Allow users to start the video manually.
4. Providing a Text Summary of the Video Content
Importance of Text Summaries
For users who cannot access the video or want a quick overview, it’s important to provide a text summary of the video’s content. This ensures that users who cannot see or hear the video can still understand the main points.
Good HTML Example of a Text Summary:
Video Overview
This video introduces the company’s founding and mission. The first scene features the founder discussing the background of the company’s establishment, followed by an explanation of the current business activities. The video concludes with a discussion of the future outlook and corporate social responsibility.
- Concisely summarize the key points of the video so that users can understand the content without watching.
- Provide detailed descriptions for users with visual or hearing impairments.
5. Optimizing Video Loading Speed and Quality
Loading Speed and Internet Connectivity
Considering the variety of internet connections users may have, it’s important to ensure that videos load quickly and efficiently. Providing videos in multiple resolutions allows users to select the appropriate quality based on their connection speed.
HTML Example:
<video controls>
<source src="video-720p.mp4" type="video/mp4" label="HD">
<source src="video-480p.mp4" type="video/mp4" label="SD">
Your browser does not support the video tag.
</video>
- Offer multiple resolutions (high, standard, and low quality) so users can choose based on their connection speed.
- Ensure smooth playback even in low bandwidth environments.
Conclusion
When publishing videos with web accessibility in mind, it’s essential to consider features like subtitles, audio descriptions, usability, and text summaries. By doing so, users with hearing or visual impairments, as well as those who rely on keyboard-only navigation, can enjoy the content. Accessible video publishing is part of building a user-friendly website for everyone. Start by adding subtitles and text summaries as they are easy to implement and can significantly improve the user experience.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.