responsive web design and accessibility: challenges and solutions
DESCRIPTION
Responsive Web Design is often used as the cure-all solution for web application usability problems - including accessibility. While responsive web design can have a very positive impact on accessibility, there are a couple of issues to watch that can get in the way. This presentation lists common RWD accessibilty issues and their solutionsTRANSCRIPT
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/