Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What Accessible Design Can Teach You About Responsive Design

1,342 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
  • Be the first to comment

  • Be the first to like this

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

×