1.
goodwally.ca !@good_wally
What
Accessible Design
can teach you about
Responsive Design
with George Zamfir

2.
goodwally.ca !@good_wally
RWD & A11Y = ♥

3.
SCREENS

4.
A different SCREEN: VoiceOver on
Mac

5.
A different SCREEN: ZoomText
10

6.
A different SCREEN: Dragon Naturally Speaking

7.
A different SCREEN: SIRI - Dragon - Nuance

8.
goodwally.ca !@good_wally
George Zamfir accessibility (A11Y) & responsive web design (RWD)
Toronto Accessibility and Inclusive Design - meetup.com/a11yTO
Toronto Accessibility Camp - accessibilitycampto.org (Nov 16)
Accessibility solutioneer at Good Wally - goodwally.ca
slideshare.net/georgezamfir
Accessibility consultant at Scotiabank

9.
In my spare time...

10.
SCREENS
Assistive Technologies

11.
Assistive Technologies
They don't care much about design!
OR they care to change it for the user!

12.
Responsive Web Design

13.
Content matters more than design!

14.
Yo, what’s wrong with this guy?

15.
not about the design!
about updating the design to bring out the content.
Responsive Web Design is

16.
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Users’ context is important
Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.

17.
Accessibility (A11Y)

18.
Accessibility (A11Y)
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)

19.
Accessibility (A11Y)
Disability: a new definition
What we should measure is what the
person can do, what their contribution
to society is.
By measuring people through the
disability lens we automatically focus on
what they’re not able to do!

20.
Accessibility (A11Y)
Who is more disabled?

21.
Accessibility is not just about disability

22.
I’ve heard some serious shit said in meetings:
“We don’t care about blind people.”
—Shithead McHorrible
Here’s some other things we don’t care about:
BlackBerries, Windows Phones, Poor people,
Androids, IE8, IE7, Definitely IE6, Colorblind
people, 7″ tablets, Firefox, Screen readers...

23.
“The power of the Web is in
its universality. Access
by everyone regardless
of disability is an
essential aspect.”
"The primary design principle underlying the Web’s
usefulness and growth is universality… It must

24.
Accessibility (A11Y)
Accessibility is highly contextual

25.
Accessibility (A11Y)
Web Accessibility

26.
Accessibility (A11Y)
Web Accessibility
Semantic markup
Does it work by keyboard alone?
Colour contrast & colour-blindness
Can I navigate with Dragon (voice command)
Recommendation: slideshare.net/billygeek/10-tips-in-10-minutes-devto-sept-30-2013
•
•
•
•

27.
Accessibility (A11Y)
Web Content Accessibility Guidelines (WCAG 2)
Covers a wide range of needs / disabilities
Developed by the W3C & numerous
experts
Set of 12 guidelines, technology agnostic
(not just HTML)
3 levels of conformance: A, AA, AAA
•
•
•
•

28.
Accessibility (A11Y)
Accessibility for Ontarians with Disabilities Act
(AODA)
5 standards in the Act
Information & Communication standard
•
•
ON Government:
All public & private > 50:
Level AA - 2012
Level A – 2014, AA – 2021

29.
Accessibility (A11Y)
Web Accessibility
“Web accessibility is building websites that
anybody can access, regardless of the device,
ability or assistive technologies - user context”
— George Zamfir

30.
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to users’ context
Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.

31.
A11Y -> RWD
Catering to users’ context (A11Y)
ability (Can he use a mouse? What if she only only one hand?)
environment (Office environment? Captions for noisy places?)
device (Mobile phone? Reading on glossy screens in the sun?)
assistive technology (Does it work with VoiceOver?)
•
•
•
•

32.
A11Y -> RWD
Catering to users’ context (RWD)
"… when on their mobile devices, people are often just “one
eyeball and one thumb”. They need clear, focused designs to
get things done—not lots of navigation options getting in
their way."
— LukeW,
alistapart.com/article/organizing-mobile

33.
A11Y -> RWD
Catering to users’ context (RWD)
uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?

34.
A11Y -> RWD
Catering to users’ context (RWD)

35.
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to users’ context ✓
Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.

36.
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
“Oh yes, it's keyboard accessible!
To open the menu press
Ctrl-Shift-Alt-F2-W-T-F!”

37.
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly

38.
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
<div> <select>

39.
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to users’ context ✓
Keyboard accessibility = touch-friendly ✓
Design for the edge cases (mobile-first
derivation)
1.
2.
3.
4.

40.
A11Y -> RWD
Design for the edge cases

41.
A11Y -> RWD
RWD Mobile-first

42.
A11Y -> RWD
Design for the edge cases (mobile-first)
320px 1920px
“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew.com/ff/entry.asp?554

43.
A11Y -> RWD
Design for the edge cases (A11Y)
320px
1920px
“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew.com/ff/entry.asp?554
accessibility

44.
goodwally.ca !@good_wally
A11Y was a champion for RWD
we have common goals for our users
What
Accessible Design can teach you about
Responsive Design

45.
goodwally.ca !@good_wally
Use your RWD knowledge to
get into A11Y!
What
Accessible Design can teach you about
Responsive Design

46.
goodwally.ca !@good_wally
What
Accessible Design
can teach you about
Responsive Design
Thank You!

47.
goodwally.ca !@good_wally
Q & A
or
Demos