Skip to content in masterpages sets focus on container

Question

I'm currently working on a website, trying to make it more accessible for keyboard users. I have implemented the skip to main content patern inside a masterpage, and I ran into a little usability issue.

This is the link I use:

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

This is the #main container in the masterpage, it's just a container with content inside it.

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

When I hit the link to the main content, focus is set on the container, however this makes no sense to the keyboard user. It takes another tab to go to the actual page content.

I know I could fix this problem by moving the #main tag to the content, but this isn't really an option for this website, it needs to be done inside the masterpage.

So basically my question is, does anybody know a way to skip over the #main container directly to the content. Thanks a lot!

Answer 1

When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

An example is moving focus to a summary of errors returned by a form. The summary would typically be located at the start of the form, so you want to draw the attention of screen reader/magnifier users to it, and to position all keyboard-only users at the start of the form so they can begin correcting any errors. You don’t want the error summary itself to be included in the tab order of the page though.

Source: http://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

So you probably just need to use positive values for your tabindex to fix your issue.