Accessible Images

616 views
559 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
616
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Accessible Images

  1. 1. Accessible Images<br />Wendy Chisholm<br />Matt May<br />Universal Design for Web Applications<br />
  2. 2. Perceivable<br />Operable<br />Understandable<br />Robust<br />
  3. 3. Perceivable<br />
  4. 4. Perceivable: Overview<br /><ul><li>Provide function of visual content
  5. 5. “alt-text”
  6. 6. Captions
  7. 7. Transcripts
  8. 8. Audio Descriptions
  9. 9. Color contrast</li></li></ul><li>Text Alternatives for Images<br /><ul><li>One of the most common mistakes
  10. 10. One of the easiest to fix
  11. 11. Many ways to test
  12. 12. Should replace purpose of the image
  13. 13. Or if not needed for understanding, “hide” it
  14. 14. Links are interesting cases</li></li></ul><li>WebAnywhere<br />http://webanywhere.cs.washington.edu/beta/<br />
  15. 15. Suggested<br /><img alt=”UMBC An Honors University in Maryland” /><br />
  16. 16. Expected alt-text?<br />
  17. 17.
  18. 18. Suggested<br /><img alt=”College of Science, Health & Engineering” /><br />Previous screen shot used Firefox Dev Toolbar: <br />https://addons.mozilla.org/en-US/firefox/addon/60<br />
  19. 19. <a href=“...”><br /> Print Friendly Page<br /> <imgsrc=“.../images/print.gif” alt=“??”><br /></a><br />Suggested alt?<br />
  20. 20. <a href=“...”><br /> Print Friendly Page<br /> <imgsrc=“.../images/print.gif” alt=“”><br /></a><br />Suggested: null alt-text<br />
  21. 21. Suggestions?<br /><imgsrc=“images/templates/spacer.gif” width=“200” height=“10” alt=“Spacer images. (Decorative Element)”/><br />
  22. 22. Suggested<br />Use CSS for layout <br />alt=“” (null alt-text)<br />
  23. 23. Suggestions for the arrow?<br />
  24. 24. Currently<br /><tr><br /> <td width="10" valign="top"><br /><imgsrc="..." width="7" height="9"><br /> </td><br /> <td valign="top"><br /> <a href="...">B.S. Mathematics</a><br /> </td><br /></tr> <br />
  25. 25. What’s going on here?<br />
  26. 26. <p><br /> <img height=“497” width=“626” src=“words_per_book.jpg”><br /></p><br />
  27. 27. Not just for HTML<br />
  28. 28. In Acrobat<br />
  29. 29. Suggested<br />Avoid images of text. (please pleaseplease)<br />Break into multiple images and text. <br />alt-text for each book cover should be the title of the book<br />
  30. 30. Summary<br /><ul><li>If it contributes, give it a text equivalent.
  31. 31. If it doesn’t, include it via css or null alt-text.
  32. 32. If it’s an image of words, alt-text=words.
  33. 33. If it’s a link or button, alt-text=function.
  34. 34. If it’s in a text link, alt-text=null alt-text.
  35. 35. Avoid redundancy where possible.
  36. 36. Avoid images of text (please pleaseplease!)
  37. 37. True for file formats (PDF, Powerpoint, etc)</li>

×