Getting Started with Accessibility Testing
@PatrickDunphy#CSUN14 Friday, March 21,
2014
Who am I?
I Work Here I Co-Lead Here
I Live Here
You may have heard of it...
Getting Started with Accessibility
Testing
MAYORAL CAGE MATCH
Forget Politics. Accessibility FTW!!!
HOW?1. Identify Issues2. Discover Test Tools 3. Manual Testing4. Perform Tests5. Determine Winner
WHY?• It’s about people• Information Source• Gain Supporters• Direct Communication• AODA Legislation
• Limited Mobility• Cognitive Challenges• Colour Blind• Seizure Disorders• Deaf / Hearing Impaired• Visually Impaired • Total Blindness
DIFFERENT
USERSDIFFERENT
NEEDS• Voice Interaction• Clear Defined Goals• Colour Contrast• Clean Animation• Closed Captions • Screen Magnification • Screen Readers
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
• Tools catch < 30% errors
• Keyboard Functionality• High Contrast Mode• Form Labels / Errors• Code Inspection
Accessibility Requires
Manual Testing
1. Keyboard2. Headings 3. Images4. Links5. Forms6. Colour7. CSS8. JavaScript9. Multimedia
9 Rounds
Round 1
KEYBOARD
Possible Tools:1. Keyboard2. Keyboard3. Keyboard
Keyboard Issues:• Logical Order• Focus Indicators• Consistent Behaviour• Bypass BlocksThe Pointerless Web
http://weba.im/pointerlessweb
KEYBOARDTesting Demo
Round 1 JudgesKeyboard
Round 2
HEADINGS
Possible Tools:• FAE (functional accessibility evaluator)
• Juicy Studio• WAVE• FANGS
Heading Issues:• Site Structure• Visual Indication• Follow Hierarchy• Used by AT
The HTML5 Document Outlinehttp://weba.im/headerfiction
HeadingsTesting Demo
Round 2 JudgesHeadings
Round 3
IMAGES
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
ImagesTesting Demo
Round 3 JudgesImages
Round 4
LINKS
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
LinksTesting Demo
Round 4 JudgesLinks
Round 5
FORMS
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
FormTesting Demo
Round 5 JudgesForms
Round 6
COLOUR
Possible Tools :1. Colour Contrast
Analyser2. Juicy Studio 3. WAVE
Colour Issues :• Insufficient Contrast• Sole means of info• Gradients• Images / background
Colour Accessibilityhttp://weba.im/24color
ColourTesting Demo
Round 6 JudgesColour
Round 7
CSS
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
CSSTesting Demo
Round 7 JudgesCSS
Round 8
JavaScript
Possible Tools :• WAVE Toolbar• FireEyes
JavaScript Issues :• Dynamic Content • Inappropriate Use• Modals / Menus• Controlling the user Accessible JavaScript
http://webaim.org/techniques/javascript/
JavaScriptTesting Demo
Round 8 JudgesJavaScript
Round 9
Multimedia
Tools to use:• Keyboard• Speakers• Visual
Multimedia Issues :• Autoplay• Captioning• Transcripts• Keyboard Access
BBC Multimedia Standardshttp://weba.im/bbcmedia
MultimediaTesting Demo
Round 9 JudgesMultimedia
My Personal Favourite - WAVE
Wave Features:• Results Summary• CSS Toggle• Contrast Summary• Document Outline• Target / Documentation• Code Inspector
And the Winner is...
10 Step Test Plan1. Compile UI2. Sanity Test3. Validate Code4. Apply Tools5. Test
Subjectivity6. Use Keyboard7. Use
Screenreader8. Verify Target9. User Testing10.Rinse &
Repeat
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
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
Happy Testing!
@PatrickDunphy