信息无障碍的修复脚本

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

setTimeout(
    (
function (){
         
var  a = document.getElementsByTagName( " A " );
         
var  regBlur =/^ function  ((anonymous) | (onfocus)) ? /((event) ? /)/s * /{/s * ( this /.) ? blur/(/); ? /s * /}$ / ;
         
var  isIE = ( " /v " == " v " );
         
for ( var  i = 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 >
  
< href ="#"  onclick ="alert('click1')" > test1 </ a >
  
< href ="http://www.qq.com/"   > qq </ a >
  
< href ="http://www.baidu.com/"   > baidu </ a >
  
< script  type ="text/javascript" >
  
<!--
    
var  ls = document.links;
    
// 这是原来让链接不能聚焦的代码
     for ( var  i = 0 ;i < ls.length;i ++ ){
        ls[i].attachEvent(
" onfocus " , function (){ this .blur()})
    }
    
// 这是让链接重新可以聚焦的代码
     for ( var  i = 0 ;i < ls.length;i ++ ){
        
var  a = document.createElement( " A " );
        a.innerHTML
= ls[i].innerHTML;
        ls[i].innerHTML
= "" ;
        ls[i].appendChild(a);
        a.tabIndex
= 0 ;
        ls[i].tabIndex
=- 1 ;
    }

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值