Improving accessibility for motor impaired users

The unique requirements for motor impaired web users can often be overlooked or poorly implemented. Motor impairments can be caused by a stroke, Parkinson's disease, Multiple Sclerosis (MS), a physical disability or even a broken arm. This group of users essentially have limited or no ability to use a mouse.

Provide the largest possible area for links

Wherever possible (and appropriate) expand the width and/or height of the clickable area. This will greatly aid motor impaired users that are able to use a mouse but with limited mobility. Ways of achieving this include:

Include images

Ensure decorative images are included in the same link as any adjacent link text. A large image is of course far easier to click on than text.

Convert inline elements to block

By assigning the CSS command display: block to each link in a vertical list, the full width of the column becomes clickable (as opposed to just the text itself). You'll need to assign a width or height to the link for this to work properly in Internet Explorer.

Use JavaScript

JavaScript can be used to increase the clickable area so that adjacent text/images are clickable too. Examples of when this technique can be used include -

• Placing link text on a background image and making the whole of the background image clickable (as opposed to embedding text in the image and making the image a link)
• Making an entire table row clickable when just one item is a link.

Don't rely on small link targets

Small link targets (especially individual numbers or letters) should be complemented by links with larger link targets. For example, search results should have 'next' and 'previous' links to additional pages, as well as numbers.

Use left and right padding

Left and right padding on links, especially for small link targets in a horizontal list, can slightly increase the width of links. This can be useful with individual numbers or letters such as A-Z links or search results links to additional pages.

Use a focus state for links

Assigning a background colour to focused links is probably the most important thing you can do for keyboard-only users tabbing through web pages. When users tab on to any one link this background colour will display, clearly highlighting where the user is.

If your website doesn't provide this focus state then it can be difficult for keyboard-only users to orientate themselves on pages. A focus state for links can be easily achieved with the following CSS code:

a:active, a:focus {background: yellow;}

For such a simple implementation it's amazing how few websites actually offer this.

Provide a visible 'skip to content' link

'Skip to content' links have historically targeted screen reader users, yet are also useful for motor impaired users. A skip link is an invisible link that allows screen reader users to jump over the navigation on each page and get straight to the main content.

Skip links are very useful for keyboard-only users but only if they're made visible when focused on (otherwise how will they know the link exists?). If the link is assigned class="hide" then the following CSS code can be used to hide the link but then make it appear when users tab on to it:

a.hide
{
position: absolute;
left: -9000px;
top: 0;
}

a.hide:focus, a.hide:active
{
left: 0;
}

Have users opt in for audio

Some motor impaired web users utilise voice recognition software to navigate through web pages. If pages on your website start to play audio without users knowing about this in advance then this can severely conflict with the voice recognition software.

There's nothing wrong with using audio but do make sure that it doesn't start by default when users arrive at the page. Instead, provide a link/button that users can select to start the audio.

What not to do

Don't change the tab order (unless you have a very good reason to do so)

Keyboard-only users tab through links and form items in the order in which they're placed in the HTML source code. The default tabbing order is usually perfectly logical so doesn't need changing.

The tabindex attribute can be used to change the on-page tabbing order but is rarely necessary. Items with the tabindex attribute assigned to them get tabbed to first in order of hierarchy, regardless of their position in the HTML source code.

The only logical reason to change the tab order is if 95%+ of users go straight to one particular item on the page (e.g. a search form). Making this the first item users tab to would make perfect sense.

Don't use access keys

You can assign access keys to any links or form items so as to provide keyboard shortcuts to them. The problem with access keys is there's no convention so the few sites that use them do so in whichever way they choose. Site visitors are unlikely to spend the time getting accustomed to your website's particular access keys.

For example, you could assign the access key, 'h', to the home link. PC users can then simply press ctrl+h (Mac users press alt+h) followed by enter to access the home link. Another website may assign the access key, '1', to the home link; another website may use 'o' (say if 'h' is being used for the help link) and so on.

Access keys can also override keyboard shortcuts for screen readers.