Accessibility for mobile

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

As people increasingly use mobile devices for their internet access, so too are people with disabilities. In previous articles we’ve covered how to make mobile sites and apps accessible to people using built-in screenreaders, but there are also things you should consider for people looking at mobile screens.

For people who need reasonably big text (mild or moderate visual impairments) it’s important that you can zoom in.

Several ‘boilerplate’ templates assume that you are creating a responsive design so include a meta viewport such as:

<meta name="viewport"content="width=device-width">

This is great if you’re doing a responsive design. In that case the device width setting will help trigger the appropriate media query.

However, if you are not (yet) using media queries for smaller screens then it’s probably best to remove it – mobile browsers usually handle non-responsive sites better that way.

Maximum scale issue

The main technique to avoid is using a “maximumscale” of 1, as that prevents people from zooming in.

Even if you have created a design that is responding to the device size, some people will need to zoom in further.

Some devices allow the user to change the default text size (eg, Chrome on Android), but we cannot rely on that.

iOS does not have a built in text-size control for the browser so many people have to rely on zoom.

The accessibility guideline is to allow for increasing things by 200% (WCAG 2.0 guideline 1.4.4) so for a responsive site I would use:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2”>

You could simply leave out the maximum scale setting: most browsers prevent zooming in too far.

Positioning

Another issue that comes up quite often (especially with the recent EU cookie law) is messages that are positioned at the top or bottom of the screen, and you have to find the ‘close’ button to get rid of it.

The trouble can be that when you zoom into the page so the button is big enough to press, it doesn’t fit onto the screen any more.

The Times website pictured above is an example: it shows that even on non-responsive sites you really should have to test with non-desktop devices.

Lightboxes

Lightboxes are another element that can cause issues. If a lightbox pops up over the page and is not aware of smaller screens it could make navigation impossible. Any positioned element should be very thoroughly tested on several devices at several zoom levels. For people who are zooming in on a non-responsive site there can be large areas of white space to get lost in.

This was often an issue for people with visual impairments on desktops with screen magnifiers, and now it can affect zoom using smaller screens.

In a non-responsive layout it is important to make sure you don’t have massive areas of white (or other flat coloured) space, and that form fields are not separated visually from their labels.

New technology, old problems.

Discover 30 pro tips for mobile website design at Creative Bloq.