3

We are running a tool called Axe to check the validity and 508-compliance/accessibility of HTML pages.

This error comes up as a violation:

Elements should not have tabindex greater than zero

The app is structured with top links and a nav bar. If we don't put in a tabindex, the tabbing starts from those elements. The idea is to hit the form inputs directly when coming onto the page. Surely that makes sense and should be allowed (even for disabled users)? Then why is a legitimate use case getting flagged?

image of the form layout

<input id="phone" name="phone" tabindex="5" placeholder="" class="input-block-level" type="text" value="222">

imageof the error message

cfnerd
  • 3,658
  • 12
  • 32
  • 44
gene b.
  • 10,512
  • 21
  • 115
  • 227
  • This causes problems in accessibility. I think because every tabindex is read out or something, see here: http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html Apparently you should only use tabindex="0" for the first element, and from then on have the HTML DOM order in your tabindex order (without specifically setting a tabindex) – elveti Dec 10 '18 at 15:44
  • Unfortunately `tabindex=0` just for the 1st one doesn't work either. The link you posted says: `Setting tabindex="0" will take an element and make it focusable. It doesn’t set the element’s position in the tab order, it just allows a user to focus the element in the order determined by its location with the DOM. ` I tried it and I'm still hitting the top bars first. – gene b. Dec 10 '18 at 15:49

2 Answers2

5

Having a tabindex greater than zero is allowed in HTML in spite of what AXE is saying.

However, the way that you're using tabindex is presenting information to sighted users that is essentially being made unavailable to non-sighted users because they can't tab to it.

A better way to approach this would be to use hidden "skip links".

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

https://webaim.org/techniques/skipnav/

Josh
  • 3,872
  • 1
  • 12
  • 13
5

For sighted users, it's nice to have the focus on the first actionable element, such as the search field on amazon.com (although they don't do that). But sighted users have the whole page to take in with a quick glance. They can see where the focus is (assuming you have a focus indicator, 2.4.7) relative to the rest of the page and will immediately know there are navigation elements before the focus location and more stuff to interact with after the focus location.

For low vision users that use a magnifier, their viewport will be shifted to include the element that has focus. Usually when a page loads, the focus goes to the first element in the DOM that can receive focus. That's typically a "home" logo in the upper left (for LTR languages). Because the viewport is in the upper left, the low vision user will know that they can drag their viewport to the right or down to explore more of the page. But if the initial focus is somewhere in the middle of the page, that can be disorienting. The user might not know where on the page they are. How far from the upper left has the viewport shifted? How far can they explore up or down, left or right?

For extremely low vision or visually-impaired or blind users, users that use screen readers, the disorientation is even more dramatic. Screen reading software has great navigation tools so it's easy to explore the various elements of the page, provided semantic html elements are being used such as <h2> or <table> or <ul>. You can navigate to headings using the 'H' key, tables via the 'T' key, and lists via the 'L' key. But again, screen reader users will expect the initial focus to be in the upper left. They can certainly orient themselves and figure out where they are on the page, but it does take some cognitive effort, similar to the screen magnifier user.

So how do you make a pleasant experience for all these types of users (among many other types of users too)?

As one answer notes, "skip links" are very handy. In accessibility terms, these are called "bypass blocks" (2.4.1). They allow the default focus to be in the upper left (or wherever the default focus goes) and when you tab, the focus moves to the "skip link", which is an in-page link that lets you jump to the main part of the page. This is great for keyboard-only users (which might be sighted or visually-impaired users), screen magnifier users, and screen reader users.

However, if you really want the focus to be on a particular element, if the element is an <input> or <button> element, you can use the autofocus attribute. For other natively focusable elements, such as an <a>, you can have javascript that runs on load to call focus() on the element.

It's not a WCAG violoation to have the initial focus somewhere on the page other than the first element, so you're ok putting it on your form, just do it in a way to reduce confusion for users that have limited sight or can't use a mouse.

For more information about tabindex, see "5.5 Keyboard Navigation Between Components (The Tab Sequence)". Note that for tabindex values greater than 0, it says:

"Authors are strongly advised NOT to use these values."

slugolicious
  • 15,824
  • 2
  • 29
  • 43