[可访问性]链接点击后的虚线框到底要不要去掉?

对于经常开发页面的前端人员来说,可能都知道a标签在点击之后或者focus的时候,会有一个虚线框,这个是完美主义的设计师无法容忍的。于是就要解决了,开始的时候都是通过onfocus="this.blur()"来解决的,到后来高级点就用css {outline: none}和IE6/7私有属性hidefocus来解决。

A链接点击后的虚线框到底要不要去掉?

反方意见:用这些毛招是把虚线框给干掉了,可是悲剧的发现,在页面中按Tab键不管用了,不会链接不会按顺序逐个的往下跳了,这样就苦了那些键盘操作爱好者,甚至会导致盲人无法正常上网浏览页面。

平时开发中对于点击之后产生虚线框的情况,我一般是完全无视的,不光需要每个链接都去加hidefocus属性和css,而且会大大降低页面的可访问性,可访问性本身就是用户体验的要素之一。
正方意见:我们必须要保证页面实现出来的效果和设计是match的,好不好?点击之后留下这个虚线框真的让人觉得给烂尾巴似的,很讨厌,再说添加点兼容性代码怎么了,代码不就是为设计效果服务的嘛?
大神出手:不就是想既保证视觉效果又不想降低可访问性嘛?这有何难啊,试试a:active{outline:none;},可以去除用户点击图片式链接时的外框线的问题,同时保留了习惯使用键盘用户在链接获得焦点时虚框可见。并且不会重置浏览器默认的focus获得焦点的样式,可以说是相当完美。

1. 你可以试试本页面的链接点击和按Tab键切换效果。

2. 你可以试试本页面的链接点击和按Tab键切换效果。

3. 你可以试试本页面的链接点击和按Tab键切换效果。

4. 你可以试试本页面的链接点击和按Tab键切换效果。

相关阅读