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 act

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.