36
goodwally.ca @good_wally How to ship accessible web products with George Zamfir with George Zamfir [email protected] #webu14 #a11y
goodwally.ca 🌎 @good_wally
How to ship accessible web products
with George Zamfirwith George Zamfir [email protected]
#webu14 #a11y
goodwally.ca 🌎 @good_wally
Toronto Accessibility and Inclusive Design - meetup.com/a11yTO Toronto Accessibility Camp - accessibilitycampto.org (Sept 27, 2014)
Accessibility solutioneer at Good Wally - goodwally.ca
Accessibility consultant at Scotiabank
Accessibility specialist at Facebook
How to ship accessible web productswith George Zamfir
Ship accessible web products
Accessibility is about disability, riiiight?Visual low vision, colour-blindness, blindness Screen magnifiers, text-to-speech, refreshable braille
!
Auditory hearing loss, deafness Captions & transcripts, haptic feedback
!
Mobility dexterity, strength, loss of limb Speech-to-text, alternative input hardware
!
Cognitive & Speech dyslexia, ADD, lack of skills Word prediction, augmentative devices (hear & see)
Assistive Technology: VoiceOver on Mac
Assistive Technology: ZoomText 10
Assistive Technology: Dragon Naturally Speaking
“Sorry dude, can’t buy coffee here. It doesn’t work on you”
“Blind people don’t buy cameras. So, we don’t make our commerce website accessible”
“Cut the green wire!!! Dude, I’m colour-blind” ign.com/articles/2014/07/14/50-shades-of-game-gaming-with-colour-
blindness
dl.acm.org/citation.cfm?id=2557415 facebook.com/publications/1377160169199742
Study: visually impaired people on Facebook
AODA - WCAG 2
Accessibility for Ontarians with Disabilities Act
Ship accessible web products
AODA - Accessibility for Ontarians with Disabilities Act
Integrated Accessibility Standards Regulation
ontario.ca/accessON5 Accessibility Standards • Customer Service
• Information & Communications
• Employment
• Transportation
• Built Environment (not law yet)
Ship accessible web products
AODA - Accessibility for Ontarians with Disabilities Act
ontario.ca/aodawizard
Ship accessible web products
WCAG 2 - guidelines 101w3.org/WAI/intro/wcag
w3.org/WAI/WCAG20/quickref
Principle
Guidelines
w3.org/TR/WCAG20/#keyboard-operation !
w3.org/2009/cheatsheet/#wcag2
WCAG 2
Top 5 tips for shipping accessible web products
1/ Different models, use the one that works for you
“done is better than perfect” model
“all stars have to align” model
1/ Accessibility gets done differently in different places
Myth: developers don’t like it / don’t want to do it
2/ Accessibility is everyone’s job
2/ Accessibility is everyone’s job
By Denis Boudreau: accessibiliteweb.com/presentations/2011/csun/a11y-lifecycle
Mistake: mixing of roles
2/ Accessibility is everyone’s job
Misconception: accessibility is hard
2/ Accessibility is everyone’s job
3/ Start with high impact, easy wins
Ship accessible web products
• add labels to form fields
• make navigation menus keyboard accessible
• improve the semantic structure of your markup
• replace the grey text on grey backgrounds
3/ Start with high impact, easy wins
Mistake: starting with the hardest or low impact things OR both
4/ Set expectations & be realistic about the resolve
"We can make it accessible. And WCAG 2 AAAA compliant. And Section 508. W3C-validated. And ponies.”
4/ Set expectations & be realistic about the resolve
Mistake: we’ll just do it in phase 2
5/ Don’t be afraid to piggyback on other initiatives
5/ Don’t be afraid to piggyback on other initiatives
Mistake: a11y working in isolation
Ship accessible web products
How to ship accessible web products1/ Different accessibility models 2/ Accessibility is everyone’s job 3/ Start with high impact, easy wins 4/ Set expectations & be realistic 5/ Piggyback on other initiatives
Accessibility is innovation
