Skip to content links are a great way to give people using screen readers a quick way to skip your navigation and go straight to the good stuff. Unfortunately, Chrome’s implementation is buggy, and I tried to trouble-shoot it for far longer than I would have liked.

My previous skip to content link looked like this:

<a href="#content">Skip to content</a>

<!-- logo & navigation -->

<div id="content">
    <!-- content -->
</div>

My code problem: I don’t need a div just for content. I was just using it for styling, and I can probably get rid of it. However, this shouldn’t have stopped it from working. I had a javascript skip to content hack implemented that should have fixed it, but still didn’t.

I came across a post by Greg Kraus at the NC State University Accessibility IT Blog called “Skip Links Shouldn’t Be This Hard“. The implementation he promoted was to simply add tabindex=”-1″ to the location.

My code now looked like this:

<a href="#content">Skip to content</a>

<!-- logo & navigation -->

<div id="content" tabindex="-1">
    <!-- content -->
</div>

I fired up OSX Voice Over and tested it out in Chrome. But, alas, it didn’t work. After clicking the skip to content link the focus skipped all the way down the page, past my content area. An improvement over staying in the same place in the header, but still not what I want my users to run into.

The Solution for Skip To Content Links in Chrome

I had another site I was working on that was linked to the HTML5 <main> element, and the skip to content link worked fine on that one, so I tried internally linking to the main instead of the unsemantic content div:

<a href="#main">Skip to content</a>

<!-- logo & navigation -->

<main id="main" tabindex="-1">
    <!-- content -->
</main>

Huzzah! It worked! The tab focus jumped right to where I wanted it. Hopefully this will get fixed in future updates of Chrome, but it seems like it’s been around awhile. Fortunately, the fix doesn’t require any javascript.

I haven’t tested it in any other screen readers besides OSX Voice Over. Leave a comment or contact me on twitter @juryjowns if you know a better, more reliable method.