What Accessible Design Can Teach You About Responsive Design
1 like1,504 views
The document discusses the connection between accessibility (a11y) and responsive web design (rwd), emphasizing that content should take precedence over design while catering to diverse user contexts. It highlights the importance of keyboard accessibility and the need for designs that accommodate assistive technologies and various devices. Furthermore, it encourages designers to align their a11y practices with rwd principles to ensure that web content is universally accessible.
What Accessible Design Can Teach You About Responsive 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...
- 12. Assistive Technologies They don't care much about design! OR they care to change it for the user!
- 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.
- 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
- 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