Do your skip links work with keyboard navigation?

Recently I’ve been doing a lot of research in web accessibility, and it’s lead me to testing web pages more thoroughly. I’ve been testing keyboard-only navigation a lot. Keyboard-only input is how most screen reader users interact with the web, as well as many alternative input and mouse-less users.

This afternoon I was testing a new feature I want to add to Ind.ie’s accessible video player, and started moving down our style guide (work in progress!) page, tabbing through the links. Our style guide is really long, so I’ve added skip links at the top of the page, allowing you to jump to the relevant section without having to scroll such a long way. Skip links are very common as an accessibility feature to skip past lengthy navigation to get straight to the page content. They’ve also become a common form of navigation used on one-page sites that have a lot of content on one page.

Contents list of links on the Ind.ie style guide

The code usually looks something like:

<a href="#main-content">Skip to content</a>
    ...
<div id="#main-content">
    ...
</div>

What’s the problem?

Some browsers don’t support skip links in this way. After some very quick tests, I found both Safari and Chrome don’t change the keyboard focus to the visual focus area when a user follows a skip link. This means you might be looking at the section on branding, but the keyboard focus is still on the navigation at the top of the page. If you tab to the next item, your visual focus will scroll right back to the top of the page. A few web searches later and I find this isn’t a new problem at all.

The difference between visual and actual focus could be an irritation to any sighted users, but for screen readers users, it makes skip links utterly useless. They’re not actually skipping at all.

How can we fix this?

Having a read through this Webkit bug report, there’s seems to be cross-platform issues and implications. There’s no web standard for skip links, so there’s no guidance for browsers to follow.

But after some searching, I found a JavaScript snippet that seems to solve the problem. Relying on JavaScript is less than ideal, but I think right now it’s the best we can do.

Without consistent behaviour for focus on skip links, they’re little value to the wider audience on the web.

Other sites posting on this issue:

4 comments

  1. This is how I’ve been approaching this:
    <a href="#main" class="visuallyhidden focusable">Skip to content</a>

    CSS classes there are from HTML5 Boilerplate CSS.
    I then have this for my main element:
    <main id="main" tabindex="-1"> ... </main>

    Using tabindex=”-1″ like this allows the main element to programmatically receive focus. When the user hits tab again, it will move focus away from main to the next focusable element.

    Reply

  2. Another minor thing, to make things better (once the above problem is fixed)… having the link text be Skip to Main Content gives a screen reader a bit more context so the pronunciation will be correct as Content, rather than Content.

    Reply

  3. goetsu

    Yes after 8 years of waiting for this bug to be fixed after I create it now it can work but the target of you links must be focusable (a link, a button, a form element or anything with a tabindex).
    So, in your case the most easy thing I presume is to add a tabindex=”-1″ to you hx

    Reply

Leave a Comment

Your email address will not be published. Fields marked with * are required.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>