• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessibility Is Usability
 

Accessibility Is Usability

on

  • 260 views

 

Statistics

Views

Total Views
260
Views on SlideShare
246
Embed Views
14

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 14

http://www.christophercorrigan.com 12
http://christophercorrigan.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Accessibility Is Usability Accessibility Is Usability Presentation Transcript

  • Accessibility Is UsabilityASCLA Webinar May 31st, 2013
  • 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.
  • 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
  • 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.
  • 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)
  • 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
  • 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
  • <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 (e .keyCode == 27) {window.close () ; }}) ;Cunningham, Katie.Accessibility Handbook.
  • 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 a computer to answer.-e.g. What sport uses a hockey puck?– Accessibility handbook : making 508 websites for everyone» Cunningham, Katie
  • 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 image of a magnifyingglass may be intuitive to many users,users without a cultural history ofusing the magnifying glass to searchwould be confused
  • 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• Sentences should beshort 10-15 words• Have smaller paragraphs• Don’t bunch upparagraphs together• Proper color contrast
  • 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.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
  • Questions?