How to Ship Accessible Web Products with George Zamfir Presented on September 18 2014 at FITC's Web Unleashed Toronto 2014 There are a lot of good reasons why we should ship accessible web products, including the legislative imperative. But how do we build them accessible and what does the development lifecycle look like? Who owns accessibility? In this talk, George Zamfir will present tried-and-tested strategies for designing, coding and testing accessibility. Whether you’re building web products for your clients or you represent an organization in need of accessible web products, this talk is for you. OBJECTIVE Get acquainted with accessibility, why it matters and how to make it happen. TARGET AUDIENCE Designers, developers, content strategists, testers; in general anyone who is involved in shipping web products. ASSUMED AUDIENCE KNOWLEDGE Web design and/or development FIVE THINGS AUDIENCE MEMBERS WILL LEARN What web accessibility is The legislative landscape Benefits of accessible web products Where accessibility fits in the project lifecycle Role-based accessibility

1. How to ship accessible web
products
with George Zamfir
george@goodwally.ca
#webu14 #a11y
! @good_wally goodwally.ca 

2. How to ship accessible web products
with George Zamfir
Toronto Accessibility and Inclusive Design - meetup.com/a11yTO
Toronto Accessibility Camp - accessibilitycampto.org (Sept 27, 2014)
Accessibility consultant at Scotiabank
Accessibility solutioneer at Good Wally - goodwally.ca
Accessibility specialist at Facebook
! @good_wally goodwally.ca 

3. 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)
Ship accessible web products

4. Assistive Technology: VoiceOver on Mac

5. Assistive Technology: ZoomText 10

6. Assistive Technology: Dragon Naturally Speaking

9. “Sorry dude, can’t buy coffee here.
It doesn’t work on you”

10. “Blind people don’t buy cameras. So, we don’t
make our commerce website accessible”

11. “Cut the green wire!!! Dude, I’m colour-blind”
ign.com/articles/2014/07/14/50-shades-of-game-gaming-with-colour-blindness

12. Study: visually impaired people on Facebook
dl.acm.org/citation.cfm?id=2557415
facebook.com/publications/1377160169199742

13. Accessibility for Ontarians with Disabilities Act
AODA - WCAG 2

14. AODA - Accessibility for Ontarians with Disabilities Act
5 Accessibility Standards ontario.ca/accessON
• Customer Service
• Information & Communications
• Employment
• Transportation
• Built Environment (not law yet)
Ship accessible web products
Integrated
Accessibility
Standards
Regulation

15. AODA - Accessibility for Ontarians with Disabilities Act
Ship accessible web products
ontario.ca/aodawizard

16. WCAG 2 - guidelines 101
Ship accessible web products
w3.org/WAI/intro/wcag
w3.org/WAI/WCAG20/quickref

17. WCAG 2
Principle
Guidelines
w3.org/TR/WCAG20/#keyboard-operation
!
w3.org/2009/cheatsheet/#wcag2

18. Top 5 tips for shipping
accessible web products

19. 1/ Different models, use the one that works for you
“done is better than perfect”
model
“all stars have to align”
model

20. New architecture for Fb iOS app
bit.ly/fb_ios_arch

21. 1/ Accessibility gets done differently in different places
Myth:
developers don’t like it / don’t want to do it

22. 2/ Accessibility is everyone’s job

23. 2/ Accessibility is everyone’s job
By Denis Boudreau: accessibiliteweb.com/presentations/2011/csun/a11y-lifecycle

25. 2/ Accessibility is everyone’s job
Mistake: mixing of roles

26. 2/ Accessibility is everyone’s job
Misconception: accessibility is hard

27. 3/ Start with high impact, easy wins

28. 3/ Start with high impact, easy wins
• add labels to form fields
• make navigation menus keyboard accessible
• improve the semantic structure of your markup
• replace the grey text on grey backgrounds
Ship accessible web products

29. Mistake:
starting with the hardest or low impact things OR both

30. 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.”

31. 4/ Set expectations & be realistic about the resolve
Mistake: we’ll just do it in phase 2

32. 5/ Don’t be afraid to piggyback on other initiatives

33. 5/ Don’t be afraid to piggyback on other initiatives
Mistake: a11y working in isolation

34. How to ship accessible web products
1/ 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
Ship accessible web products

35. Accessibility is innovation

36. Thank You!
! @good_wally goodwally.ca 