考虑到使用者可能难以精准点击链接,为了提高可访问性,我希望增大链接的可点击区域。适当增大1.5倍大小可能是合适的。这些链接在普通文本中,因此我无法将它们实际放大,否则会破坏页面布局。
我使用HTML5、CSS3、JS或者甚至Mozilla特定的功能来完成这个目标,因为最新版本的Firefox是唯一的目标。当然,基本的CSS/HTML方式比这样的“技巧”更可取!
考虑到使用者可能难以精准点击链接,为了提高可访问性,我希望增大链接的可点击区域。适当增大1.5倍大小可能是合适的。这些链接在普通文本中,因此我无法将它们实际放大,否则会破坏页面布局。
我使用HTML5、CSS3、JS或者甚至Mozilla特定的功能来完成这个目标,因为最新版本的Firefox是唯一的目标。当然,基本的CSS/HTML方式比这样的“技巧”更可取!
有一个可能可行的选择是使用:after
伪元素。类似于这样:
一种可能有效的方法是使用:after
伪元素。像这样:
a {
position: relative
}
.bigger:after{
content:"";
padding: 50px;
position: absolute;
left: -25px;
top: -25px;
}
数字可以根据您的喜好进行微调。我能够立即看到的唯一缺点是,如果您需要支持任何早于IE8的内容。
http://caniuse.com/#feat=css-gencontent这里有一个演示。
.a{
padding: 20px;
margin: -20px; //lets keep the layout
}
这里有一个现成的例子:http://jsfiddle.net/u5kuJ/1/
更新:
使用你的代码片段:http://jsfiddle.net/XXgqu/1/
a {
position: relative;
}
.biggerForMobile:before{
content:"";
width:100%;
height:100%;
position:absolute;
padding:12px;
top:-10px;
left:-10px;
}
: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%);
}
我很确定你无法做到你所要求的。我能想到的唯一解决方案是添加填充、边距和行高。虽然这不是我最喜欢的解决方案,但根据网站的上下文,也许可以有一个页面列出所有链接,这样目标就更大了。
此外,也许可以使用 outline
和 outline-offset
CSS 属性,并使用良好的对比度来让人们知道他们正在点击链接。
另外,需要更大目标的人更经常使用键盘浏览网站,因此使您的网站更加键盘友好可能会有所帮助。例如,您是否有标题和侧边栏?如果是这样,通过代码,将它们放在主要内容之前,可能会有所帮助,例如放置一个 跳过导航 链接或几个(取决于布局)。