goodwally.ca 🌎! @good_wally

How to ship accessible web products

with George Zamfirwith George Zamfir george@goodwally.ca

#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!!! Which one is that, 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/ Accessibility gets done differently in different places

“done is better than perfect” model

“all stars have to align” model

New architecture for Fb iOS app

bit.ly/fb_ios_arch

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

Accessibility is innovation

goodwally.ca 🌎! @good_wally

Thank You!