信息无障碍的修复脚本-优快云博客

本文介绍了一种简单的方法来修复网站中因使用this.blur()而导致的链接焦点问题，通过使用hideFocus或style=outline:none替代原有的onfocus事件，使得网站更加友好地支持键盘导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多网站为了去除超链接外面的虚框（非IE很多是实框），在每个超链接标签上面都写上了恶心的
onfocus="this.blur()"
这样就导致整个网站人为的变成有障碍网站了，任何无法使用鼠标的用户也就无法正常使用这个网站，因为键盘不能聚焦到超链接上。
修复这个问题很简单，用hideFocus或者style="outine:none"来代替onfocus="this.blur()"就好了，但是有的时候网站页面太多，全站修改代价就大了。这种情况下可以在网站的模板或者通用脚本上面插入以下一段脚本来解决问题：

setTimeout(
(function(){
vara=document.getElementsByTagName("A");
varregBlur=/^function((anonymous)|(onfocus))?$(event)?$\s*\{\s*(this\.)?blur;?\s*\}$/;
varisIE=("\v"=="v");
for(vari=0;i<a.length;i++){
if(regBlur.test(a[i].onfocus)){
if(isIE){
a[i].hideFocus="true";
}else{
a[i].style.outline="none"
}
a[i].onfocus=null;
}
}
}),1000)

是不是很简单啊。
这段代码对于opera浏览器不兼容，因为opera浏览器本身就不是一个信息无障碍的浏览器，没有视障用户用opera的，大家都来鄙视opera吧。

平安夜那天早上，晴天反馈说有一些网站不是直接写onfocus事件，而是用attachEvent/addEventListener方式写了恶心的this.blur()。这事咋整呢？没有拿到原来绑定上面的函数句柄，就不能detachEvent啊。最终想了一个跟blur差不多一样恶心的hack：

<html>
<head>
<body>
<ahref="#"onclick="alert('click1')">test1</a>
<ahref="http://www.qq.com/">qq</a>
<ahref="http://www.baidu.com/">baidu</a>
<scripttype="text/javascript">

</script>
</body>
</html>

这样可以解决大部分类似这样的问题，也可以代替上面的方案，不过有一些副作用。考虑到大多数情况下超链接标签内部的内容结构都比较简单，也不会有太多的内部事件绑定的情况，这段代码应该可以应付大多数情形了。