不影响布局的情况下扩大内联链接可点击区域

Question

不影响布局的情况下扩大内联链接可点击区域

htmlcssaccessibility

15

考虑到使用者可能难以精准点击链接，为了提高可访问性，我希望增大链接的可点击区域。适当增大1.5倍大小可能是合适的。这些链接在普通文本中，因此我无法将它们实际放大，否则会破坏页面布局。

我使用HTML5、CSS3、JS或者甚至Mozilla特定的功能来完成这个目标，因为最新版本的Firefox是唯一的目标。当然，基本的CSS/HTML方式比这样的“技巧”更可取！

- not amused

5个回答

9

您可以通过增加内边距来实现此操作。

例如：

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

这里有一个现成的例子：http://jsfiddle.net/u5kuJ/1/

更新：

使用你的代码片段：http://jsfiddle.net/XXgqu/1/

- Alvaro

那不起作用。这些是文本中的链接，可点击区域必须重叠正常文本。http://jsfiddle.net/XXgqu/ - not amused

这使得它只能从左边和顶部点击。在它的右边和下面是不行的。否则，这就是我想要的效果。 - not amused

1

我对gotohales的回答进行了更新，它将适用于任何文本长度，然后添加一些填充。

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

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

- J nui

0

你可以使用 :after 伪元素来填充元素，使用 transform 和 position 可以将填充居中于元素的中心位置，而不影响其他元素。

将 padding: 30px 更改为所需的任何填充值。

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

注意：这是基于gotohales的解决方案，这是一个很好的方法，但是使用像gotohales解决方案中的像素值的top和left需要考虑我们填充的元素的宽度/高度，否则填充将不会居中。

- Leigh McCulloch

-1

我很确定你无法做到你所要求的。我能想到的唯一解决方案是添加填充、边距和行高。虽然这不是我最喜欢的解决方案，但根据网站的上下文，也许可以有一个页面列出所有链接，这样目标就更大了。

此外，也许可以使用 outline 和 outline-offset CSS 属性，并使用良好的对比度来让人们知道他们正在点击链接。

另外，需要更大目标的人更经常使用键盘浏览网站，因此使您的网站更加键盘友好可能会有所帮助。例如，您是否有标题和侧边栏？如果是这样，通过代码，将它们放在主要内容之前，可能会有所帮助，例如放置一个跳过导航链接或几个（取决于布局）。

- Ryan B

好的建议，但是接口不是鼠标和键盘，而是仅支持公共使用的单击触摸屏，因此我确实需要更大的点击区域。 - not amused

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gotohales · Accepted Answer

有一个可能可行的选择是使用:after 伪元素。类似于这样：

一种可能有效的方法是使用:after 伪元素。像这样：

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

数字可以根据您的喜好进行微调。我能够立即看到的唯一缺点是，如果您需要支持任何早于IE8的内容。

http://caniuse.com/#feat=css-gencontent

这里有一个演示。