Complete guide to accessible video and audio for the web
According to the American Institute of Research, the total disposable income for U.S. adults with disabilities is about $490 billion. And the complete amount you will be getting by being compassionate and welcoming inclusivity is priceless.
I always suggest clients to add videos to their websites because videos convert and they make the sites more interactive which distinguishes them from brochures. According to Wyzowl, "77% of consumers say they've been convinced to buy a product or service by watching a video." I know I have been, multiple times.
If your budget is tight, even capturing yourself talking to your webcam and posting the recording to your website will make a huge difference. So far, I haven't seen one freelancer other than me that have a video of themselves on their website! That gives me an edge!
But what about disabled people? What if they want to watch my video and they are deaf? All they will see is a head that moves its mouth! They would leave angrily thinking that I shouldn't brand myself a UX guru if I can't even make my video accessible, and they'd be right.
Providing captions and transcripts to videos and podcasts (or any type of audio you might have) not only shows compassion and makes the day of a disabled person better, but also enables search engines to index the contents of your media. Search bots can't play videos or podcasts. Not only that, but once your brand is labeled as accessible, you will have more customers than you can imagine. After all, wouldn't you be shopping at a store that is accessible and makes life easier rather than the other way around?
Accessible video and audio
Providing captions and transcript
First step is to get captions. You can either do it yourself or hire someone, either a freelancer or a company. You send them the video (or just a link where it is hosted) and they will start working. Make sure you ask for a transcript as well, as it will often be included in the price, since the difference between a caption and a transcript is the timed sentences.
Another option is computer generated captions, but they are unreliable. I am sure you have clicked the YouTube ones, and they are often either incomprehensible or just plain wrong. Not to mention they don't include audio descriptions like "sneezes" or "whispering". And if the speaker has an accent like me, it's a lost cause trying to get good generated captions.
There are two types of captions - open and closed. Open captioning is when they are "baked" into the video so you can't edit them, nor turn them off. The benefit of those is that you don't need a player to support captioning to run them and they appear right away, with no fussing over to enable them. You can offer them in multiple languages, but you are limited by the space since all languages must appear at the same time - on the other hand, it is useful for language learning videos. You can't edit the captions if a mistake has been made or add many translations. They will also be very much in the way if you are viewing the video on a narrow viewport.
Unlike open captioning, with closed ones you can turn them on and off, you can offer them in multiple languages and you can edit them any time. On the downside, you need a player that supports them and the toggle needs to be easy to find. I prefer to have closed captions since I like their flexibility, and I have them turned on by default. That way if a user needs them, they are right there without needing to search for the button to enable them. I also indicate that the video has captions in the title, for example "About Stefany Newman [Closed Captions]".
If your site is multi-lingual you should provide transcript and captions in the offered languages.
Example of bad auto generated captions. Original sentence was "on most devices, but with the Media Capabilities API that means..."
Quality captions include:
Correct grammar & punctuation
All on-screen text, e.g. if the speaker is showing something written in a book or a sign and doesn't say it
Audio description e.g. "chimes", "monitor beeping erratically", "door hisses open"
Placement that doesn't block important things on the screen (e.g. the speaker's face)
For live broadcasts, live captioning should be provided. The House of Representatives require live captioning contractors to capture accurately 98.6% of all that's being said live. There are also various companies that provide live captioning to events.
If you are hosting a conference, you should provide live captioning so that deaf / hard of hearing people will be able to enjoy it and it will also help people with ADHD.
Example of live captioning. A big monitor with a captionier taking down the speaker's words in real time.
The event was Longhorn PHP. (Speaker - Nicolas Steenhout, live captioning was provided by Twillio with the help of Margaret Staples, photo taken by Ian Littman)
As for transcripts, you can either include them in the same document as the video or in a different page. They follow roughly the same rules as the captions, and if you want to go the extra mile, you can make them interactive. An interactive transcript allows your to click on timestamps and it jumps through the video or you click on the text and it leaps at the beginning of the sentence. Even better, if they player supports it, you can have a box that shows the text that is being outlined live. However, just providing a plain text transcript is enough for accessibility.
Media player with an interactive transcript
Audio / Visual Description
Audio description is a voice that describes what is happening in the video. According to the The Audio Description Project "It is a narration service [..] that attempts to describe what the sighted person takes for granted -- those images that a person who is blind or visually impaired formerly could only experience through the whispered asides from a sighted companion "
W3CWAI.org's video on accessibility has an audio description. The video and the player is an excellent example of media accessibility done right. I invite you to click around and explore it.
Audio description is crucial if you are have a video with no dialogue. If you can't provide one, make sure the transcript and/or the captions are descriptive. If you fail to even do that, you have prevented access to your video to roughly 285 million blind people worldwide.
Same goes for presentations. If you have a presentation with charts and diagrams, anything that you assume a sighted person will take for granted, add an audio description, or, even better, try to make your presentation as accessible as possible. For example, if you are showing a chart that shows direct marketing revenue skyrocketing in comparison to last year, you might be tempted to say "According the chart, if we double the amount of brochures we send, we will get more profits" but instead say "Direct marketing profits are 59% higher than last year's 43%"
My rule of thumb is, anytime I am lecturing and I am tempted to say the words "as you can see" means I must change the way I say it.
The above technique is also known as "Integrated Described Video" or IDV. If done correctly, it eliminates the need for a separate audio track and it improves the inclusivity of your video in a way that families and friends could enjoy your media together, regardless of their abilities.
Providing sign language translation
Sign language isn't universal nor is it "English on the hands". If you want to add a picture-in-picture sign language translation to your videos, you need to know your audience. There are roughly three hundred sign languages in the world so you have to figure out which nationality will your visitors be which can be daunting.
If you have an e-commerce site and you are shipping only to USA and Canada, you only need ASL(American Sign Language) and Langue des Signes Québécoise (LSQ) translation. However, if you live and ship in Quebec, just the latter will suffice. So delve into your site analytics and determine the best way to serve your visitors.
You can provide picture-in-picture sign language translation by getting the interpreter's recording and embedding it into the video with a video editing program. Make sure that the media player supports full screen, otherwise the box of the translator might be too small and deaf / hard of hearing people won't be able to see it. You can also provide side-by-side videos of both the original recording and the interpreter one.
Accessible Podcasts
Interactive transcripts are great for podcasts. At the very least, a timetable with a full transcript should be provided.
As mentioned above, a video with a sign language translator will be great. Remember, deaf / hard of hearing people can read just fine, but it will be even better experience to watch a sign language translation. If the podcast is especially long, they'd have to spend a long time reading.
Make sure you conduct your podcasts in an accessible way. Speak at a normal rate and narrate all things that are important like chart data or statistics. Unlike a video, there is no visual aid for sighted users and if you create a podcast with accessibility in mind it will be even better for everyone. Not all of your listeners will know your spoken language as their native and it will help immensely people with cognitive disabilities.
Make sure to list the speakers and all links mentioned in the podcast. It not only helps accessibility, but it ranks your podcast better in Google since it can be indexed.
Some visitors might be unable to listen to your podcast at the moment (for example if they are on a train or in the library and have forgotten their headphones) but they could will read the transcript. Other people prefer learning and consuming information by reading rather than listening.
As with captions, if your site is multi-lingual or a big chunk of your audience's native language is other than your main one, you should also get your transcript translated.
I suggest you playback your recordings and search for things you could have done better. I know it can be awkward and time consuming, but it will make you a better lecturer. For example, I noticed I tend to speak very fast when talking about a subject I am passionate about, so I have taken steps to speak at a normal rate.
Avoid harming your audience
Flashy video or animation can harm your visitors if they are suffering from photosensitive epilepsy. It's one of the many reasons why you should never autoplay videos. Before you add a video, watch it and if you are doubting the content is seizure inducing, try consulting with a medical professional. If you must absolutely display such a video, add a warning and don't autoplay it.
Seizure inducing media can even harm people without epilepsy. Children are especially vulnerable. In 1997, a single episode of Pokemon triggered a seizure of over 700 kids and some adults. The serie had red and blue lights flashing for a few seconds, both things that trigger seizures. Imagine something like that autoplaying as a hero video on a website!
Be also careful of auto-playing carousels. While you should avoid adding a carousel on a website altogether, nowadays fancy and flashy animations are very popular with slideshows.This poses serious risk of inducing seizures or at the very least, migraines.
CSS animations can be even more dangerous because they always autoplay and can't be paused, so you can't even add warnings.
CSS animations have become very popular recently and while they can be helpful, if done poorly they can have the same negative effect. Always check if your animation will be a seizure trigger. After all, one animation send over 700 people to the hospital.
Accessible video / audio player
You can have the perfect captions and transcript but if the media player doesn't support it, they will be useless. Features of accessible playback software include:
Displaying captions
Button for audio descriptions
Full screen option
Keyboard accessible
As Cross Browser Compatible as possible (toss it if it doesn't run on the most popular browsers)
Support for interactive transcript
OzPlayer is a good example of accessible media player. If your organization is using a custom media player, check whether it is accessible. Your customized solution might be doing you a great disservice!
For motor impaired users, controlling the player without a mouse is vital. Check the keyboard accessibility of the player by using it to control the various options (play, pause, full screen) and pay close attention to the outline contrast. You might not be able to edit the outlines if you are invoking the video via <iframe> so try to use a player if contrast is an issue. YouTube allows you to embed your video in numerous players, and with Vimeo you need a PRO subscription (I wish Vimeo changes it to allow the users to customize the outlines for accessibility).
Putting it all together
Captions, transcript, audio description, non-seizure/migraine inducing content, keyboard functions, accessible player - it all ties together to create an incredible experience for abled and disabled users. But all the inventions in the world are useless without the ultimate ingredient - desire. A desire to share your content and to make it in a way as many people as possible will be able to enjoy. Not only will you reap enormous benefits, but you will get the best gain ever - making the world a better place.