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.
Accessibility Is UsabilityASCLA Webinar May 31st, 2013
About Me• Digital Reference Librarian with the Library ofCongress’ National Library Service for theBlind and Physically Ha...
Accessibility and Usability• Accessibility– Accessible design allows users with disabilities touse and add content to a di...
Why Is Accessibility Important?• It’s good practice• It’s the law– Section 508 of the Rehabilitation Act– While the law ap...
Real Quick, Here’s How People withDisabilities Use the Web• Screen Readers (Blind/Low-Vision)• Adaptive Mice (Physical Dis...
Usability Heuristics• Visibility of system status• Match between the system and the real world• User control and freedom• ...
Match Between the System and theReal World• Write for how users read on the web– The inverted pyramid, conclusion first– M...
<h2>News</h2><h3>Local</h3><h3>National</h3><h3>World</h3>
Match Between the System and the Real World:Meaningful Links
Match Between the System and the Real World:Meaningful Links
Match Between the System and the Real World:Meaningful Links
Match Between the System and the Real World:Meaningful Links
Match Between the System and the Real World:Meaningful Links
User Control and FreedomAllow users to escape from situations$(document) . keydown(finction (e) { // ESCAPEkey pressed if ...
Consistency of Standards
Consistency of Standards
How to Make Accessible Formswww.webstandards.org
Error PreventionLimit the use of CAPTCHAs• Alternative: Ask a question which would be simple for a human, butdifficult for...
Error RecoveryDon’t use color alone to convey important information
Error RecoveryDon’t use color alone to convey important informationColor inspected using Vischeck
Error RecoveryDon’t use color alone to convey important information
Error RecoveryDon’t use color alone to convey important information
Recognition Rather than Recall• Labels for buttons, not images•Images mean different things todifferent people.•While the ...
Flexibility and Efficiency of UseSerif vs. Sans SerifFourFour
Flexibility and Efficiency of Use• Provide clear links to text-only versions of yoursite
Flexibility and Efficiency of Use• Allow for users to access mobile versions ofthe site from stationary computers
Flexibility and Efficiency of Use• Provide visible “Skip Navigation” links– www.webaim.org
Flexibility and Efficiency of Use• Offer keyboard shortcuts to links– Fairfax County Public Library
Flexibility and Efficiency of UseAllow users to view HTML pages instead of PDFs
Aesthetic and Minimalist Design• Busy pages are difficultfor users with low-visionand users with cognitivedisabilities• Se...
Checking for Color Contrast
Help and Documentation• CaptionTube
Help and DocumentationAlt Tags<img src=“Benjamin Franklin.jpg"alt=“Portrait of BenjaminFranklin." />
Checking for Accessibility• Firefox Fangs• Vizcheck• WAVE
WAVE
WAVE
WAVE
WAVE
WAVE
ALWAYS CHECK WITH A SCREENREADER
Resources• Accessibility handbook : making 508 websites for everyone– Cunningham, Katie• CaptionTube– http://captiontube.a...
Questions?
Accessibility Is Usability
Accessibility Is Usability
Accessibility Is Usability
Accessibility Is Usability
Upcoming SlideShare
Loading in …5
×

Accessibility Is Usability

456 views

Published on

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

Accessibility Is Usability

  1. 1. Accessibility Is UsabilityASCLA Webinar May 31st, 2013
  2. 2. About Me• Digital Reference Librarian with the Library ofCongress’ National Library Service for theBlind and Physically Handicapped*• Four years experience with the AdaptiveServices Division of the DC Public Library• www.christophercorrigan.com*My views are my own and I am not speaking for the Library ofCongress.
  3. 3. Accessibility and Usability• Accessibility– Accessible design allows users with disabilities touse and add content to a digital interface• Usability– Usability refers to how well users can learn anduse a product to achieve their goals• Universal Design
  4. 4. Why Is Accessibility Important?• It’s good practice• It’s the law– Section 508 of the Rehabilitation Act– While the law applies to federal governmentagencies, all organizations which receive federalfunds must be 508 compliant.
  5. 5. Real Quick, Here’s How People withDisabilities Use the Web• Screen Readers (Blind/Low-Vision)• Adaptive Mice (Physical Disabilities)• Speech Recognition Software(Physical/Cognitive Disabilities)
  6. 6. Usability Heuristics• Visibility of system status• Match between the system and the real world• User control and freedom• Consistency and standards• Error prevention• Recognition rather than recall• Flexibility and efficiency of use• Aesthetic and minimalist design• Help users recognize, diagnose, and recover from errors• Help and documentation
  7. 7. Match Between the System and theReal World• Write for how users read on the web– The inverted pyramid, conclusion first– Make your key concepts headings• Plain Language– People come to complete a task nothear a story– Only necessary language related to theuser’s need
  8. 8. <h2>News</h2><h3>Local</h3><h3>National</h3><h3>World</h3>
  9. 9. Match Between the System and the Real World:Meaningful Links
  10. 10. Match Between the System and the Real World:Meaningful Links
  11. 11. Match Between the System and the Real World:Meaningful Links
  12. 12. Match Between the System and the Real World:Meaningful Links
  13. 13. Match Between the System and the Real World:Meaningful Links
  14. 14. User Control and FreedomAllow users to escape from situations$(document) . keydown(finction (e) { // ESCAPEkey pressed if (e .keyCode == 27) {window.close () ; }}) ;Cunningham, Katie.Accessibility Handbook.
  15. 15. Consistency of Standards
  16. 16. Consistency of Standards
  17. 17. How to Make Accessible Formswww.webstandards.org
  18. 18. Error PreventionLimit the use of CAPTCHAs• Alternative: Ask a question which would be simple for a human, butdifficult for a computer to answer.-e.g. What sport uses a hockey puck?– Accessibility handbook : making 508 websites for everyone» Cunningham, Katie
  19. 19. Error RecoveryDon’t use color alone to convey important information
  20. 20. Error RecoveryDon’t use color alone to convey important informationColor inspected using Vischeck
  21. 21. Error RecoveryDon’t use color alone to convey important information
  22. 22. Error RecoveryDon’t use color alone to convey important information
  23. 23. Recognition Rather than Recall• Labels for buttons, not images•Images mean different things todifferent people.•While the image of a magnifyingglass may be intuitive to many users,users without a cultural history ofusing the magnifying glass to searchwould be confused
  24. 24. Flexibility and Efficiency of UseSerif vs. Sans SerifFourFour
  25. 25. Flexibility and Efficiency of Use• Provide clear links to text-only versions of yoursite
  26. 26. Flexibility and Efficiency of Use• Allow for users to access mobile versions ofthe site from stationary computers
  27. 27. Flexibility and Efficiency of Use• Provide visible “Skip Navigation” links– www.webaim.org
  28. 28. Flexibility and Efficiency of Use• Offer keyboard shortcuts to links– Fairfax County Public Library
  29. 29. Flexibility and Efficiency of UseAllow users to view HTML pages instead of PDFs
  30. 30. Aesthetic and Minimalist Design• Busy pages are difficultfor users with low-visionand users with cognitivedisabilities• Sentences should beshort 10-15 words• Have smaller paragraphs• Don’t bunch upparagraphs together• Proper color contrast
  31. 31. Checking for Color Contrast
  32. 32. Help and Documentation• CaptionTube
  33. 33. Help and DocumentationAlt Tags<img src=“Benjamin Franklin.jpg"alt=“Portrait of BenjaminFranklin." />
  34. 34. Checking for Accessibility• Firefox Fangs• Vizcheck• WAVE
  35. 35. WAVE
  36. 36. WAVE
  37. 37. WAVE
  38. 38. WAVE
  39. 39. WAVE
  40. 40. ALWAYS CHECK WITH A SCREENREADER
  41. 41. Resources• Accessibility handbook : making 508 websites for everyone– Cunningham, Katie• CaptionTube– http://captiontube.appspot.com/• Firefox Fangs– Simulates how a screen reader would read text– http://bit.ly/ZA4mtL• Usability.gov’s Accessibility Guidelines– www.1.usa.gov/13RHkaj• Vizcheck– Simulates how a colorblind person sees the web– www.vischeck.com• W3C Accessibility Standards– www.bit.ly/10yGtnt• Web Aim– www.webaim.org• Web Standards Project– Tutorials on how to create online forms– www.bit.ly/Z1QMAp
  42. 42. Questions?

×