BEAT THE
TSUNAMIWITH A WAVE
@PatrickDunphy
Who am I?
I work here I co-lead here
I live here
The RealBeginning
1999The
Beginning
My Accessibility Journey
ThePresent
Some ThingsYou don’t expect to learn
Not TaughtEducation & Awareness Necessary
Change NecessaryEveryone is Responsible
AccessibilityIt’s Good For You
TechnologyConstant Change
Accessibility...
Core Concept of Accessibility
It’s About PeopleAlways think about users needs
DIFFERENT
USERSDIFFERENT
NEEDS• Limited Mobility• Cognitive Challenges• Colour Blind• Seizure Disorders• Deaf / Hearing Impaired• Visually Impaired • Total Blindness
• Voice Interaction• Clear Defined Goals• Colour Contrast• Clean Animation• Closed Captions • Screen Magnification • Screen Readers
Accessibility Standards
AODA
WCAG 2.0
CVAASect
508
BS
8878ADA
ISO /iEC 40500
The Wrong Question
Not about if, it’s about when
The Silver Tsunami
• Fastest growing user group• 19% of USA by 2030• 4x likely to have disability• Experience = Expectations
Today’s GoalIntroduce free tools that are
easy to use and can be leveraged today.
AGENDA
1. Identify Issues2. Discover Test Tools 3. Sample Test Plan4. Testing Techniques
1. Accessibility Issues
General Issues
• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling the UX
Image Problems
• Misuse of alt text• Missing alt attributes• Charts and graphs• CSS images• Title attributes• Pictures of text
Content Issues
• Poor structure• Inappropriate markup• Source order• Absolute font sizes• Poor contrast• Inappropriate link text• Language undefined
2. Testing Tools
• Tools *assist* with evaluation• Identify *Potential* issues• Will not verify 100% accessible
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• Aviewer
My Personal Favourite - WAVE
Wave Features:• Results Summary• CSS Toggle• Contrast Summary• Document Outline• Target / Documentation• Code Inspector
USA Today.com | 34 Errors
ESPN.com | 36 Errors
NY Times.com | 61 Errors
CNN.com | 69 Errors
WEB Version toolbarApi
• Tools catch < 30% errors
• Keyboard Functionality• High Contrast Mode• Form Labels / Errors• Code Inspection
Accessibility Requires
Manual Testing
3. Sample Test Plan
10 Step Test Plan1. Compile UI2. Sanity Test3. Validate Code4. Apply Tools5. Test
Subjectivity6. Use Keyboard7. Use
Screenreader8. Verify Target9. User Testing10.Rinse &
Repeat
Compile UI1. Modules, containers,
templates, pages
2. Prioritize frequency & prominence
3. Include typically challenging elements for PWD’s
Sanity Test
No CSS & No Images
Does it still make sense?
Validate Code
Validate HTML & CSS
Catches errors bad for
Assistive Technology
Apply Tools
At least 2
Compare results
Eliminate false positives
Test Subjectivity
Judgement calls
Improve w/Experience
Use Keyboard
Most Important Test!
Gateway to Accessibility
Hardware & Software
Keyboard test everything!
Links & Buttons are only way to interact with a page** by default
Use Screenreader
... R E A D E R
Use Screenreader
• IE 8+ and latest JAWS
• Firefox and NVDA
• Chrome & ChromeVox
• VoiceOver and iOS/OSX
• Talkback on Android
Verify Target
Measure againstpredefined standard
i.e. WCAG 2.0 AA
User Testing
Involve Real People with Real Disabilities
PWD using AT will revealundiscovered issues
Include seniors
Rinse & Repeat
All Additions & Updates
Avoid Accessiblity Atrophy
4. Testing Techniques
1. Keyboard2. Headings 3. Images4. Links5. Forms
6. Colour7. CSS8. JavaScript9. Multimedia
Testable Items
KEYBOARD
Possible Tools:1. Keyboard2. Keyboard3. Keyboard
Keyboard Issues:• Logical Order• Focus Indicators• Consistent Behaviour• Bypass Blocks
The Pointerless Web http://weba.im/pointerlessweb
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
IMAGES
Possible Tools:• WAVE• High Contrast Mode• Web Dev Toolbar• Favlets
Image Issues:• Alt Attributes• Context + Function• Make sense w/o• Images of Text
Text Alternative Decision Tree http://weba.im/alternativetree
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
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
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
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
JavaScript
Possible Tools :• WAVE Toolbar• FireEyes• Manual Inspection
JavaScript Issues :• Dynamic Content • Inappropriate Use• Modals / Menus• Controlling the user Accessible JavaScript
http://webaim.org/techniques/javascript/
Multimedia
Tools to use:• Keyboard• Speakers• Visuals
Multimedia Issues :• Autoplay• Captioning• Transcripts• Keyboard Access
BBC Multimedia Standardshttp://weba.im/bbcmedia
Vast Majority of Issues
Keyboard or Visual Focus
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions (#a11y is your friend)
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
Final Words• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge
THANK YOU!
@PatrickDunphy
http://weba.im/psuweb14a11ytest
http://www.fundingexchange.org/news/0s-and-1s-the-tsunami-wave-of-change/http://webconference.psu.edu/http://sites.psu.edu/willamesbury/2013/09/13/beaver-stadium/http://www.yourleaf.org/blog/samantha-oneill/2013-04-22/dirty-hands-clean-planethttp://www.articlesweb.org/culture/neapolitan-ice-cream-origin-and-recipe-sourceshttp://agilemarketing.com.au/website-accessibility-and-usability-the-basics/http://www.lifeplus.com/us-en/product-category/vitamins-mineralshttp://chrisqueen.net/2011/04/19/from-newsreal-blog-bad-medicine/http://www.thatcutesite.com/kitten-doing-morning-exercises.htmlhttp://sciencefiction`.com/2013/12/31/bens-top-5-sciencefiction-com-movies-2013/http://motorburn.com/2014/03/icar-apple-makes-biggest-in-vehicle-play-yet-with-carplay/http://mackaycartoons.net/2013/08/20/tuesday-august-20-2013/http://www.archdaily.com/364518/the-architect-and-the-accessible-city-the-prize-winning-essay/http://www.relacoesinstitucionais.gov.br/http://magrabi.org/causes/magazine-for-the-blind/http://cheezburger.com/6788853248http://clickheretech.davegreenbaum.com/http://www.you-are-the-movement.com/?p=84http://hdfons.com/elmer-fudd/http://www.thatsyogarbage.com/metal-gear-rising-revengarbage/care-bears-caring-and-sharing-sm/http://www.picgifs.com/clip-art/spongebob/http://blog.kevineikenberry.com/influence/intention/improve-your-tomorrows-by-asking-one-question-today/
Photo Credits