CODEWITHSUNDEEP
javascriptaccessibilitytabindex
Ajlanclos
Ajlanclos

Reputation: 23

Forced Tab Focus

I have a question related to the code below. The code is used to force focus to the '#skiptocontent' element when the User tabs into the window. The problem I am having is that when I tab all the way through the site and end up at the address bar again, I can't tab back into the window. Are there any suggestions why this might be happening? & maybe a better way to accomplish this?

$(window).keydown(function(e) {
  if(e.keyCode === 9 && $("#skiptocontent a") !== undefined && $("#skiptocontent a").attr("data-focused") === "false") {    
    $("#skiptocontent a").focus();
    $("#skiptocontent a").attr("data-focused", "true");
    return false;
  } 
  return true;
});

Upvotes: 0

Views: 873

Answers (1)

Adam
Adam

Reputation: 18807

The code is used to force focus to the '#skiptocontent' element when the User tabs into the window.

  1. Make your skip link the very first tabable element of your page

Code:

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

  1. Remove the javascript.

  2. That's all.

Note: if you want to make the skip link invisible unless it's focused, which I discourage because it can't be used with keyboard-less accessibility devices, there are a lot of CSS only solution (eg. what is the use of sr-only-focusable class in bootstrap?)

Upvotes: 1

Related Questions