emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
很多网站为了去除超链接外面的虚框(非IE很多是实框),在每个超链接标签上面都写上了恶心的
onfocus="this.blur()"
这样就导致整个网站人为的变成有障碍网站了,任何无法使用鼠标的用户也就无法正常使用这个网站,因为键盘不能聚焦到超链接上。
修复这个问题很简单,用hideFocus或者style="outine:none"来代替onfocus="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>

这样可以解决大部分类似这样的问题,也可以代替上面的方案,不过有一些副作用。考虑到大多数情况下超链接标签内部的内容结构都比较简单,也不会有太多的内部事件绑定的情况,这段代码应该可以应付大多数情形了。
posted on 2010-09-26 21:37 emu 阅读(2832) 评论(2)  编辑  收藏

评论

# re: 信息无障碍的修复脚本 2011-02-15 14:15 jacelee
其实没有必要去除外框的虚线,如果去掉的话依赖键盘的用户就无法判断出焦点的位置  回复  更多评论
  

# re: 信息无障碍的修复脚本 2011-08-17 15:12 回转窑
很专业 不错 谢谢分享  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问