Download - Accessible Images
![Page 1: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/1.jpg)
Accessible Images
Wendy ChisholmMatt May
Universal Design for Web Applications
![Page 2: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/2.jpg)
Perceivable
Operable
Understandable
Robust
![Page 3: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/3.jpg)
Perceivable
![Page 4: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/4.jpg)
Perceivable: Overview
Provide function of visual content “alt-text” Captions Transcripts Audio Descriptions
Color contrast
![Page 5: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/5.jpg)
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
![Page 6: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/6.jpg)
WebAnywherehttp://webanywhere.cs.washington.edu/beta/
![Page 7: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/7.jpg)
<img alt=”UMBC An Honors University in Maryland” />
Suggested
![Page 8: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/8.jpg)
Expected alt-text?
![Page 9: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/9.jpg)
![Page 10: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/10.jpg)
<img alt=”College of Science, Health & Engineering” />
Suggested
Previous screen shot used Firefox Dev Toolbar: https://addons.mozilla.org/en-US/firefox/addon/60
![Page 11: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/11.jpg)
<a href=“...”> Print Friendly Page <img src=“.../images/print.gif” alt=“??”></a>
Suggested alt?
![Page 12: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/12.jpg)
<a href=“...”> Print Friendly Page <img src=“.../images/print.gif” alt=“”></a>
Suggested: null alt-text
![Page 13: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/13.jpg)
Suggestions?
<img src=“images/templates/spacer.gif” width=“200” height=“10” alt=“Spacer images. (Decorative Element)”/>
![Page 14: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/14.jpg)
Suggested
1. Use CSS for layout
2. alt=“” (null alt-text)
![Page 15: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/15.jpg)
Suggestions for the arrow?
![Page 16: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/16.jpg)
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>
![Page 17: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/17.jpg)
What’s going on here?
![Page 18: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/18.jpg)
<p> <img height=“497” width=“626” src=“words_per_book.jpg”></p>
![Page 19: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/19.jpg)
Not just for HTML
![Page 20: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/20.jpg)
In Acrobat
![Page 21: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/21.jpg)
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
![Page 22: Accessible Images](https://reader033.vdocuments.mx/reader033/viewer/2022052600/5579a986d8b42ac1148b4d03/html5/thumbnails/22.jpg)
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)