Accessible Images

Wendy ChisholmMatt May

Universal Design for Web Applications

Perceivable

Operable

Understandable

Robust

Perceivable

Perceivable: Overview

Provide function of visual content “alt-text” Captions Transcripts Audio Descriptions

Color contrast

Text Alternatives for Images

• One of the most common mistakes

• One of the easiest to fix

• Many ways to test

• Should replace purpose of the image

• Or if not needed for understanding, “hide” it

• Links are interesting cases

WebAnywherehttp://webanywhere.cs.washington.edu/beta/

<img alt=”UMBC An Honors University in Maryland” />

Suggested

Expected alt-text?

<img alt=”College of Science, Health & Engineering” />

Suggested

Previous screen shot used Firefox Dev Toolbar: https://addons.mozilla.org/en-US/firefox/addon/60

<a href=“...”> Print Friendly Page <img src=“.../images/print.gif” alt=“??”></a>

Suggested alt?

<a href=“...”> Print Friendly Page <img src=“.../images/print.gif” alt=“”></a>

Suggested: null alt-text

Suggestions?

<img src=“images/templates/spacer.gif” width=“200” height=“10” alt=“Spacer images. (Decorative Element)”/>

Suggested

1. Use CSS for layout

2. alt=“” (null alt-text)

Suggestions for the arrow?

Currently<tr> <td width="10" valign="top"> <img src="..." width="7" height="9"> </td> <td valign="top"> <a href="...">B.S. Mathematics</a> </td></tr>

What’s going on here?

<p> <img height=“497” width=“626” src=“words_per_book.jpg”></p>

Not just for HTML

In Acrobat

Suggested

1. Avoid images of text. (please please please)

2. Break into multiple images and text.

3. alt-text for each book cover should be the title of the book

Summary

• If it contributes, give it a text equivalent.

• If it doesn’t, include it via css or null alt-text.

• If it’s an image of words, alt-text=words.

• If it’s a link or button, alt-text=function.

• If it’s in a text link, alt-text=null alt-text.

• Avoid redundancy where possible.

• Avoid images of text (please please please!)

• True for file formats (PDF, Powerpoint, etc)