goodwally.ca !@good_wally
What
Accessible Design
can teach you about
Responsive Design
with George Zamfir
goodwally.ca !@good_wally
RWD & A11Y = ♥
SCREENS
A different SCREEN: VoiceOver on
Mac
A different SCREEN: ZoomText
10
A different SCREEN: Dragon Naturally Speaking
A different SCREEN: SIRI - Dragon - Nuance
goodwally.ca !@good_wally
George Zamfir accessibility (A11Y) & responsive web design (RWD)
Toronto Accessibility and Inclu...
In my spare time...
SCREENS
Assistive Technologies
Assistive Technologies
They don't care much about design!
OR they care to change it for the user!
Responsive Web Design
Content matters more than design!
Yo, what’s wrong with this guy?
not about the design!
about updating the design to bring out the content.
Responsive Web Design is
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Users’ context...
Accessibility (A11Y)
Accessibility (A11Y)
Accessibility is about disability, riiiight?
Visual low vision, colour-blindness, blindness
Screen ma...
Accessibility (A11Y)
Disability: a new definition
What we should measure is what the
person can do, what their contributio...
Accessibility (A11Y)
Who is more disabled?
Accessibility is not just about disability
I’ve heard some serious shit said in meetings:
“We don’t care about blind people.”
—Shithead McHorrible
Here’s some other ...
“The power of the Web is in
its universality. Access
by everyone regardless
of disability is an
essential aspect.”
"The pr...
Accessibility (A11Y)
Accessibility is highly contextual
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Semantic markup
Does it work by keyboard alone?
Colour contrast & colour-blindness
...
Accessibility (A11Y)
Web Content Accessibility Guidelines (WCAG 2)
Covers a wide range of needs / disabilities
Developed b...
Accessibility (A11Y)
Accessibility for Ontarians with Disabilities Act
(AODA)
5 standards in the Act
Information & Communi...
Accessibility (A11Y)
Web Accessibility
“Web accessibility is building websites that
anybody can access, regardless of the ...
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to us...
A11Y -> RWD
Catering to users’ context (A11Y)
ability (Can he use a mouse? What if she only only one hand?)
environment (O...
A11Y -> RWD
Catering to users’ context (RWD)
"… when on their mobile devices, people are often just “one
eyeball and one t...
A11Y -> RWD
Catering to users’ context (RWD)
uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
A11Y -> RWD
Catering to users’ context (RWD)
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to us...
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
“Oh yes, it's keyboard accessible!
To open the menu press
Ctrl-Shift-A...
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
<div> <select>
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
Design matters not, content does ✓
Catering to us...
A11Y -> RWD
Design for the edge cases
A11Y -> RWD
RWD Mobile-first
A11Y -> RWD
Design for the edge cases (mobile-first)
320px 1920px
“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://w...
A11Y -> RWD
Design for the edge cases (A11Y)
320px
1920px
“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew...
goodwally.ca !@good_wally
A11Y was a champion for RWD
we have common goals for our users
What
Accessible Design can teach ...
goodwally.ca !@good_wally
Use your RWD knowledge to
get into A11Y!
What
Accessible Design can teach you about
Responsive D...
goodwally.ca !@good_wally
What
Accessible Design
can teach you about
Responsive Design
Thank You!
goodwally.ca !@good_wally
Q & A
or
Demos
What Accessible Design Can Teach You About Responsive Design
What Accessible Design Can Teach You About Responsive Design
What Accessible Design Can Teach You About Responsive Design
Upcoming SlideShare
Loading in …5
×

What Accessible Design Can Teach You About Responsive Design

1,248 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,248
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

What Accessible Design Can Teach You About Responsive Design

  1. 1. goodwally.ca !@good_wally What Accessible Design can teach you about Responsive Design with George Zamfir
  2. 2. goodwally.ca !@good_wally RWD & A11Y = ♥
  3. 3. SCREENS
  4. 4. A different SCREEN: VoiceOver on Mac
  5. 5. A different SCREEN: ZoomText 10
  6. 6. A different SCREEN: Dragon Naturally Speaking
  7. 7. A different SCREEN: SIRI - Dragon - Nuance
  8. 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. 9. In my spare time...
  10. 10. SCREENS Assistive Technologies
  11. 11. Assistive Technologies They don't care much about design! OR they care to change it for the user!
  12. 12. Responsive Web Design
  13. 13. Content matters more than design!
  14. 14. Yo, what’s wrong with this guy?
  15. 15. not about the design! about updating the design to bring out the content. Responsive Web Design is
  16. 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. 17. Accessibility (A11Y)
  18. 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. 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. 20. Accessibility (A11Y) Who is more disabled?
  21. 21. Accessibility is not just about disability
  22. 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. 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. 24. Accessibility (A11Y) Accessibility is highly contextual
  25. 25. Accessibility (A11Y) Web Accessibility
  26. 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. 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. 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. 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. 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. 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. 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. 33. A11Y -> RWD Catering to users’ context (RWD) uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
  34. 34. A11Y -> RWD Catering to users’ context (RWD)
  35. 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. 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. 37. A11Y -> RWD Keyboard Accessibility = Touch-Friendly
  38. 38. A11Y -> RWD Keyboard Accessibility = Touch-Friendly <div> <select>
  39. 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. 40. A11Y -> RWD Design for the edge cases
  41. 41. A11Y -> RWD RWD Mobile-first
  42. 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. 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. 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. 45. goodwally.ca !@good_wally Use your RWD knowledge to get into A11Y! What Accessible Design can teach you about Responsive Design
  46. 46. goodwally.ca !@good_wally What Accessible Design can teach you about Responsive Design Thank You!
  47. 47. goodwally.ca !@good_wally Q & A or Demos

×