1. Accessibility Is Usability
ASCLA Webinar May 31st, 2013

2. About Me
• Digital Reference Librarian with the Library of
Congress’ National Library Service for the
Blind and Physically Handicapped*
• Four years experience with the Adaptive
Services Division of the DC Public Library
• www.christophercorrigan.com
*My views are my own and I am not speaking for the Library of
Congress.

3. Accessibility and Usability
• Accessibility
– Accessible design allows users with disabilities to
use and add content to a digital interface
• Usability
– Usability refers to how well users can learn and
use a product to achieve their goals
• Universal Design

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 government
agencies, all organizations which receive federal
funds must be 508 compliant.

5. Real Quick, Here’s How People with
Disabilities Use the Web
• Screen Readers (Blind/Low-Vision)
• Adaptive Mice (Physical Disabilities)
• Speech Recognition Software
(Physical/Cognitive Disabilities)

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. Match Between the System and the
Real 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 not
hear a story
– Only necessary language related to the
user’s need

8. <h2>News</h2>
<h3>Local</h3>
<h3>National</h3>
<h3>World</h3>

12. Match Between the System and the Real World:
Meaningful Links

14. Match Between the System and the Real World:
Meaningful Links

15. Match Between the System and the Real World:
Meaningful Links

16. Match Between the System and the Real World:
Meaningful Links

17. Match Between the System and the Real World:
Meaningful Links

18. User Control and Freedom
Allow users to escape from situations
$(document) . keydown
(finction (e) { // ESCAPE
key pressed if (e .
keyCode == 27) {
window.close () ; }
}) ;
Cunningham, Katie.
Accessibility Handbook.

19. Consistency of Standards

20. Consistency of Standards

21. How to Make Accessible Forms
www.webstandards.org

22. Error Prevention
Limit the use of CAPTCHAs
• Alternative: Ask a question which would be simple for a human, but
difficult for a computer to answer.
-e.g. What sport uses a hockey puck?
– Accessibility handbook : making 508 websites for everyone
» Cunningham, Katie

23. Error Recovery
Don’t use color alone to convey important information

24. Error Recovery
Don’t use color alone to convey important information
Color inspected using Vischeck

25. Error Recovery
Don’t use color alone to convey important information

26. Error Recovery
Don’t use color alone to convey important information

27. Recognition Rather than Recall
• Labels for buttons, not images
•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

28. Flexibility and Efficiency of Use
Serif vs. Sans Serif
FourFour

29. Flexibility and Efficiency of Use
• Provide clear links to text-only versions of your
site

30. Flexibility and Efficiency of Use
• Allow for users to access mobile versions of
the site from stationary computers

31. Flexibility and Efficiency of Use
• Provide visible “Skip Navigation” links
– www.webaim.org

32. Flexibility and Efficiency of Use
• Offer keyboard shortcuts to links
– Fairfax County Public Library

33. Flexibility and Efficiency of Use
Allow users to view HTML pages instead of PDFs

34. Aesthetic and Minimalist Design
• Busy pages are difficult
for users with low-vision
and users with cognitive
disabilities
• Sentences should be
short 10-15 words
• Have smaller paragraphs
• Don’t bunch up
paragraphs together
• Proper color contrast

35. Checking for Color Contrast

36. Help and Documentation
• CaptionTube

37. Help and Documentation
Alt Tags
<img src=“Benjamin Franklin.jpg"
alt=“Portrait of Benjamin
Franklin." />

38. Checking for Accessibility
• Firefox Fangs
• Vizcheck
• WAVE

39. WAVE

40. WAVE

41. WAVE

42. WAVE

43. WAVE

44. ALWAYS CHECK WITH A SCREEN
READER

45. 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

46. Questions?