goodwally.ca 🌎 @good_wally
What
Accessible Design
can teach you about
Responsive Design
with George Zamfir
SCREENS
A different SCREEN: SIRI - Dragon - Nuance
goodwally.ca 🌎 @good_wally
George Zamfir accessibility (A11Y) & responsive web design (RWD)
Toronto Accessibility and Inc...
In my spare time...
SCREENS
Assistive Technologies
Assistive Technologies
They don't care much about design!
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!
Responsive Web Design is
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
1. Design matters not, content does ✓
2. Users’ c...
Accessibility (A11Y)
Accessibility (A11Y)
Accessibility is about disability, riiiight?
Visual low vision, colour-blindness, blindness
Screen ma...
Accessibility (A11Y)
By measuring people through the
disability lens we automatically focus on
what they’re not able to do!
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 ...
Next time you find yourself intentionally
depriving someone an experience... picture
yourself standing in front of that pe...
“The products / services we sell on our
website are not for blind people.
So, blind people don’t visit our website!”
“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)
Accessibility is highly contextual
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
Web Accessibility
• Semantic markup
• Does it work by keyboard alone?
• Colour contrast & colour-blin...
Accessibility (A11Y)
Web Content Accessibility Guidelines (WCAG 2)
• Covers a wide range of needs / disabilities
• Develop...
Accessibility (A11Y)
Accessibility for Ontarians with Disabilities Act (AODA)
• 5 standards in the Act
• Information & Com...
Accessibility (A11Y)
Web Accessibility
“Web accessibility is building websites that
anybody can access, regardless of the ...
RWD - The Details
RWD - The Details
Fluid Foundation
flexible layout that uses relative sizing (no fixed widths)
Media Queries
target media ...
RWD - The Details
RWD - Fluid Foundation
RWD - Fluid Foundation
Declare percentage (%) or ratio (em) widths
instead of absolute values (px)
in order to adapt to th...
Text
RWD - The Viewport
RWD - The Viewport
... to adapt to the size of the viewport.
meta
name = "viewport"
content = “
width = device-width,
init...
RWD - Media Queries
<link
rel=”stylesheet”
href="layoutPrint.css"
media="print"
/>
RWD - The Details
RWD - Media Queries
<link
rel=”stylesheet”
href="layout.css"
media="screen and (min-width: 400px)"
/>
@media screen and (m...
RWD - Media Queries
RWD - The Details
RWD - Media Queries
RWD - The Details
RWD - Media Queries
CSS 2.1 - media types (e.g. screen, print, etc.)
<link href="style.css"... media="screen" />
<link hre...
RWD - Media Queries
Use ems instead of pxs in media queries!
@media screen and (max-width: 30em) {
// mobile styles here
}...
RWD - Media Queries
(device resolution) device-width
vs
(browser / app resolution) width
device-width is fixed regardless ...
RWD - The Details
RWD - Responsive Images
RWD - Responsive Images
How do you make fixed-width elements (i.e. images) work with your
awesome fluid layouts?
img {
max...
RWD - The Details
RWD - Responsive Images
New problem
RWD - The Details
RWD - Responsive Images
No HTML-based solution
RWD - The Details
RWD - Responsive Images
Solutions:
Image Optimization
Scalable Vector Graphics (SVG)
Icon Fonts - css-tr...
RWD - The Details
RWD - Responsive Images
Solutions:
Image Optimization
Scalable Vector Graphics (SVG)
Icon Fonts - css-tr...
46.7 kb
103.3 kb
Image Optimizations
46.7 kb
103.3 kb
Image Optimizations
Scalable Vector Graphics (SVG)
Icon Fonts
 
W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under ...
W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under ...
Image replacement with picturefill.js
github.com/scottjehl/picturefill
RWD under the hood
Let’s see it in action!
Media Queries - (background) images replacement
Display different sizes of the image with media queries!
<div id="test5"><...
RWD - The Details
RWD - Responsive Images
adaptive-images.com
filamentgroup.com/lab/rwd_img_compression
cloudfour.com/exam...
RWD - The Details
RWD - Summary
Fluid Foundation + Media Queries + Responsive Images
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
1. Design matters not, content does ✓
2. Catering...
A11Y -> RWD
Catering to users’ context (A11Y)
A11Y -> RWD
Catering to users’ context (A11Y)
• ability (Can he use a mouse? What if she only only one hand?)
• environmen...
A11Y -> RWD
Catering to users’ context (RWD)
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
Catering to users’ context (RWD)
A11Y -> RWD
Catering to users’ context (RWD)
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
1. Design matters not, content does ✓
2. Catering...
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
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
<div> <select>
A11Y -> RWD
What
Accessible Design can teach you about
Responsive Design
1. Design matters not, content does ✓
2. Catering...
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”	
...
A11Y -> RWD
Design for the edge cases (A11Y)
320px
1920px
“4-­‐part	
  series:	
  Design	
  for	
  the	
  Edges”	
  by	
  ...
goodwally.ca 🌎 @good_wally
A11Y was a champion for RWD
we have common goals for our users
What
Accessible Design can teac...
goodwally.ca 🌎 @good_wally
Use your RWD knowledge to
get into A11Y!
What
Accessible Design can teach you about
Responsive...
goodwally.ca 🌎 @good_wally
What
Accessible Design
can teach you about
Responsive Design
Thank You!
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
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
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
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
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
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
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

2,592

Published on

Accessibility questions? Get in contact: george@goodwally.ca.

This presentation was delivered at:
- FITC Screens 2013 in Toronto, Canada on October 4, 2013
- CSUN in San Diego, March 2014

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

A prequel to this talk: http://bit.ly/rwd_a11y + podcast: http://bit.ly/rwd_a11y_podcast

Published in: Technology, Design, Business

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. SCREENS
  3. 3. A different SCREEN: SIRI - Dragon - Nuance
  4. 4. 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
  5. 5. In my spare time...
  6. 6. SCREENS Assistive Technologies
  7. 7. Assistive Technologies They don't care much about design!
  8. 8. Assistive Technologies They don't care much about design! OR they care to change it for the user!
  9. 9. Responsive Web Design
  10. 10. Content matters more than design!
  11. 11. Yo, what’s wrong with this guy?
  12. 12. not about the design! Responsive Web Design is
  13. 13. not about the design! about updating the design to bring out the content. Responsive Web Design is
  14. 14. A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Users’ context is important 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  15. 15. Accessibility (A11Y)
  16. 16. 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)
  17. 17. Accessibility (A11Y) By measuring people through the disability lens we automatically focus on what they’re not able to do!
  18. 18. Accessibility (A11Y) Disability: a new definition What we should measure is what the person can do, what their contribution to society is.
  19. 19. Accessibility (A11Y) Who is more disabled?
  20. 20. Accessibility is not just about disability
  21. 21. 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...
  22. 22. Next time you find yourself intentionally depriving someone an experience... picture yourself standing in front of that person in real life, looking them square in the eyes, then firmly and definitively saying “Fuck you.” — Brad Frost, bradfrostweb.com/blog/post/fuck-you
  23. 23. “The products / services we sell on our website are not for blind people. So, blind people don’t visit our website!”
  24. 24. “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 work with any form of information [...] from a silly tweet to a scholarly paper. “ - Tim Berners-Lee
  25. 25. Accessibility (A11Y) Accessibility is highly contextual
  26. 26. Accessibility (A11Y) Accessibility is highly contextual
  27. 27. Accessibility (A11Y) Web Accessibility
  28. 28. Accessibility (A11Y) Web Accessibility
  29. 29. Accessibility (A11Y) Web Accessibility
  30. 30. Accessibility (A11Y) Web Accessibility
  31. 31. Accessibility (A11Y) Web Accessibility
  32. 32. Accessibility (A11Y) Web Accessibility
  33. 33. 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
  34. 34. 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 • De-facto standard for accessibility compliance • Legislated in many countries, including Canada
  35. 35. 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
  36. 36. 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
  37. 37. RWD - The Details
  38. 38. RWD - The Details Fluid Foundation flexible layout that uses relative sizing (no fixed widths) Media Queries target media types and media features Responsive Images relative widths (CSS) and / or dynamic replacement (JS)
  39. 39. RWD - The Details RWD - Fluid Foundation
  40. 40. RWD - Fluid Foundation Declare percentage (%) or ratio (em) widths instead of absolute values (px) in order to adapt to the size of the viewport. section { margin: 0.5em; width: 75%; height: 10em; } RWD - The Details
  41. 41. Text RWD - The Viewport
  42. 42. RWD - The Viewport ... to adapt to the size of the viewport. meta name = "viewport" content = “ width = device-width, initial-scale = 1 “ developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/ UsingtheViewport.html RWD - The Details
  43. 43. RWD - Media Queries <link rel=”stylesheet” href="layoutPrint.css" media="print" /> RWD - The Details
  44. 44. RWD - Media Queries <link rel=”stylesheet” href="layout.css" media="screen and (min-width: 400px)" /> @media screen and (min-width: 30em) { // mobile styles here } RWD - The Details
  45. 45. RWD - Media Queries RWD - The Details
  46. 46. RWD - Media Queries RWD - The Details
  47. 47. RWD - Media Queries CSS 2.1 - media types (e.g. screen, print, etc.) <link href="style.css"... media="screen" /> <link href="stylePrint.css"... media="print" /> CSS 3 - media queries with features: @media screen and (min-width: 30em) { // mobile styles here } width, height, max-/min-width, max-/min-height, device-height, orientation, aspect-ratio, resolution RWD - The Details
  48. 48. RWD - Media Queries Use ems instead of pxs in media queries! @media screen and (max-width: 30em) { // mobile styles here } Your users will thank you (when zooming in on desktop browsers) Let’s see why RWD - The Details
  49. 49. RWD - Media Queries (device resolution) device-width vs (browser / app resolution) width device-width is fixed regardless of the device orientation! iPhone 4: device-width = 320px width = 640px 1 CSS px = 2 device px RWD - The Details
  50. 50. RWD - The Details RWD - Responsive Images
  51. 51. RWD - Responsive Images How do you make fixed-width elements (i.e. images) work with your awesome fluid layouts? img { max-width: 100%; height: auto; } Make images resize with the layout. Also, it’s much more easier to maintain. RWD - The Details
  52. 52. RWD - The Details RWD - Responsive Images New problem
  53. 53. RWD - The Details RWD - Responsive Images No HTML-based solution
  54. 54. RWD - The Details RWD - Responsive Images Solutions: Image Optimization Scalable Vector Graphics (SVG) Icon Fonts - css-tricks.com/examples/IconFont New HTML element - www.responsiveimages.org Image replacement with polyfills -- picturefill.js Media Queries - (background) image replacement
  55. 55. RWD - The Details RWD - Responsive Images Solutions: Image Optimization Scalable Vector Graphics (SVG) Icon Fonts - css-tricks.com/examples/IconFont New HTML element - www.responsiveimages.org Image replacement with polyfills -- picturefill.js Media Queries - (background) image replacement Unfortunately, there is no “one size fits all” solution!
  56. 56. 46.7 kb 103.3 kb Image Optimizations
  57. 57. 46.7 kb 103.3 kb Image Optimizations
  58. 58. Scalable Vector Graphics (SVG)
  59. 59. Icon Fonts  
  60. 60. W3C “Responsive Images Community Group” responsiveimages.org w3.org/community/respimg New HTML element proposal RWD under the hood
  61. 61. W3C “Responsive Images Community Group” responsiveimages.org w3.org/community/respimg New HTML element proposal RWD under the hood
  62. 62. Image replacement with picturefill.js github.com/scottjehl/picturefill RWD under the hood Let’s see it in action!
  63. 63. Media Queries - (background) images replacement Display different sizes of the image with media queries! <div id="test5"></div> @media all and (max-width: 600px) { #test5 { background-image:url('images/test5-mobile.png'); } } @media all and (min-width: 601px) { #test5 { background-image:url('images/test5-desktop.png'); } } RWD under the hood
  64. 64. RWD - The Details RWD - Responsive Images adaptive-images.com filamentgroup.com/lab/rwd_img_compression cloudfour.com/examples/mediaqueries/image-test timkadlec.com/2012/04/media-query-asset-downloading-results css-tricks.com/which-responsive-images-solution-should-you-use Further reading / resources
  65. 65. RWD - The Details RWD - Summary Fluid Foundation + Media Queries + Responsive Images
  66. 66. A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  67. 67. A11Y -> RWD Catering to users’ context (A11Y)
  68. 68. 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?)
  69. 69. A11Y -> RWD Catering to users’ context (RWD)
  70. 70. 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
  71. 71. A11Y -> RWD Catering to users’ context (RWD) uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
  72. 72. A11Y -> RWD Catering to users’ context (RWD)
  73. 73. A11Y -> RWD Catering to users’ context (RWD)
  74. 74. A11Y -> RWD Catering to users’ context (RWD)
  75. 75. A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context ✓ 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  76. 76. A11Y -> RWD Keyboard Accessibility = Touch-Friendly “Oh yes, it's keyboard accessible! To open the menu press Ctrl-Shift-Alt-F2-W-T-F!”
  77. 77. A11Y -> RWD Keyboard Accessibility = Touch-Friendly
  78. 78. A11Y -> RWD Keyboard Accessibility = Touch-Friendly
  79. 79. A11Y -> RWD Keyboard Accessibility = Touch-Friendly <div> <select>
  80. 80. A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context ✓ 3. Keyboard accessibility = touch-friendly ✓ 4. Design for the edge cases (mobile-first derivation)
  81. 81. A11Y -> RWD Design for the edge cases
  82. 82. A11Y -> RWD RWD Mobile-first
  83. 83. A11Y -> RWD Design for the edge cases (mobile-first) 320px 1920px “4-­‐part  series:  Design  for  the  Edges”  by  LukeW:  h<p://www.lukew.com/ff/entry.asp?554
  84. 84. A11Y -> RWD Design for the edge cases (A11Y) 320px 1920px “4-­‐part  series:  Design  for  the  Edges”  by  LukeW:  h<p://www.lukew.com/ff/entry.asp?554 accessibility
  85. 85. 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
  86. 86. goodwally.ca 🌎 @good_wally Use your RWD knowledge to get into A11Y! What Accessible Design can teach you about Responsive Design
  87. 87. goodwally.ca 🌎 @good_wally What Accessible Design can teach you about Responsive Design Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×