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

1. goodwally.ca 🌎 @good_wally
What
Accessible Design
can teach you about
Responsive Design
with George Zamfir

2. SCREENS

6. A different SCREEN: SIRI - Dragon - Nuance

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

14. In my spare time...

18. SCREENS
Assistive Technologies

19. Assistive Technologies
They don't care much about design!

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

22. Responsive Web Design

23. Content matters more than design!

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

26. not about the design!
Responsive Web Design is

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

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

32. Accessibility (A11Y)

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

34. Accessibility (A11Y)
By measuring people through the
disability lens we automatically focus on
what they’re not able to do!

35. Accessibility (A11Y)
Disability: a new definition
What we should measure is what the
person can do, what their contribution
to society is.

36. Accessibility (A11Y)
Who is more disabled?

39. Accessibility is not just about disability

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

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

42. “The products / services we sell on our
website are not for blind people.
So, blind people don’t visit our website!”

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

44. Accessibility (A11Y)
Accessibility is highly contextual

45. Accessibility (A11Y)
Accessibility is highly contextual

46. Accessibility (A11Y)
Web Accessibility

47. Accessibility (A11Y)
Web Accessibility

48. Accessibility (A11Y)
Web Accessibility

49. Accessibility (A11Y)
Web Accessibility

50. Accessibility (A11Y)
Web Accessibility

51. Accessibility (A11Y)
Web Accessibility

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

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

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

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

56. RWD - The Details

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

58. RWD - The Details
RWD - Fluid Foundation

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

60. Text
RWD - The Viewport

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

63. RWD - Media Queries
<link
rel=”stylesheet”
href="layoutPrint.css"
media="print"
/>
RWD - The Details

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

65. RWD - Media Queries
RWD - The Details

66. RWD - Media Queries
RWD - The Details

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

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

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

70. RWD - The Details
RWD - Responsive Images

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

72. RWD - The Details
RWD - Responsive Images
New problem

73. RWD - The Details
RWD - Responsive Images
No HTML-based solution

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

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

76. 46.7 kb
103.3 kb
Image Optimizations

77. 46.7 kb
103.3 kb
Image Optimizations

78. Scalable Vector Graphics (SVG)

79. Icon Fonts
 

80. W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under the hood

81. W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under the hood

82. Image replacement with picturefill.js
github.com/scottjehl/picturefill
RWD under the hood
Let’s see it in action!

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

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

85. RWD - The Details
RWD - Summary
Fluid Foundation + Media Queries + Responsive Images

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

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

88. 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?)

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

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

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

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

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

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

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

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

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

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

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

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

101. A11Y -> RWD
Design for the edge cases

102. A11Y -> RWD
RWD Mobile-first

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

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

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

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

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