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.
