home > larger link-area

Larger link-area

Question:

For a better usability of my site: is it possible to make the area of the text-links somewhat larger, so that they can be easily found and clicked by people who can't direct the mouse very precisely?

Answer:

Yes, there is a simple solution (without javascript).

Example

Here you can see the effect, when you hover over the links:

test text with a normal link and test text test text test 
text test test text test with the large link area and test 
text test text test text test text test text test text test.

You shouldn't say, but in the enlarged area there is about 75% more surface to hit!

What to do

In the HEAD of the html-document you make a style-class "biglink", just for use in combination with the <a> tag of the link:

<style type="text/css"><!--
a.biglink  { position: relative ; padding: .25em .15em .35em .15em ; z-index: 1 ; }
-->
</style>

Or you can place the same line in your external css-stylesheet.

Then in the BODY of the html-document you add the class "biglink" for each textlink you want to have the enlarged link-area:

<p>... and here comes the <a class="biglink" href="newpage.htm">link with enlarged area</a> so he is easy to handle.</p>

Ready!

Extra

When you have only text-links on a page, you can make a "pseudo-class" for enlarging the link-area:

<style type="text/css"><!--
a { position: relative ; padding: .25em .15em .35em .15em ; z-index: 1 ; }
 -->
</style>

Now it works for all the <a> tags together, and you don't have to add a class-name to each link in the document; that is less work.
Because this is a general style-description, it also works for the images on the page (if any). I experienced that in some cases it can disturb the positioning of the image when you hover over it. But not always, so give it a try before adding class-names to all the text-links.

Background

Yes! Googlin' around in order to get ideas for improving the accessability of a website for elderly people, I just fell into the Fitts' Law on http://www.dbenton.com/go/chronicles/2004/08/22/fitts-law-and-text-links/ of David Benton and 

http://www.lachy.id.au/dev/css/examples/2004/08/fittslaw of Lachlan Hunt.

 

Comment: simple, effective and just gliding into my css: so thanks forever! The advantage is not only the clicking-ease, but also the visibility of the link while hovering (by using a hover-background): easier to read the content of the link.
With a font-size of .8em or .9em and a line-height of 125% I figured out that using:

a { position: relative ; padding: .25em .15em .35em .15em ;

fills a little more than the space between two lines, and for me it seems enough. In this way, the clickable area increases with about 75% and makes it a lot easier for the user to direct his/her mouse.

All together, I used:

p         { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 125%;
            margin-top: 0px; margin-bottom: 0px; font-size:0.9em ; }
a:link    { color: #000080 }
a:visited { color: #000080; text-decoration: underline }
a:hover   { color: #800000; background: #CCFFFF }
a:active  { background: #CCFFCC }
a.biglink { position: relative; padding: .25em .15em .35em .15em; z-index: 1;}

Placed: 2004 sept. 17

 

Updated 2004 oct.12: 

 

Updated 2004 oct.17: 

 

Updated 2005 may 3: 

 

francky

 

 

 

 

© 2005 francky / de grijze vogel