Firefox下使用tab键跳转锚点无效的解决方案

在无障碍设计中，对于视障人群我们的网页要能使用键盘和屏幕阅读器来操作，在近期开发的网页中，遇到了firefox下使用tab键和shift tab键进行上下切换的时候，锚点不能正确跳转的问题，经过一番折腾，终于解决了，特此记录以备后用。

一 场景

左边有一行热点话题，当用户点击某个热点的连接时，跳转到对应的热点内容上，并自动focus到热点内容的某个button上。我们快速的写下了第一版的代码，如下：

    
    
    
    




    
使用tab和shift + tab键进行上下切换
  
    

        

            
Go to content 1
            
Go to content 2
            
Go to content 3
            
Go to content 4
            
Go to content 5
            
Go to content 6
        
        

            

                

                    
content_1 title
                    hide
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
            

                

                    
content_2 title
                    display
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
            

                

                    
content_3 title
                    display
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
            

                

                    
content_4 title
                    display
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
            

                

                    
content_5 title
                    display
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
            

                

                    
content_6 title
                    display
                    
Lorem ipsum是指一篇用于网页设计、排印、布局和印刷的伪拉丁文章，其用于代替英语去强调设计元素而不是内容。它也被称为占位符文（或填充文）。它是一个很便利的模板工具。它用于帮助编排文章或演示文稿的视觉元素，如排印，字体，或布局。Lorem ipsum 大多是由古典作家和哲学家西塞罗创作的拉丁文的一部分。它的单词和字母由于添加或去移除而被改变了，所以故意使其内容荒谬；它不是真实的，正确的，再也不是可理解的拉丁语。虽然lorem ipsum看起来仍像古典拉丁语，但实际上它没有任何意义。因为西塞罗的文本不包含K，W，Z 这几个有异于拉丁文的字母，所以这几个字母和其他一些字母常常被随机插入去模拟欧洲语言的排印样式，这些字在原文中其实并没有。
                
                
            
        
    
 

在chrome等浏览器测试正常 ，但是在firefox下，当tab到某个标题，然后点击enter，并不能自动跳转并focus。

Chrome:

Firefox:

二 原因分析

出现这个问题是firefox本身的一些bug, 很多年前已经有人提出了，但好像一直没有怎么解决，我们另辟蹊径，来寻找解决办法。

首先，在无障碍的网页设计中， 标签是不推荐使用 < a href="javascript: void(o)"> 来禁止JavaScript事件的，因为当我们tab并点击这个链接的时候，网页左下角的链接地址不能出现，这样的表现是不够优美的（原谅我，当时BA的说辞...）

那我们就只有通过一些非人道主义来实现咯，废话不多说，直接看代码：

$('.topic-links li a').on('click', function(e) {
     // prevent anchor event
     e.preventDefault();
     var navTo = $(this).attr('href');
     var offsetTop = $(navTo).offset().top;
     $('html,body').animate({
        'scroll-top': offsetTop - 50
     }, 500)
     $(navTo).focus()
 })

我们在链接的点击事件里面，先用e.preventDefault()禁用默认的锚点跳转事件，然后自己模拟一个锚点跳转的事件，最后手动让button focus。

这样就可以完美的在firefox上运行啦，不信你看下面。

三 总结

希望这个可以帮助你解决问题，在国内做无障碍设计的不多，能遇到这个问题的也是少数，如果有任何关于前端无障碍设计实现的问题，欢迎交流，不过前提是你得点个赞呐。