Responsive Web Design and AccessibilityChallenges and Solutions
Twitter: @dylanbarrellGitHub: @[email protected]
http://dylanb.github.io/http://unobfuscated.blogspot.com/
© 2014 - All Rights Reserved 2
The Promise of RWD
© 2014 - All Rights Reserved 3
Example Responsive Site
© 2014 - All Rights Reserved 4
Example Responsive Site
© 2014 - All Rights Reserved 5
The Promise of RWD
• Opportunity to:– Add support for all devices– Maintain a Single Code Base– Modernize– De-Clutter the UI– Use Semantic Markup– Achieve Accessibility
© 2014 - All Rights Reserved 6
Things To Watch
• Keyboard• Tables• Focus• Zooming• Style Sheets• Gestures• ARIA differences
© 2014 - All Rights Reserved 7
Keyboard• iOS does not send JavaScript events for
– LEFT, UP, DOWN, RIGHT– (caveat, have not tried 7.1)
• ARIA Authoring Guidelines require arrow keys
© 2014 - All Rights Reserved 8
Keyboard• iOS does not send JavaScript events for
– LEFT, UP, DOWN, RIGHT– (caveat, have not tried 7.1)
• ARIA Authoring Guidelines require arrow keys
Use standard HTML 5 input typesUse gesturesInsert dynamic content inline (screen
reader hints)Scale the widget to fit the screen
© 2014 - All Rights Reserved 9
Data Tables
• 3D tables do not work on iOS• 2D headers (th) only first row and
column in iOS• headers attribute does not work on
OS X/iOS
© 2014 - All Rights Reserved 10
Data Tables• 3D tables do not work on iOS• 2D headers (th) only first row and
column in iOS• headers attribute does not work on OS
X/iOS
Try to redesign the UI (e.g. use lists instead)
Try to keep data tables to 2DUse scope attribute on 2D tables
© 2014 - All Rights Reserved 11
Responsive Tables
• Unless you do something, responsive data tables will be inaccessible– Data table algorithm does not work
without display:table
© 2014 - All Rights Reserved 12
Responsive Tables (soln. 1)@media (max-width: {breakPoint}) { /* Force table to not be like tables anymore but still be navigable as a table */ table, thead, tbody, tr { width: 100%; } td, th { display: block; } /* Hide table headers with display: none because accessibility APIs do not pick up
reliably on these headers anyway */ thead tr { display:none; } tr { border: 1px solid #ccc; } td, th { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; }}
© 2014 - All Rights Reserved 13
Responsive Tables (soln. 2)<table role=“grid”>
</table>
© 2014 - All Rights Reserved 14
Focus
• iOS will not focus dynamically inserted elements consistently– Element must be in the DOM and “visible”
for about 1 second in order to consistently receive focus
Write a focus utility that uses setTimeout()
© 2014 - All Rights Reserved 15
Zooming
• Auto zoom can make touch to explore difficult
• Sighted users need to be able to zoom– 200% the absolute minimum for WCAG 2 AA
© 2014 - All Rights Reserved 16
Zooming• Auto zoom can make touch to explore
difficult• Sighted users need to be able to zoom
– 200% the absolute minimum for WCAG 2 AA
Use 19pt or bigger for all form fieldsUse em instead of px/%Do not use meta viewport maximum
© 2014 - All Rights Reserved 17
Style Sheets• Multiple break points mean multiple tests
– Need to replicate all your accessibility testing for each size
– Adding a high contrast style sheet multiplies this• Content positioned off screen is still visible to
screen readers
© 2014 - All Rights Reserved 18
Style Sheets• Multiple break points mean multiple tests
– Need to replicate all your accessibility testing for each size
• Adding a high contrast style sheet multiplies this• Content positioned off screen is still visible to
screen readers
Make your main style sheet high contrastUse automated tools for testingUse display:none for hidden content
© 2014 - All Rights Reserved 19
Gestures• Screen Readers intercept gestures• VoiceOver has a gesture pass through
mode– 10 gestures
• Zoomed screens’ gesture velocity is different
© 2014 - All Rights Reserved 20
Gestures• Screen Readers intercept gestures• VoiceOver has a gesture pass through
mode– 10 gestures
• Zoomed screens’ gesture velocity is different
Use 19pt font to avoid auto zoomDetect zoomSimplify interaction
© 2014 - All Rights Reserved 21
ARIA differences• ARIA support is still quite variable
– aria-expanded– aria-live– dynamic roles
• Bad examples– http://alistapart.com/article/accessibility-the-missing-
ingredient
© 2014 - All Rights Reserved 22
ARIA differences• ARIA support is still quite variable
– aria-expanded– aria-live– dynamic roles
• Bad examples– http://alistapart.com/article/accessibility-the-missing-
ingredient
Test everywhereUse a compatibility/component library (a11yfy)
© 2014 - All Rights Reserved 23
Questions?
Twitter: @dylanbarrellGitHub: @[email protected]
http://dylanb.github.io/http://unobfuscated.blogspot.com/