Responsive Web Design and Accessibility: Challenges and Solutions

Responsive Web Design and AccessibilityChallenges and Solutions

Twitter: @dylanbarrellGitHub: @[email protected]

http://dylanb.github.io/http://unobfuscated.blogspot.com/

mailto:[email protected]

http://dylanb.github.io/


http://unobfuscated.blogspot.com/

© 2014 - All Rights Reserved 2

The Promise of RWD


Example Responsive Site


Example Responsive Site


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


Things To Watch

• Keyboard• Tables• Focus• Zooming• Style Sheets• Gestures• ARIA differences


Keyboard• iOS does not send JavaScript events for

– LEFT, UP, DOWN, RIGHT– (caveat, have not tried 7.1)

• ARIA Authoring Guidelines require arrow keys


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


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


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


Responsive Tables

• Unless you do something, responsive data tables will be inaccessible– Data table algorithm does not work

without display:table


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; }}


Responsive Tables (soln. 2)<table role=“grid”>

</table>


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()


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


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


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


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


Gestures• Screen Readers intercept gestures• VoiceOver has a gesture pass through

mode– 10 gestures

• Zoomed screens’ gesture velocity is different


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


ARIA differences• ARIA support is still quite variable

– aria-expanded– aria-live– dynamic roles

• Bad examples– http://alistapart.com/article/accessibility-the-missing-

ingredient

http://alistapart.com/article/accessibility-the-missing-ingredient



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)




Questions?

Twitter: @dylanbarrellGitHub: @[email protected]

http://dylanb.github.io/http://unobfuscated.blogspot.com/

mailto:[email protected]





Responsive Web Design and Accessibility: Challenges and Solutions

Internet