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

181

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
181
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • This example does not use color alone
  • Images mean different things to different people. While the image of a magnifying glass may be intuitive to many users, users without a cultural history of using the magnifying glass to search would be confused
  • Helvetica, Verdana or Arial
  • Transcript of "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?

    ×