0

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;
});
Ajlanclos
  • 23
  • 5
  • Does the element actually have a tab index? (Edit: I misread, but using tab index's still seems like the solution) – DBS Feb 07 '17 at 16:50
  • 1
    Don’t do this. Give it `tabindex="1"` instead. – Ry- Feb 07 '17 at 16:51
  • 3
    Forcing focus to a particular element is bad for accessibility, you should let the browser handle it natively. Attributes like `tabindex` and `autofocus` can be used to tell the browser what you would like to happen. – Rik Lewis Feb 07 '17 at 16:53
  • 1
    @Ryan - use of tabindex=1 is generally discouraged as it can lead to confusing tab ordering - [Don’t Use Tabindex Greater than 0](http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html) – BrendanMcK Feb 08 '17 at 02:34
  • @Ajlanclos - What are you trying to do here? It sounds like you're trying to do something similar to a ["skip-link"](http://webaim.org/techniques/skipnav/), but trigger it automatically? Best to have an explicit-but-hidden "skip to main content" link that the user explicitly triggers - or tabs past if they actually do want to go to the navigation area. – BrendanMcK Feb 08 '17 at 02:38
  • @BrendanMcK: "Generally". It's certainly more appropriate than this JavaScript snippet here. The proposal to discourage it officially has also been [rejected](https://www.w3.org/Bugs/Public/show_bug.cgi?id=27076), so it’s just some guy’s blog post for now. – Ry- Feb 08 '17 at 03:57
  • 1
    @Ryan - deciding not to make values >1 invalid is not the same as endorsing that usage. It's not just some guy's blog post - it's [multiple](https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/) [posts](http://webaim.org/techniques/keyboard/tabindex) by several folks who are respected in the field of A11y. In any case, I don't think it will actually work as a fix here:you'll skip to that link with the positive tabindex, but the next tab will bring you right back to the top - to the content you're presumably trying to skip over. – BrendanMcK Feb 08 '17 at 23:07
  • @BrendanMcK: That’s exactly the point. If you want to skip to the content, it’s the first link, so you activate it. If you don’t, you tab past it. – Ry- Feb 09 '17 at 04:07
  • @Ryan - still far better to just place the "skip to content" link as the first actual link, and avoid mucking around with tabindex at all in the first place; there's no good reason for using it here. Only reason I'm harping on this at all is that your advice above is generally considered harmful for accessibility. – BrendanMcK Feb 09 '17 at 05:53
  • @BrendanMcK: My advice above was to use `tabindex` to place an accessibility aid conveniently. It’s a fairly standard usage of `tabindex`. (Sure, making it the first link is great too when you can do it.) You haven’t actually given any evidence for *that* advice being harmful, just a link to a general statement about `tabindex` (I agree that it’s misused and disagree that it should be globally avoided). – Ry- Feb 09 '17 at 05:56

1 Answers1

1

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?)

Community
  • 1
  • 1
Adam
  • 17,838
  • 32
  • 54