CODEWITHSUNDEEP
wordpressaccessibility
Paeon
Paeon

Reputation: 69

Skip link not working in Wordpress

trying to make a site WCAG 2.0 compliant by adding a "skip to content" link that is off-page but should then appear when a user tabs to it.

I'm new to tabindex so maybe I've go that wrong. Here is the code in Wordpress:

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

And this is the css to make it work:

    /*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;
    }

According my limited knowledge of the literature, screen readers and other assistive devices are supposed to be able to naturally tab to a link. The div the encloses it is not, but adding tabindex="0" is supposed to fix that.

If you could point me to what I'm doing wrong, that would be much appreciated.

Upvotes: 0

Views: 1164

Answers (3)

AlastairC
AlastairC

Reputation: 3297

There are a couple of ways you can meet the bypass blocks criteria, one is to add landmarks to your pages. Skip links are also useful, especially for keyboard users who do not have a screenreader (e.g. for mobility issues).

In this case remove the tabindex from the parent div, and I think you need to include .skip:active as well.

Try the code snippets from this article on hiding elements properly using the clip method and showing on focus.

Upvotes: 0

Adam
Adam

Reputation: 18855

According my limited knowledge of the literature, screen readers and other assistive devices are supposed to be able to naturally tab to a link. The div the encloses it is not, but adding tabindex="0" is supposed to fix that.

Not all assistive technologies can naturally focus on a link if it's not visible.

For instance, eye tracking devices or touchscreens will not benefit of the skip link.

Make the "skip to content" link visible, and remove the tabindex=0 which make it impossible to access the link.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You don't need the tabindex for that top-bar div container - the link will get focus in the tab sequence by itself. Just make sure the link (including its container) is before everything else, directly after the opening body tag.

Upvotes: 3

Related Questions