Making The Clickable Area Of In-line Links Bigger Without Affecting The Layout

I'm looking to make the clickable area of links bigger than they actually are for accessibility since for the intended users it can be difficult to hit them. About 1.5x the size ma

Solution 1:

One option that might work is to use the :after pseudo-element. Something like this:

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
} 

Numbers could be tweaked as you like. Only downside I can see right away is if you need to support anything pre-IE8. http://caniuse.com/#feat=css-gencontent

Here's a fiddle.

Solution 2:

You can do it using a bigger padding.

For example:

.a{
    padding: 20px;
    margin: -20px; //lets keep the layout
}

Here you have a living example: http://jsfiddle.net/u5kuJ/1/

Updated:

With your fiddle: http://jsfiddle.net/XXgqu/1/

Solution 3:

I have made an update to gotohales answer, it will work with whatever the length of the text is, then add some padding.

http://jsfiddle.net/vG7UY/2/

a {
  position: relative;
}
  .biggerForMobile:before{
  content:""; 
  width:100%;
  height:100%;
  position:absolute;
  padding:12px;
  top:-10px;
  left:-10px;
} 

Solution 4:

You can use the :after pseudo-element to pad the element, and using transform and position you can position the padding centered on the center of the element without impacting other elements.

Change the padding: 30px to whatever padding you need.

.padded-click {
  position: relative; 
}
.padded-click:after{
  padding: 30px;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Note: This is based on gotohales solution, which is a great approach, however using top and left with pixels values as gotohales solution does requires taking into account the width/height of the element we're padding otherwise the padding will be off center.

Solution 5:

I am pretty sure you cannot do what you are asking. The only things that are coming to mind are adding padding, margin and line-height. While it isn't my favorite solution, but depending on the context of the site, maybe having a page with all the links listed, which has a bigger target.

Also, maybe use the outline & the outline-offset CSS properties with good contrast to let people know are on the link.

Another thing is, people who need a bigger target, use the keyboard more often to navigate a website, so making your site more keyboard friendly may help. For example, do you have a header and a sidebar, via code, does those come before the main content? If so placing a skip nav link, or a few (depending on layout), may also help.