Updating keyboard focus when implementing the skip to main content technique through an anchor link

Question

I'm implementing the skip to main content technique described in W3C's WCAG2.0 Techniques documentation, however I'm struggling to update the keyboard focus when activating the link. (Note that I'm testing this on the latest public version of Chrome).

Firstly, here is my JavaScript function:

function skipToMainContent() {
    var hash = window.location.hash.substring(1);
    if (hash === "main") {
        var el = document.getElementById(hash);
        el.tabIndex = 0;
        el.focus();
    }
}
skipToMainContent();

What this function does is firstly pull the hash from the URL and remove the #; then it checks if the value of the hash variable is equal to "main"; if so it then gets our id="main" element, sets its tabIndex to 0 to make it focusable and then gives it focus.

If I visit http://example.com/#main, the skipToMainContent() function is fired and my keyboard focus is set accordingly. When I hit tab the first interactive element within my main content area is focussed. (Note that without this function, Chrome will focus the first interactive element on the page instead, so this function definitely works here).

However when I attempt to trigger this function through a link on my page, the above does not apply:

<a href="#main" onclick="skipToMainContent()">
    Skip to Main Content
</a>
<nav>...</nav>
<main role="main" id="main">...</main>

Upon clicking my Skip to Main Content link, the skipToMainContent() function is fired appropriately and my main element is given a tabIndex of 0, however it doesn't appear to get focussed. If I hit the tab key after clicking my link the first interactive element within my nav is focussed instead.

What do I need to do to ensure that when my "skip" link is clicked, my main element is focussed?

Note that I've tried adding both this.blur() and document.activeElement.blur() before calling el.focus(), but with this the next focussed element was my "skip" link again.

Answer 1

From your comment, 'window.location.hash' is empty on click.

I would also suggest that you apply tabindex="-1" rather than 0, which means the main is in the tab-order. Using -1 means you can programmatically focus on the element, but it is not in the default order.

Also, for posterity (and people finding this later) my generally solution would be to use something like this:

HTML Skip link:

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

HTML Target:

<main role="main" id="main" tabindex=”-1”>

JS:

$("#skiplink").click(function() {
    $('main').focus();
});

CSS:

main:focus {outline: 0;}

You can of course apply more of that through JavaScript, that's up to you.

It might help to put the tabindex attribute in the HTML.