Accessibility questions? Get in contact: george@goodwally.ca.
July 2013 NOTE: I posted an updated, more comprehensive version of this presentation at http://www.slideshare.net/GeorgeZamfir/responsive-web-design-a-tool-for-accessibility.
How responsive web design is making the case for accessibility. Many of the RWD best practices ARE in fact best practices for accessibility as well. And there's nothing revolutionary about them, however with people using them more and more under the RWD umbrella they basically became more attractive.
"Responsive web design is accessibility in disguise".
"RWD is designing for more accessible content".
Presentation delivered at Accessibility Camp Toronto (AccessibilityCampTO.org) on Nov 17, 2012.
Podcast: http://www.webaxe.org/podcast-97-responsive-design-and-accessibility/
Responsive Accessible Web Design KIT: https://github.com/GeorgeZamfir/RAWD-KIT
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Responsive Web Design & Accessibility
1. Responsive Web Design
&
Web Accessibility
george zamfir #a11yTO
meetup.com/a11yTO @a11yCampTO
@good_wally goodwally.ca 🌎
Tuesday, 20 November, 12
2. RWD & A11Y = ♥
They are really good together!
Tuesday, 20 November, 12
3. Responsive Web Design (RWD)
&
Web Accessibility
30 min presentation & 20 min of conversations
• part case study
• part primer on responsive web design
• RWD & A11Y = ♥
@good_wally goodwally.ca 🌎
Tuesday, 20 November, 12
16. But I also get to work on cool stuff like
this... ghiglione.ca
@good_wally goodwally.ca 🌎
Tuesday, 20 November, 12
17. What is
Responsive Web Design (rwd) ?
Tuesday, 20 November, 12
18. What is
Responsive Web Design (rwd) ?
Started off as a technique
for building one website that
would work on all devices.
Tuesday, 20 November, 12
19. Why do we need
Responsive Web Design (rwd) ?
Tuesday, 20 November, 12
20. Why do we need
Responsive Web Design (rwd) ?
"Rather than tailoring disconnected designs for an
ever-increasing number of web devices, we can
treat them as facets of the same experience."
- Ethan Marcotte
alistapart.com/articles/responsive-web-design
Tuesday, 20 November, 12
31. RWD - Under the hood
Fluid Foundation
no fixed-width layouts. or PXs. seriously
Media Queries
target media types and media features
Responsive Images
percentage widths (+ *sigh* serving multiple images)
Tuesday, 20 November, 12
32. 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;
}
<meta name="viewport" content="width=device-width">
Tuesday, 20 November, 12
36. RWD - Media Queries
It’s how you target specific media AND media features!
/* 30em = 480px */
@media screen and (min-width: 30em) {
h1 {font-size: 1em;}
}
/* 30em = 480px and 48em = 768px */
@media screen and (min-width: 30em) and (max-
width: 48em) {
h1 {font-size: 1.5em;}
}
How about them breakpoints?
Tuesday, 20 November, 12
38. RWD - Responsive Images
How do you make fixed-width elements (i.e.
images) work with your awesome fluid layout?
img {
max-width: 100%;
height: auto;
}
Tuesday, 20 November, 12
43. RWD - Responsive Images
Solutions
Image Optimization
Scalable Vector Graphics (SVG)
Media Queries - (background) image replacement
Icon Fonts - css-tricks.com/examples/IconFont
A new HTML element - w3.org/community/respimg
Tuesday, 20 November, 12
44. RWD - Responsive Images
Solutions
Image Optimization
Scalable Vector Graphics (SVG)
Media Queries - (background) image replacement
Icon Fonts - css-tricks.com/examples/IconFont
A new HTML element - w3.org/community/respimg
Unfortunately, there is no “one solution to rule them all”!
css-tricks.com/which-responsive-images-solution-should-you-use
Tuesday, 20 November, 12
45. RWD - Summary
Fluid Foundation + Media Queries + Responsive Images
Tuesday, 20 November, 12
48. So, why are RWD & A11Y
really good together !?
Tuesday, 20 November, 12
49. RWD & A11Y = ♥ Why?
Personal Ov errid ing Stylesheet
(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users' Needs, Devices, Context
Tuesday, 20 November, 12
51. Personal Overriding Stylesheet
Less about the design, more about the content!
Think about it!
We’re changing the CSS stylesheet to suit our needs!
Tuesday, 20 November, 12
52. Personal Overriding Stylesheet
“My basic point is that it should be the content
that dictates the media queries.”
@adactio
Tuesday, 20 November, 12
53. Personal Overriding Stylesheet
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
Tuesday, 20 November, 12
54. Personal Overriding Stylesheet
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
“RWD is designing for more accessible content!”
Tuesday, 20 November, 12
55. Personal Overriding Stylesheet
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
“RWD is designing for more accessible content!”
George Zamfir
Tuesday, 20 November, 12
56. Personal Overriding Stylesheet
Moaaar Accessible Content!
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
“RWD is designing for more accessible content!”
George Zamfir
Tuesday, 20 November, 12
60. Personal Overriding Stylesheet
Reduced Cognitive & Visual Load
RWD goes beyond layouts & images, we’re now tackling
line & letter spacing (leading & kerning), readable
typefaces (even dyslexia) AND responsive typography.
Tuesday, 20 November, 12
61. Personal Overriding Stylesheet
Reduced Cognitive & Visual Load
RWD goes beyond layouts & images, we’re now tackling
line & letter spacing (leading & kerning), readable
typefaces (even dyslexia) AND responsive typography.
“Georgia works perfectly as body text up until 16 pixels. As
soon as you go over that size, it starts to look odd. This is not a
design deficiency of the typeface. It was simply not designed to
work for big body text sizes and dense screens.”
- informationarchitects.net
Tuesday, 20 November, 12
65. Personal Overriding Stylesheet
Fat Fingers Syndrome
Don’t make me think! (Steve Krug)
What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
Tuesday, 20 November, 12
66. Personal Overriding Stylesheet
Fat Fingers Syndrome
Don’t make me think! (Steve Krug)
What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
header[role="banner"] nav a {
padding:0.4em 1em 0.5em;
}
Tuesday, 20 November, 12
70. Embracing Web Standards
platform specific hacks
no more custom controls
mouse-only wankery
Tuesday, 20 November, 12
71. Embracing Web Standards
platform specific hacks
no more custom controls
mouse-only wankery
HTML5 & ARIA
Tuesday, 20 November, 12
72. Mobile First & Progressive Enhancement
Mobile first
designing for the smallest screen resolution first (<320px)
and use it as the base for the next, larger screen resolutions
Progressive Enhancement
building for the less-capable devices / browsers first
and incrementally enhance for the more capable ones
Tuesday, 20 November, 12
74. Progressive Enhancement
An escalator can never break--it can only become stairs.
You would never see an "Escalator Temporarily Out Of
Order" sign, just "Escalator Temporarily Stairs”.
Sorry for the convenience. We apologize for the fact
that you can still get up there."
- Mitch Hedberg
Tuesday, 20 November, 12
83. RWD & A11Y = ♥ ?
Accessibility is not lagging behind (for once)
accessibility & web standards are core to RWD
RWD is a champion for web accessibility
we have common goals for our users
RWD is not a fad.
a solid framework for us to do better web work
Tuesday, 20 November, 12
0. Dan Ariely - classical music experiment\n0. Picture of audience, I never have any pictures from these events.\nEverybody say, really quickly, &#x201C;responsive web design&#x201D;\n\nMeetup: monthly, 150 members, come to teach, be taught, share & even build.\n\nI am & we'll talk about\nHi everyone, my name is George Zamfir and I'm here to talk to you about wally & rwd. Why? Because&#x2026;\n
RWD & A11Y are really good together!\nAs in Wall-e & Eva good. If you're emotional like I am, you can go "aaaaaaw".\nI believe RWD is great for accessibility, it's an enabler;\nMany of the RWD best practices also apply to accessibility.&#xA0;\n
Bit of information & housekeeping\nLast year - guided conversation; 15 - 20 min talk; around the room conversation;\n\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
Day job - work on technical accessibility solutions on websites like these:&#xA0;\nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website.&#xA0;\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
Show of hands:&#xA0;Who has experience with RWD?\n\nWhat is RWD?\nEthan coined it in 2010.\nTechnique - one website - flexible enough to work on all web devices & respond to users' needs & context.\nWell, does this mean that websites just don't work on some devices / browsers?\nActually, yes. Some Blackberry phones do not support advanced JS. But of course you can fix that with progressive enhancement.\n
Why do we need RWD?\nThere's an ever-increasing number of devices, browsers and screen sizes.&#xA0;\nRather than creating a separate website for each platform or screen size.\nLet's take a look at an example.\n
\n
\n
\n
\n
\n
\n
\n
\n
RWD - Under the hood: fluid foundation, media queries, responsive media\n
RWD - fluid foundation\njust don't use pixels; there's a lot that can be said about fluid grids and frameworks\nviewport: &#xA0;scale viewport to actual device width\n
no viewport declaration\n
no viewport declaration\n
no viewport declaration\n
no viewport declaration\n
RWD - media queries\nW3C recommendation\nmedia types&#xA0;used since CSS 2.1 - print, screen\nmedia queries&#xA0;allow you to target the media features as well.\nbreakpoints\n
responsive images\n
How do make fixed-width elements work with fluid layouts?\n
new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
there isn't one solution to rule them all.\n
rwd - with these 3 components\n
rwd - this will be the web\n
rwd + a11y = *heart*\n
But why is that?\n
Here's why I think RWD & A11Y are so good for each other\n
Ted Drake - video of Karo - iPad use to make all apps look the same\n\nFluid layouts +&#xA0;Media queries +&#xA0;Responsive images\nThink about it:&#xA0;increasing our text size (<h>, <p>, etc.),&#xA0; we&#x2019;re changing the layout, colours, margins, etc.\nLess about the design, more about the content.\n\n
No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Content accessibility\nFurther more, boston globe - smart loading - no&#xA0;ads on small screens (even for large screens it loads the ads last)\n
Reduced cognitive load\nThey're talking about line spacing, proper kerning, readable & dyslexia typefaces, etc.&#xA0;\nResponsive typography\nMicrosoft built new icon fonts.\n
They're going beyond WCAG 2\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
"Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
LukeW is looking at touch ergonomics.\nDraws conclusions on navigation placement.\n
LukeW is looking at touch ergonomics.\nDraws conclusions on navigation placement.\n
here's what RWD doesn&#x2019;t advocate:\nno platform specific hacks: you can still do them but just know, it may not work on blackberrys\nno custom controls: because the native ones are just better; which means more accessible to us.\nno mouse-only wankery: there is no hover intent on touch devices, which means that we're back to keyboard accessibility; awesome!\n--- DOES ALL THIS SOUND FAMILIAR?\nHTML5 + ARIA:&#xA0;thanks to Apple & VoiceOver more developer are aware of accessibility; it's good (awareness) & bad (screen readers != accessibility)\n
Mobile first:&#xA0;advocates building a website for the smallest screen first.\n
Mobile first:&#xA0;advocates building a website for the smallest screen first.\n
Mobile first:&#xA0;advocates building a website for the smallest screen first.\n
Mobile first:&#xA0;advocates building a website for the smallest screen first.\n
Mobile first:&#xA0;advocates building a website for the smallest screen first.\n
Mobile First + Progressive enhancement = awesomeness\n
Mobile First + Progressive enhancement = awesomeness\n
Mobile First + Progressive enhancement = awesomeness\n
Caters to Users' Needs, Devices, Context\nThis is a pretty common scenario of an user walking & browsing kinda thing using one hand / thumb and "one eyeball".\nBasically you have the user's divided attention & top RWD people say that we should design for that.\nThis is great for us because, a11y folks, because as we know some people do have one eye, thumb, etc.\nAgain RWD is a great advocate for a11y.\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
\n
\n
\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
RWD & A11Y = &#x2665;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n