时间戳

首页 > 解决方案 > 跳过链接在 Wordpress 中不起作用

wordpress - 跳过链接在 Wordpress 中不起作用

问题描述

试图通过添加一个“跳到内容”链接来使网站符合 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"应该可以解决这个问题。

如果您能指出我做错了什么，那将不胜感激。

标签： wordpressaccessibility

解决方案

您不需要tabindex该top-bar div容器的 - 链接将自行在选项卡序列中获得焦点。只需确保链接（包括其容器）在其他所有内容之前，直接在开始body标记之后。

推荐阅读