Your SlideShare is downloading. ×
0
ACCESSIBILITY TESTING 101
@PatrickDunphy

|

World Usability Day
November 14, 2013
Transplanted
Newfoundlander

Proud
Daddy

Embarrasses wife
at hockey games
The
Beginning

The REAL
Beginning

The
Present
“The power of the web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”

Sir Ti...
Different users. Different needs.
• Closed Captions

• Meaningful Link Text
• Alternative Navigation
• Relative Sizing
• L...
Introduce

Free Testing Tools

That are available to
and are

Anyone

Easy To Use
•
•
•
•
•
•

Keyboard support
Sensory cues
Consistent navigation
No Context
Dynamic content
Controlling user
experience
•
•
•
•
•
•
•

Poor content structure
Inappropriate markup
Source order
Absolute font sizes
Poor contrast
Inappropriate li...
•
•
•
•
•
•

Misuse of alt text
Missing alt attributes
Charts and graphs
CSS images
Title attributes
Baked image text
(bra...
1. Compile UI components – modules,
containers, templates, pages
2. Prioritize frequency & prominence

3. Include elements...
1. Sanity Test w/o CSS & Images
2. Validate your code
3. Validate for Accessibility
• apply testing tools (at least 2) & v...
http://www.instra.com
http://weba.im/webdevtoolbar
http://validator.w3.org/
API
Web Version
Toolbar
• Provides different views
• Determine target goal
• Summarizes results
• Instant Documentation
• Code inspector
* Wave is...
14 errors
 181 alerts to verify
 83 contrast errors
 Style / No style
 Maps to target
 Show outline


http://wave.we...


526(!) errors



Evaluation includes
scripting



Firefox Toolbar only



Chrome release TBD

http://weba.im/toolbar
FANGS Toolbar


Useful quick test



Not a substitute for real
screen readers



Useful for headings & link
text

http:...
Accessibility Toolbar
•
•
•
•
•
•

Mulitple test types
Report generator
Navigation
Text Equivalents
Scripting
Uses other t...
JAWS

http://weba.im/jawsdemo

VoiceOver

NVDA

http://nvaccess.org
AODA

– Accessibility for Ontarians with Disabilities Act

WCAG 2.0

– Web Content Accessibility Guideline

BS 8878

– Bri...
Involve Real People with Real Disabilities
PWD using AT will reveal
undiscovered issues
Include Seniors
No silver bullet – only 25-30% of errors
Always requires manual testing
Subjective by nature
Won’t identify issues reveale...
Your keyboard
WAVE
Screen readers
FANGS plugin
WAT Toolbar (IE)
Colour Contrast Analyzer
FireEyes
Diagnostic.css
NoCoffee ...
• You are the most important testing tool
• Don't just say no, offer solutions
• Engage the community (befriend #a11y)

• ...
@PatrickDunphy
Accessibility testing   world usability day 2013 - mount royal university
Accessibility testing   world usability day 2013 - mount royal university
Upcoming SlideShare
Loading in...5
×

Accessibility testing world usability day 2013 - mount royal university

212

Published on

As an invited speaker for World Usability Day in 2013, these slides feature are an introduction to Accessibility Testing for students in the Mount Royal University information design program.

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

  • Be the first to like this

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

No notes for slide
  • Accessibility for Ontarians with Disabilities ActWeb Content Accessibility Guidelines – version 1 1999, version 2 2008 – now ISO standardBritish StandardsThe 21st Century Communications and Video Accessibility Act of 2010 
  • No longer an option of it it will apply to me, it’s when will it apply to me.Accessibility for Ontarians with Disabilities ActWeb Content Accessibility Guidelines – version 1 1999, version 2 2008 – now ISO standardBritish StandardsThe 21st Century Communications and Video Accessibility Act of 2010 
  • No longer an option of it it will apply to me, it’s when will it apply to me.Accessibility for Ontarians with Disabilities ActWeb Content Accessibility Guidelines – version 1 1999, version 2 2008 – now ISO standardBritish StandardsThe 21st Century Communications and Video Accessibility Act of 2010 
  • Transcript of "Accessibility testing world usability day 2013 - mount royal university"

    1. 1. ACCESSIBILITY TESTING 101 @PatrickDunphy | World Usability Day November 14, 2013
    2. 2. Transplanted Newfoundlander Proud Daddy Embarrasses wife at hockey games
    3. 3. The Beginning The REAL Beginning The Present
    4. 4. “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” Sir Tim Berners-Lee, Inventor of the WWW
    5. 5. Different users. Different needs. • Closed Captions • Meaningful Link Text • Alternative Navigation • Relative Sizing • Logical Content Order
    6. 6. Introduce Free Testing Tools That are available to and are Anyone Easy To Use
    7. 7. • • • • • • Keyboard support Sensory cues Consistent navigation No Context Dynamic content Controlling user experience
    8. 8. • • • • • • • Poor content structure Inappropriate markup Source order Absolute font sizes Poor contrast Inappropriate link text Language undefined
    9. 9. • • • • • • Misuse of alt text Missing alt attributes Charts and graphs CSS images Title attributes Baked image text (brand/logo exception)
    10. 10. 1. Compile UI components – modules, containers, templates, pages 2. Prioritize frequency & prominence 3. Include elements typically challenging for persons with disabilities. 4. Determine your target goal.
    11. 11. 1. Sanity Test w/o CSS & Images 2. Validate your code 3. Validate for Accessibility • apply testing tools (at least 2) & verify results • contrast/context/order/alternatives 4. Check keyboard Accessibility 5. Test with a screen reader 6. Verify against target goal 7. Conduct user testing 8. Rinse & Repeat
    12. 12. http://www.instra.com
    13. 13. http://weba.im/webdevtoolbar
    14. 14. http://validator.w3.org/
    15. 15. API Web Version Toolbar
    16. 16. • Provides different views • Determine target goal • Summarizes results • Instant Documentation • Code inspector * Wave is a tool to assist with evaluation, it’s not used to verify content is 100% accessible.
    17. 17. 14 errors  181 alerts to verify  83 contrast errors  Style / No style  Maps to target  Show outline  http://wave.webaim.org
    18. 18.  526(!) errors  Evaluation includes scripting  Firefox Toolbar only  Chrome release TBD http://weba.im/toolbar
    19. 19. FANGS Toolbar  Useful quick test  Not a substitute for real screen readers  Useful for headings & link text http://weba.im/fangs
    20. 20. Accessibility Toolbar • • • • • • Mulitple test types Report generator Navigation Text Equivalents Scripting Uses other tools http://weba.im/fae
    21. 21. JAWS http://weba.im/jawsdemo VoiceOver NVDA http://nvaccess.org
    22. 22. AODA – Accessibility for Ontarians with Disabilities Act WCAG 2.0 – Web Content Accessibility Guideline BS 8878 – British Standards CVAA – 21st Century Communications Video Accessibility Act Section 508 – US Federal Accessibility Law ADA – American’s with Disabilities Act
    23. 23. Involve Real People with Real Disabilities PWD using AT will reveal undiscovered issues Include Seniors
    24. 24. No silver bullet – only 25-30% of errors Always requires manual testing Subjective by nature Won’t identify issues revealed by real users with disabilities • Not one size fits all – different types of sites • • • •
    25. 25. Your keyboard WAVE Screen readers FANGS plugin WAT Toolbar (IE) Colour Contrast Analyzer FireEyes Diagnostic.css NoCoffee Plugin Firebug, Web Dev Toolbar High Contrast Mode http://www.webaim.org http://www.w3.org/WAI https://atutor.ca https://www.webaccessibility.com http://www.webaxe.org http://www.accessiq.org
    26. 26. • You are the most important testing tool • Don't just say no, offer solutions • Engage the community (befriend #a11y) • Don’t fear what you don’t know • BE A SPONGE • Share your knowledge
    27. 27. @PatrickDunphy
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×