Responsive Web Design and Accessibility: Challenges and Solutions
-
Upload
dylan-barrell -
Category
Internet
-
view
3.420 -
download
2
Transcript of Responsive Web Design and Accessibility: Challenges and Solutions
![Page 1: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/1.jpg)
Responsive Web Design and AccessibilityChallenges and Solutions
Twitter: @dylanbarrellGitHub: @[email protected]
http://dylanb.github.io/http://unobfuscated.blogspot.com/
![Page 2: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/2.jpg)
© 2014 - All Rights Reserved 2
The Promise of RWD
![Page 3: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/3.jpg)
© 2014 - All Rights Reserved 3
Example Responsive Site
![Page 4: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/4.jpg)
© 2014 - All Rights Reserved 4
Example Responsive Site
![Page 5: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/5.jpg)
© 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
![Page 6: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/6.jpg)
© 2014 - All Rights Reserved 6
Things To Watch
• Keyboard• Tables• Focus• Zooming• Style Sheets• Gestures• ARIA differences
![Page 7: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/7.jpg)
© 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
![Page 8: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/8.jpg)
© 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
![Page 9: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/9.jpg)
© 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
![Page 10: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/10.jpg)
© 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
![Page 11: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/11.jpg)
© 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
![Page 12: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/12.jpg)
© 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; }}
![Page 13: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/13.jpg)
© 2014 - All Rights Reserved 13
Responsive Tables (soln. 2)<table role=“grid”>
</table>
![Page 14: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/14.jpg)
© 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()
![Page 15: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/15.jpg)
© 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
![Page 16: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/16.jpg)
© 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
![Page 17: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/17.jpg)
© 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
![Page 18: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/18.jpg)
© 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
![Page 19: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/19.jpg)
© 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
![Page 20: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/20.jpg)
© 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
![Page 21: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/21.jpg)
© 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
![Page 22: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/22.jpg)
© 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)
![Page 23: Responsive Web Design and Accessibility: Challenges and Solutions](https://reader035.fdocuments.net/reader035/viewer/2022070520/58f9b3be760da3da068bd93f/html5/thumbnails/23.jpg)
© 2014 - All Rights Reserved 23
Questions?
Twitter: @dylanbarrellGitHub: @[email protected]
http://dylanb.github.io/http://unobfuscated.blogspot.com/