When RWD goes bad

This article first appeared in issue 241 of .net magazine – the world's best-selling magazine for web designers and developers.

Last time, I discussed how, generally, responsive web design (RWD) has a positive impact on accessibility. But, no sooner were the presses cooling on .net, when I found a terrible example of responsive navigation.

One of the main techniques for navigation on smaller displays is to hide navigation bars behind a button; and selecting the button expands the navigation. (See Luke Wroblewski’s article for more on this pattern.)

This approach can affect those with accessibility needs in a few ways, such as people:

• using a screenreader on mobile (VoiceOver on iOS, for example) who need to access the menu
• with low vision who may be zoomed in on a desktop or mobile browser
• with a cognitive impairment who need to be able to tell what the button does

Actually, that last one affects everyone, but you’ll probably notice it very quickly if you have a cognitive impairment.

The Currys website at full size has a horizontal menu with drop-downs for subsections. On a tablet that becomes a left-hand navigation, and on smaller screens it becomes a set of links at the bottom of the page.

With a mouse (or finger-tap) on the menu (for instance Home Appliances) the menu slides left and displays the sub-sections (such as Cooking). However, try it without a mouse and it becomes incredibly confusing.

The traditional accessibility advice for a menu with drop-downs would be to ensure that the toplevel links work, so that you can tab across the top menu and make a selection. Then the page you get to should include all the options that are available in the drop-down.

In the case of the Currys site, the keyboard access to the menu behaves differently depending on the size of screen. At full size, you can tab through the top level but not select anything. At tablet size, you can tab to the menu, but you go through all the options, even those not visible, and it visually flicks between different menus. While tabbing through, it’s also unclear where you are.

At mobile size (including with a screenreader like VoiceOver) you get a similar behaviour, except that to get there you need to select a ‘browse’ link at the top, which then shoots you to the bottom of the page. After that I actually couldn’t work out how to select items and get to another page.

I suspect that the ‘responsive’ part of the design was added over the top of the previous desktop-oriented design. Fundamentally, the source-order and way the site works is very complex, which isn’t the way you would start a responsive design. In this case it also makes it hard for screenreader and keyboard users.

I’m not yet sure how much of an issue keyboard-only access at small screen sizes is yet, but VoiceOver is a popular screen reader on mobile, so I would at least ensure that navigation is accessible to mobile screen reader users.

Discover 20 artful and inspiring examples of website navigation at Creative Bloq.