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 閱讀(2847) 評論(2)  編輯  收藏

          評論

          # re: 信息無障礙的修復腳本 2011-02-15 14:15 jacelee
          其實沒有必要去除外框的虛線,如果去掉的話依賴鍵盤的用戶就無法判斷出焦點的位置  回復  更多評論
            

          # re: 信息無障礙的修復腳本 2011-08-17 15:12 回轉窯
          很專業 不錯 謝謝分享  回復  更多評論
            


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 宜都市| 南投市| 北碚区| 龙南县| 富民县| 云梦县| 德安县| 修水县| 沙雅县| 青阳县| 柳江县| 舟曲县| 宁都县| 兰考县| 沙坪坝区| 临安市| 罗定市| 南乐县| 宁远县| 台山市| 闽清县| 房产| 宜君县| 洛隆县| 宁都县| 新河县| 江门市| 宝山区| 昭苏县| 祁东县| 大化| 博罗县| 博客| 田阳县| 晋城| 紫金县| 永宁县| 庄河市| 吉水县| 衡阳市| 水城县|