Skip to main content

4 pro tips to maximise responsive accessibility

Responsive design and accessibility both embrace the idea of flexibility. But there's more to it than that. Simply implementing responsive design techniques doesn't automatically make your site accessible. Here are four practical tips to help boost accessibility in your responsive designs.

01. Test with real devices

Responsive testing tools, bookmarklets, extensions and testing platforms do a good job of helping test different sizes. They do nothing to help you learn about how your designs work with assistive technology. You need to test with real devices, and preferably with real people.

02. Beware Lost Focus Syndrome

On a mobile or tablet where there is no physical cursor, the screen reader cursor 'floats' above the screen. Try this: create a note, turn on VoiceOver and flick through so you can see the cursor on some text. Now, rotate your device. Notice the cursor doesn't stay on the object that had focus. Instead, it gets 'lost'. It may find a nearby object, or jump to the top-left of the screen.

This often happens when showing and hiding content, or when you animate a menu and the content slides past the VoiceOver cursor. Often the cause is content that is off-screen but is focused. Be sure to test with real devices to activate menus and other items. If you find that you're losing focus, hide off-screen content fully with display:none rather than just placing it off-screen.

03. Mind the overlap

This isn't unique to responsive designs, but it certainly plagues them. Similar to Lost Focus Syndrome, we often see the VoiceOver or TalkBack cursor on a link or other object, but that link is partially obscured or overlapped by some other content. When we activate the link with a double-tap, we end up activating the other piece of content (see sateach.es/mind-the-overlap).

Test your work and look for areas of overlap. If you find activating an item actually activates a different item to the one you intended, modify your CSS so that the items don't overlap, or are hidden with display:none.

04. Consider Viewport size

With responsive design, we're designing for different viewports and making assumptions about the device based on size. Remember, just because the viewport is 800x600 pixels doesn't mean the user is on a tablet. I've seen people with low vision using a desktop 27-inch screen with 800x600 resolution so they can see it. Take care not to make assumptions about device capabilities or how that person will interact with the site simply based on viewport size.

Words: Derek Fetherstone

Derek Featherstone (opens in new tab)is an internationally recognised speaker, entrepreneur and founder of Simply Accessible (opens in new tab). He is also a respected authority on accessibility and interaction design. This article was first published in net magazine (opens in new tab) issue 258.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.