HTML5 and CSS3, Second Edition

Tip 22

Tip 22. Making Videos Accessible

None of the fallback solutions we’ve discussed work well for users with

disabilities. In fact, the HTML5 specification explicitly points that out. A

hearing-impaired person won’t find any value in being able to download the

audio file, and a visually impaired person won’t have much use for a video

file that’s viewable outside of the browser. When you provide content to our

users, you should provide usable alternatives whenever possible. Video and

audio files should have transcripts that people can view. If you produce your

own content, transcripts are easy to make if you plan them from the start

because they can come right from the script. Let’s add a simple transcript

right below our video:

html5_video/videojs_index.html

<sectionclass="transcript">

<h2>Transcript</h2>

<p>

We'lldragthe existinglayerto the new buttonon the bottomof

the Layerspaletteto createa new copy.

</p>

<p>

Nextwe'llgo to the Filtermenuand chooseGaussianBlur.

We'llchangethe bluramountjustenoughso thatwe losea little

bit of the detailof the image.

</p>

<p>

Now we'lldouble-clickon the layerto editthe layerand

changethe blendingmodeto Overlay. We can thenadjustthe

amountof the effectby changingthe opacityslider.

</p>

<p>Now we havea slightlyenhancedimage.</p>

</section>

You can hide the transcript or link to it from the main video page. As long as

you make it easy to find and easy to follow, it’s going to be really helpful. If a

transcript isn’t possible, consider a summary that highlights the important

parts of the video. Anything is better than nothing.

Adding Captions

Transcripts are great, but we can do something even better. HTML5 supports

video captioning and subtitles through the new <track> tag. This isn’t widely

Chapter 7. Embedding Audio and Video • 146

Download from Wow! eBook <www.wowebook.com> report erratum • discuss