Incorporating Accessibility into your Usability Reviews


Published on

Published in: Design, Technology
1 Comment
  • my sisters friend makes $69 every hour on the computer. She has been fired from work for 6 months but last month her income was $6626 just working on the computer for a few hours. Read about it here CashHard. com
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Incorporating Accessibility into your Usability Reviews

  1. 1. Incorporating Accessibilityinto yourUsability ReviewsAngela Colter@angelacolter #a11ySTC Tech Comm Summit 2011
  2. 2. )
  3. 3. Why bother?Because recommendations that solve the usability issuemay not solve the accessibility issue.Because this is an excellent opportunity, maybe the only )one, to bring attention to accessibility.
  4. 4. Types of disabilities Visual Disability Strategies Barriers Blindness Screen reader (output to Images with no alternative text, tables speech synthesizer or that don’t make sense when read serially, Braille display), text poorly labeled forms, illogical tab browser, voice browser sequence, lack of keyboard support for commands Low vision Large monitor, increase) Absolute font sizes, loss of context when font size, screen magnifier enlarged, poor contrast, text in images Color blindness Style sheet to override Poor contrast, using color only to indicate font and background color important information Hearing Disability Strategies Barriers Deafness and Captions, transcripts Lack of captions, lack of content-related hard-of-hearing images, lack of clear and simple languageSource:
  5. 5. Types of disabilitiesPhysical Disability Strategies BarriersMotor impairment Keyboard, specialized Time-limited response options, lack of mouse, head-mouse, support for keyboard alternatives to head-pointer or mouth- mouse commands, illogical tab order for stick, voice-recognition forms. software, eye-gaze system, chording )Dyslexia Getting information Lack of alternative modalities through several modalities at onceAttention deficit Turn off animations Distracting elements that cannot bedisorder turned off, lack of clear and consistent organizationSeizure disorders Turn off animations, Use of visual or audio frequencies that blinking text or audio can trigger seizures
  6. 6. WCAG 2.0 Guideline ExplanationPerceivable Text alternative Provide text alternatives for any non-text content Time-based media Provide alternatives for time-based media Adaptable Create content that can be presented in different ways without losing information or structure Distinguishable Make it easier for users to see and hear content )Operable Keyboard accessible Make all functionality available from a keyboard Enough time Provide users enough time to read and use content No seizures Don’t design content in a way known to cause seizures Navigable Provide ways to help users navigate, find content, and determine where they areUnderstandable Readable Make text content readable and understandable Predictable Make Web pages appear and operate in predictable ways Input assistance Help users avoid and correct mistakesRobust Compatible Maximize compatibility with user agents
  7. 7. Keyboard accessibleCan you do everything with the keyboard that youcan with a mouse?Can you see what has focus? )KeyboardTab through all links and form fieldsTrigger links
  8. 8. ImagesIs the same content / functionality conveyed withoutimages?Web developer toolbar Wave toolbarDisable images Text only
  9. 9. FormsAre labels associated with form controls?Mouse Wave toolbarClick on label ) Errors, features and alerts
  10. 10. Color contrastIs there sufficient contrast?Graybit )
  11. 11. Color contrastIs there sufficient contrast?Paciello GroupColor Contrast Analyser )Check contrast ratioof foreground vs. background
  12. 12. Color contrastIs there sufficient contrast?Snook.caColor Contrast Check )
  13. 13. Link TextDoes link text make sense out of context?FangsLinks list )
  14. 14. Text ResizeIs the page readable and functional when text size isdoubled?NoSquint )Set text zoom levelto 200%
  15. 15. List of Tools Used WCAG 2 WebAIM WCAG 2 Checklist Firefox Web Developer Toolbar WAVE Toolbar ) Paciello Group Color Contrast Color Contrast Check Fangs NoSquint Firebug
  16. 16. Want more?Web: )Email: acolter@electronicink.comTwitter: @angelacolter