Intro to
Accessibility
TESTING

@patrickdunphy | #a11ycampdc | OCTOBER 12, 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.”
(No off...
Dr. Zhang Xu
• Orthopedic surgeon
• Life changing incident

• Chinese Disabled Activist
“If anybody asks me what the Inter...
Introduce Free

Testing Tools

That are available to Anyone
and are Easy

To Use
Different user needs
 Larger audience reach
 Be social responsible
 Aids usability
 Better & more maintainable
code
 ...
• 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 link ...
• Misuse of alt text
• Missing alt attributes
• Charts and graphs
• CSS images
• Title attributes
• Baked image text
(bran...
• Responsive aids
Accessibility
• Different devices
handle content
differently
• Needs to be planned
accordingly
1. Compile UI components – modules,
containers, templates, pages
2. Prioritize frequency & prominence

3. Include elements...
1.
2.
3.

4.
5.
6.
7.
8.

Sanity Test w/o CSS & Images
Validate your code
Validate for Accessibility
• apply testing tools...
API
Web Version
Toolbar
• Provides different views
• Determine target goal
• Summarizes results
• instant Documentation
• Code inspector
* Wave is...
76 errors
 191 alerts to verify
 30 contrast errors
 Style / No style
 Maps to WCAG
 Show outline


http://wave.weba...
• Currently firefox only (ChromeTBD)
• Evaluation includes scripting

http://wave.webaim.org/toolbar


45 errors



10 headers all h1

http://wave.webaim.org/toolbar
• V.1 released in March 2013

• Minimal cost ($0.04 - $0.025 / credit)
• XML / JSON
• Stand-alone Beta (Mac/Windows/Linux)...


Not a substitute for
real screen readers



Useful for headings &
link text

https://addons.mozilla.org/en-us/firefox/...
• No silver bullet – only 25-30% of errors
• Always requires manual testing
• Subjective by nature
• Won’t identify issues...
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
(#a11y is your frien...
@PatrickDunphy
November 16, 2013
OCAD UNIVERSITY
Toronto, Ontario, Canada
Register Online
http://www.AccessibilityCampTo.org
Intro to Accessibility Testing (with non-commercial tool)
Intro to Accessibility Testing (with non-commercial tool)
Intro to Accessibility Testing (with non-commercial tool)
Intro to Accessibility Testing (with non-commercial tool)
Upcoming SlideShare
Loading in...5
×

Intro to Accessibility Testing (with non-commercial tool)

294

Published on

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

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
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 
  • Transcript of "Intro to Accessibility Testing (with non-commercial tool)"

    1. 1. Intro to Accessibility TESTING @patrickdunphy | #a11ycampdc | OCTOBER 12, 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.” (No offense TimBL!) - Sir Tim Berners Lee
    5. 5. Dr. Zhang Xu • Orthopedic surgeon • Life changing incident • Chinese Disabled Activist “If anybody asks me what the Internet means to me, I will tell him without hesitation: To me (a quadriplegic) the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world; it is my hands which help me to accomplish my work; it is my best friend - it gives my life meaning.”
    6. 6. Introduce Free Testing Tools That are available to Anyone and are Easy To Use
    7. 7. Different user needs  Larger audience reach  Be social responsible  Aids usability  Better & more maintainable code  Search engines benefits  Good publicity, avoid legal fees & bad press 
    8. 8. • Keyboard support • Sensory cues • Consistent navigation • No Context • Dynamic content • Controlling user experience
    9. 9. • Poor content structure • Inappropriate markup • Source order • Absolute font sizes • Poor contrast • Inappropriate link text • Language undefined
    10. 10. • Misuse of alt text • Missing alt attributes • Charts and graphs • CSS images • Title attributes • Baked image text (brand/logo exception)
    11. 11. • Responsive aids Accessibility • Different devices handle content differently • Needs to be planned accordingly
    12. 12. 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.
    13. 13. 1. 2. 3. 4. 5. 6. 7. 8. Sanity Test w/o CSS & Images Validate your code Validate for Accessibility • apply testing tools (at least 2) & verify results • contrast/context/order/alternatives Check keyboard Accessibility Test with a screen reader (JAWS, NDVA, VoiceOver) Check against WCAG 2.0 Conduct user testing Rinse & Repeat
    14. 14. API Web Version Toolbar
    15. 15. • 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.
    16. 16. 76 errors  191 alerts to verify  30 contrast errors  Style / No style  Maps to WCAG  Show outline  http://wave.webaim.org
    17. 17. • Currently firefox only (ChromeTBD) • Evaluation includes scripting http://wave.webaim.org/toolbar
    18. 18.  45 errors  10 headers all h1 http://wave.webaim.org/toolbar
    19. 19. • V.1 released in March 2013 • Minimal cost ($0.04 - $0.025 / credit) • XML / JSON • Stand-alone Beta (Mac/Windows/Linux) • Spider, URL Manager, Scheduler, etc. http://wave.webaim.org/api
    20. 20.  Not a substitute for real screen readers  Useful for headings & link text https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/
    21. 21. • 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
    22. 22. 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
    23. 23. • You are the most important testing tool • Don't just say no, offer solutions • Engage the community (#a11y is your friend) • Don’t fear what you don’t know • BE A SPONGE • Share your knowledge
    24. 24. @PatrickDunphy
    25. 25. November 16, 2013 OCAD UNIVERSITY Toronto, Ontario, Canada Register Online http://www.AccessibilityCampTo.org
    1. A particular slide catching your eye?

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

    ×