4 tips to maximise responsive accessibility

In this post, we will share with everyone 4 tips to maximise responsive accessibility.

Responsive design & accessibility both embrace the idea of flexibility. Simply implementing responsive design techniques doesn’t automatically make your site accessible. The below are four practical tips to help boost accessibility in your responsive designs from expert Derek Featherstone.

1. Mind the overlap

This is not 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 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.

2. 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, preferably with real people.

3. 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. Next, 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. 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.

4. Consider Viewport size

With responsive design, we are designing for different viewports and making assumptions about the device based on size. Just because the viewport is 800×600 pixels doesn’t mean the user is on a tablet. I have seen people with low vision using a desktop 27-inch screen with 800×600 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.

From: http://www.creativebloq.com