1. Getting Started with
Accessibility Testing
@PatrickDunphy
#CSUN14 Friday, March 21, 2014

2. Who am I?

3. I Work Here I Co-Lead Here

4. I Live Here

5. You may have heard of it...

6. Getting Started with
Accessibility Testing

7. MAYORAL CAGE MATCH
Forget Politics. Accessibility FTW!!!

8. HOW?
1. Identify Issues
2. Discover Test Tools
3. Manual Testing
4. Perform Tests
5. Determine Winner

9. WHY?
• It’s about people
• Information Source
• Gain Supporters
• Direct Communication
• AODA Legislation

10. • Limited Mobility
• Cognitive Challenges
• Colour Blind
• Seizure Disorders
• Deaf / Hearing Impaired
• Visually Impaired
• Total Blindness
DIFFERENT USERS DIFFERENTNEEDS
• Voice Interaction
• Clear Defined Goals
• Colour Contrast
• Clean Animation
• Closed Captions
• Screen Magnification
• Screen Readers

11. Sample Accessibility
Testing Toolkit
• WAVE
• FireEyes
• Web Developer Toolbar
• Functional Accessibility
Evaluator
• Juicy Studio Plugin
• Firebug / Code Inspector
• Fangs
• Web Accessibility
Toolbar (IE)
• Colour Contrast Analyzer
• Jim Thatcher Favlets

12. • Tools catch < 30% errors
• Keyboard Functionality
• High Contrast Mode
• Form Labels / Errors
• Code Inspection
Accessibility Requires
Manual Testing

13. 1. Keyboard
2. Headings
3. Images
4. Links
5. Forms
6. Colour
7. CSS
8. JavaScript
9. Multimedia
9 Rounds

14. Round 1
KEYBOARD

15. Possible Tools:
1. Keyboard
2. Keyboard
3. Keyboard
Keyboard Issues:
• Logical Order
• Focus Indicators
• Consistent Behaviour
• Bypass Blocks
The Pointerless Web
http://weba.im/pointerlessweb

16. KEYBOARD
Testing Demo

17. Round 1 Judges
Keyboard

18. Round 2
HEADINGS

19. Possible Tools:
• FAE (functional accessibility evaluator)
• Juicy Studio
• WAVE
• FANGS
Heading Issues:
• Site Structure
• Visual Indication
• Follow Hierarchy
• Used by AT
The HTML5 Document Outline
http://weba.im/headerfiction

20. Headings
Testing Demo

21. Round 2 Judges
Headings

22. Round 3
IMAGES

23. Possible Tools:
• WAVE
• High Contrast Mode
• Web Dev Toolbar
• Favlets
Image Issues:
• Alt Attributes
• Context + Function
• Make sense w/o
• Baked Text
Text Alternative Decision Tree
http://weba.im/alternativetree

24. Images
Testing Demo

25. Round 3 Judges
Images

26. Round 4
LINKS

27. Possible Tools:
• FAE (functional accessibility evaluator)
• Fangs
• Juicy Studio
Link Issues:
• Improper Markup
• Ambiguous Link Text
• Consistency
• Cognitive Load
Links & Hypertext
http://weba.im/linktext

28. Links
Testing Demo

29. Round 4 Judges
Links

30. Round 5
FORMS

31. Possible Tools :
• Keyboard
• Web Dev Toolbar
• Wave
Form Issues :
• Required Fields
• Logical Order
• Grouped Items
• Label : Input
• User Feedback
Improving the Accessibility of Forms
http://weba.im/canadaforms

32. Form
Testing Demo

33. Round 5 Judges
Forms

34. Round 6
COLOUR

35. Possible Tools :
1. Colour Contrast
Analyser
2. Juicy Studio
3. WAVE
Colour Issues :
• Insufficient Contrast
• Sole means of info
• Gradients
• Images / background
Colour Accessibility
http://weba.im/24color

36. Colour
Testing Demo

37. Round 6 Judges
Colour

38. Round 7
CSS

39. Possible Tools :
• Web Dev Toolbar
• WAVE
• WAT (IE)
CSS Issues :
• Logical Order
• Focus Indicators
• CSS Content
• Sprites
The Content CSS Property and Accessibility
http://weba.im/styleoversubstance

40. CSS
Testing Demo

41. Round 7 Judges
CSS

42. Round 8
JavaScript

43. Possible Tools :
• WAVE Toolbar
• FireEyes
JavaScript Issues :
• Dynamic Content
• Inappropriate Use
• Modals / Menus
• Controlling the user
Accessible JavaScript
http://webaim.org/techniques/javascript/

44. JavaScript
Testing Demo

45. Round 8 Judges
JavaScript

46. Round 9
Multimedia

47. Tools to use:
• Keyboard
• Speakers
• Visual
Multimedia Issues :
• Autoplay
• Captioning
• Transcripts
• Keyboard Access
BBC Multimedia Standards
http://weba.im/bbcmedia

48. Multimedia
Testing Demo

49. Round 9 Judges
Multimedia

50. My Personal Favourite - WAVE
Wave Features:
• Results Summary
• CSS Toggle
• Contrast Summary
• Document Outline
• Target / Documentation
• Code Inspector

51. And the Winner is...

52. 10 Step Test Plan
1. Compile UI
2. Sanity Test
3. Validate Code
4. Apply Tools
5. Test Subjectivity
6. Use Keyboard
7. Use Screenreader
8. Verify Target
9. User Testing
10. Rinse & Repeat

53. Links & Resources
• accessiq.org
• blog.paciellogroup.com
• html5accessibility.com
• dboudreau.tumblr.com
• deque.com/blog/top-web-accessibility-
resources
• simplyaccessible.com/archives
• w3.org/WAI
• webaccessibility.com
• webaim.org

54. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ENGAGE the community
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

55. Happy Testing!
@PatrickDunphy