Web Accessibility: Images and Media
Images and media can enrich the web experience for all users. They also have critical accessibility needs so all users can use and understand visual or audio content.
Images and Graphics
Examples: basic photos, complex charts or graphs
Requires a text alternative of the visual information presented.
Examples: video, podcasts
Audio requires transcripts, audiovisual material like video requires both transcripts and captions.
If visual information is not also provided through speech in a video, then audio description is required of the video.
Examples: games, presentations, speaker events
Requires live captioning of event.
Text Alternatives for Images
Basic Image or Graphic
Provide concise yet descriptive alt text.
<img alt="Western Washington University logo" src="/file-path.png">
Examples: patterned background, image of horizontal rule—provides no additional meaning
Solution: Provide null alt text.
<img alt="" src="//designsystem.wwu.edu/file-path.png">
Examples: charts, graphs, infographics
Provide a textual alternative of data, such as a table of data or a longer description.
<figure role="group" aria-labelledby="figure-title">
<img src="//designsystem.wwu.edu/chart.png" alt="two pie charts with six pieces showing how a grade is weighted.">
<h2 id="figure-title">Grading Charts</h2>
<p>Papers 2 and 4 are weighted equally at 20 percent...</p>
Alt Text That Passes
<img alt="aerial view of buildings on a hillside next to a body of water.">
The alt text concisely describes what is in the image and its context.
Alt Text That Doesn't Work Here
Unless there is text next to the image that describes the image itself, there should be alt text included. Otherwise, the image is not announced to assistive technology.
<img alt="Bellingham Bay.">
While better than nothing, this could be more descriptive of what is happening in the image.
Alt Text That Doesn't Work Here
Don't use the file name as alt text.
<img alt="Bellingham Bay, Western Washington University, WWU, Bellingham.">
This is known as "keyword stuffing" for SEO purposes. This hinders understanding of what the image is actually about and offers little context.
Captioning and Audio Description
Captioning Decision Tree
Other Things to Consider with Captioning
Aim for shorter videos
Chunk your video material into short segments, rather than one long video. Providing shorter videos gives all viewers a chance to process information and decide when to move on to the next section.
Write a script
Using a script will make you talk clearer, slower, and keep you to the point at hand. Plus, a script will save you a lot of time and money that you would then need to put towards creating or paying for captions. You can also load the script into YouTube, where it will automatically be synced to the audio.
Consider your environment
If filming yourself, make sure you're in a quiet and plain environment with minimal disruptions. Viewers will focus more on what you're saying than what's happening around you.
Keep the bottom quarter of the screen clear
If you're doing a screencast or narrating a PowerPoint, try to keep the bottom of the screen clear so that you're not covering important info with the captions. Captions are typically displayed at the bottom of the screen and could potentially block visual information that would benefit all viewers.
Audio descriptions allow people with visual impairment to hear what's happening or displayed on the screen that they can't see. Audio descriptions are an additional audio file that can be played over a video to describe the visual content in order to progress with the narrative.
Adding Audio Description To Video
There are a few ways to provide audio description in video or other audiovisual media:
- Provide another version of the video with audio description built in. This means adding an audio track with just description on top of the other sound tracks.
- Add an audio description track to your video. This requires using a media player like AblePlayer or OzPlayer that supports multiple tracks
- Submit your video to 3Play for audio description and post the audio described version somewhere.
Video With Audio Description
Video Without Audio Description
Minimize the Need for Audio Description
There are also ways to reduce the need to include audio description in your video to save you time and money.
- Use a script. When creating captions, look over your script to see if you can add in some language that describes the screen or identifies who's talking.
- Avoid phrases like "over here" or "when I do this" and replace them with more descriptive language (e.g. "when I click on the grades tab in the course menu..."). Read your script and see if you can make sense of the language without visuals. If you can, maybe you don't need audio description.
- If multiple people are talking in your video, ask them to identify themselves and their position/role. Again, try to represent any text that might be on the screen through audio. This will minimize the need for additional audio descriptions and can also be beneficial for people using captions, as often times the captions may cover the portion of the screen that contains text.
Refer to the Video Guidelines for more information about guidelines for video content and responsibilities regarding captioning and audio description.