Introduction

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.

Audiovisual Media

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.

Live Events

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">

Decorative Images

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">

Complex Images

Examples: charts, graphs, infographics

example of two pie charts in six pieces, one showing just percentages and one showing how grades are weighted

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.">
<figcaption>
<h2 id="figure-title">Grading Charts</h2>
<p>Papers 2 and 4 are weighted equally at 20 percent...</p>
</figcaption>
</figure>

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

<img alt="">

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

<img alt="/file-path.png">

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

  • What does your time-based media include?
    • Live video with synchronized audio
      • Must provide closed captions
        Audio description recommended
    • Pre-recorded audio only
      • Does screen text reflect audio?
        • Yes: No further steps needed
        • No: Must provide transcript of speech and non-speech audio
    • Pre-recorded video only
      • Must provide audio descriptions or text alternative
    • Pre-recorded video with synchronized video
      • Does screen text reflect audio?
        • Yes: No captions needed
        • No: Must provide closed captions
      • Does audio describe visual elements?
        • Yes: No audio description needed
          Transcript strongly recommended
        • No: Must provide synchronized audio description, may use extended audio descriptions, transcripts strongly recommended.

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.

Quick Tip

Refer to the Video Guidelines for more information about guidelines for video content and responsibilities regarding captioning and audio description.