Increasing the Active Area of Links

Increasing the Active Area of Links

For some users, particularly those with motor-skill difficulties, clicking on links can be difficult. Using CSS, the active area of links can be increased.

The first step is to add .5em of padding above and below the <a> element to increase the active area of a link. This is achieved using padding: .5em 0;.

Next, the <a> element should be set to position: relative, which will stop the padding from affecting surrounding text, as shown in Listing 10.6 (see Figure 10.5).

To see the increased link area in action, you can apply a background color to the <a> element. This background color can be removed before it is applied in a real situation.

A more detailed explanation of this technique is available on David Benton's website at http://www.dbenton.com/go/chronicles/2004/08/22/fitts-law-and-text-links/.

Listing 10.6. CSS Code Containing Styles to Increase the Active Area of Links

a
{
    padding: .4em 0;
    position:relative;
    z-index: 1;
    background: yellow;
}