Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible Images

698 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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>

×