Incorporating Accessibility into your Usability Reviews

  • 36,783 views
Uploaded on

 

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Your message goes here
No Downloads

Views

Total Views
36,783
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Incorporating Accessibilityinto yourUsability ReviewsAngela Colter@angelacolter #a11ySTC Tech Comm Summit 2011
  • 2. )
  • 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. 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: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
  • 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. WCAG 2.0 http://www.w3.org/TR/WCAG20/Principle 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. 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. ImagesIs the same content / functionality conveyed withoutimages?Web developer toolbar Wave toolbarDisable images Text only
  • 9. FormsAre labels associated with form controls?Mouse Wave toolbarClick on label ) Errors, features and alerts
  • 10. Color contrastIs there sufficient contrast?Graybit )
  • 11. Color contrastIs there sufficient contrast?Paciello GroupColor Contrast Analyser )Check contrast ratioof foreground vs. background
  • 12. Color contrastIs there sufficient contrast?Snook.caColor Contrast Check )
  • 13. Link TextDoes link text make sense out of context?FangsLinks list )
  • 14. Text ResizeIs the page readable and functional when text size isdoubled?NoSquint )Set text zoom levelto 200%
  • 15. List of Tools Used WCAG 2 w3.org/WAI/WCAG20/quickref/ WebAIM WCAG 2 Checklist webaim.org/standards/wcag/checklist Firefox Web Developer Toolbar addons.mozilla.org/en-US/firefox/addon/60 WAVE Toolbar wave.webaim.org ) Paciello Group Color Contrast paciellogroup.com/resources/contrast-analyser.html AnalyserSnook.ca Color Contrast Check snook.ca/technical/colour_contrast/colour.html Fangs addons.mozilla.org/en-US/firefox/addon/402 NoSquint addons.mozilla.org/en-US/firefox/addon/2592 Firebug addons.mozilla.org/en-US/firefox/addon/1843
  • 16. Want more?Web: angelacolter.com/tools-for-conducting-an-accessibility-review/ )Email: acolter@electronicink.comTwitter: @angelacolter