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>
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>
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.