What Accessible Design Can Teach You About Responsive Design with George Zamfir Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens In 2010 Ethan Marcotte coined responsive design for all of us to consume content on small (at first) devices without losing our eye-sight. He did not quite phrase it like that, even though he definitely addressed that. In 1808 Italian Pellegrino Turri designed a typewriter for Countess Carolina Fantoni da Fivizzano, his blind lover, to write him letters when he was away. That is accessible design, and it paved the way for responsive design in more than one way. We are now bashing mouse-only interactions because they don’t have a place in our responsive, touch-friendly new world. Except it never had a place in any world, accessibility guidelines have advocated for keyboard accessibility (the cornerstone to any accessible interface) long before responsive design – keyboard accessible = no mouse-only interactions = touch accessible. In this presentation, George Zamfir will show you how you can literally change your users’ lives with responsive design. He will discuss why accessible design is important and draw some surprising parallels between responsive and accessible design.

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

10. In my spare time...

11. SCREENS
Assistive Technologies

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

13. Responsive Web Design

14. Content matters more than design!

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

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

19. 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.

20. Accessibility (A11Y)

21. 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)

22. 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!

23. Accessibility (A11Y)
Who is more disabled?

24. Accessibility is not just about disability

25. 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...

26. “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

27. Accessibility (A11Y)
Accessibility is highly contextual

28. Accessibility (A11Y)
Web Accessibility

29. 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
•
•
•
•

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

31. 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

32. 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

33. 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.

34. 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?)
•
•
•
•

35. 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

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

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

38. 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.

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

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

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

42. 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.

43. A11Y -> RWD
Design for the edge cases

44. A11Y -> RWD
RWD Mobile-first

45. 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

46. 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

47. 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

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

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

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