Question

通过添加＆＃34;跳到内容＆＃34;尝试使网站符合WCAG 2.0标准。页面外的链接，但应在用户选中时显示。

我是tabindex的新手，所以也许我错了。这是Wordpress中的代码：

    <body <?php body_class(); ?>> 
      <div class="top-bar" tabindex="0">
        <a href="#content" class="skip">Skip to content</a> 
      </div>    
    ...

这是让它发挥作用的css：

    /*skip link*/
    .skip {
      position: absolute;
      top: -1000px;
      left: -1000px;
      height: 1px;
      width: 1px;
      text-align: left;
      overflow: hidden;
    }

    .skip:focus {
       position: absolute;
       top: 50px;
       left: 50px;
       height: 50px;
       width: 100px;
       text-align: left;
       overflow: hidden;
    }

根据我对文献的有限了解，屏幕阅读器和其他辅助设备应该能够自然地选择链接。包含它的div不是，但添加tabindex="0"应该可以解决这个问题。

如果你能指出我做错了什么，那将非常感激。

Answer 1

您不需要tabindex top-bar容器的div - 该链接将自动聚焦在标签序列中。只需在打开body标记后直接确保链接（包括其容器）位于其他所有位置之前。

Answer 2

根据我对文献的有限了解，屏幕阅读器和其他辅助设备应该能够自然地选择链接。包围它的div不是，但添加tabindex =“0”应该可以解决这个问题。

如果链接不可见，并非所有辅助技术都可以自然地关注链接。

例如，眼动追踪设备或触摸屏不会受益于跳过链接。

使“跳至内容”链接可见，并删除tabindex = 0，这样就无法访问该链接。

Answer 3

有两种方法可以满足bypass blocks criteria，一种是add landmarks to your pages。跳过链接也很有用，特别是对于没有屏幕阅读器的键盘用户（例如移动性问题）。

在这种情况下，从父div中删除tabindex，我认为您还需要包含.skip:active。

使用剪辑方法在焦hiding elements properly上尝试使用本文中的代码段。

跳过链接无效Wordpress

3 个答案: