CODEWITHSUNDEEP
htmlinternet-explorertabsfocusaccessibility
gpr
gpr

Reputation: 959

elements with tabindex ignored after using skip to link

I have a page that uses skip links to get to the navigation and content as follows:

<a href="#content">Skip to content</a>

Inside the content area I have a number of posts in two columns, and the reading order for these posts is left to right, then top to bottom. However the posts are in two column divs and the natural tab order doesn't reflect reading order - we've got around this problem using tabindex attributes.

Unfortunately, there is a problem in IE. When a user clicks the skipto link to go to #content, focus moves there correctly; however, the next tab will move focus to the next element that has no positive tab index. It's as if the positive tabindex elements have been removed from the tab order.

This jsfiddle demonstrates the problem: http://jsfiddle.net/grpr/qTy28/1/

Any ideas?

Upvotes: 2

Views: 2186

Answers (1)

patrickfox
patrickfox

Reputation: 142

I have run into a this issue recently and found a rock-solid solution for it.

Background: An element can receive focus only if it has a tabindex or if it's a natively focusable element. Tabindex of 0 allows an element to be included in the natural taborder of the page. Tabindex of -1 allows for programmatic placement of focus, but not in the natural taborder. I strongly recommend against using any tabindex value above 0.

The best way I have found, though, is to use a method that temporarily focuses an element, and then cleans up the tabindex on blur. Also, it is important to maintain any original tabindex attribute that was on the element. Here's a jQuery example:

$.fn.access = function() {
  var target;
  target = $(this);
  target.data('original-tabindex', target.attr('tabindex') || false);
  target.attr('tabindex', '-1').on('blur focusout', function() {
    if (target.data('original-tabindex') !== false) {
      target.attr('tabindex', target.data('original-tabindex'));
    } else {
      target.removeAttr('tabindex');
    }
    target.off('blur focusout');
    return target.data('original-tabindex', false);
  }).focus();
  return target;
};

Here's a jsfiddle as well: http://jsfiddle.net/pfox/YRXq6/

Upvotes: 1

Related Questions