CODEWITHSUNDEEP
htmlaccessibility
Christian
Christian

Reputation: 3988

tabindex or focus for keyboard navigation

I am doing a lot of work with accessibility and WCAG at the moment but one thing I am trying to get to work well for all users and especially those using keyboard navigation, is a skip to content link.

This sounds simple to do, throw a link to an anchor in the top of the page and people can 'click' it to skip navigation or other largely unimportant content.

The issue is, though, when you 'click' an anchor link using your keyboard and then hit the 'tab' key again, you get taken to the element directly after the 'skip to content' link and not the next element in the main content area. Ie, the anchor you linked to has not received focus.

It seems that this is a common problem, because I am yet to find a site with a 'skip to content' link that has this working correctly. Even the Vision Australia site has this problem.

I was hoping that somebody knew of a technique/hack/library to make this work as it should.

EDIT: I can confirm that this issue occurs in Chrome and Safari, but not Firefox on my mac.

Upvotes: 5

Views: 4555

Answers (2)

skt
skt

Reputation: 382

You may place an another element just above the content you want to receive the next focus. Then skip to that element and hide that from view using diff ways like, font-size 0 or a p tag with no content etc.

<div class="skip-nav-container">
  <a class="skip-to-main-content" href="#mainContent">Skip to main content</a>
</div>

<nav>
<!--skip this content-->
</nav>

<div class="skip-nav-target">
  <p class="skip-nav-target-content" id="mainContent"></p>
</div>
<main>
<!--next element in the main content area-->
<!--main content-->
</main>

Upvotes: 0

Terrill Thompson
Terrill Thompson

Reputation: 658

Most browsers scroll down visually to the target of the same-page link, but don't actually place keyboard focus on that link. You can use JavaScript (or JQuery, as in the example below) to give focus to the target: 

$("a[href^='#']").not("a[href]='#'").click(function() {
   $("#"+$(this).attr("href").slice(1)+"").focus();
});

However, there's a bug in WebKit that prevents even this solution from working in WebKit browsers such as Chrome and Safari. I wrote a blog post on this about a year ago, and several others have built on it:

Upvotes: 5

Related Questions