CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccessibility
bryonbean
bryonbean

Reputation: 183

Accessibility: Why does Jquery menu explicitly set menu item tabindex to -1?

I was wondering if someone could explain to me, from an accessiblity standpoint, the logic behind explicitly giving menu item anchors a tab index of -1. I want to give my menu items a tab index of 0 because their natural order is the order that I want. Are there any drawbacks to this strategy?

Upvotes: 0

Views: 1304

Answers (5)

francois
francois

Reputation: 613

As other answerers have pointed out, it's to remove sub-menu items from the tabbing order, while still providing keyboard access to it via other means.

Here is a detailed description of an accessible menu, touching on both the WAI-ARIA attributes and tabindex: Recommended WAI-ARIA implementation for navigation bar/menu

Upvotes: 1

AlastairC
AlastairC

Reputation: 3297

tabindex="-1" takes it out of the order, BUT allows the keyboard focus to be moved there by a script.

The jQuery menu is an example of a WAI-ARIA menu widget which has a specified keyboard interaction.

Briefly, the menu should be one tab-stop in the tabbing order, and then you use arrow keys to navigate the menus. That is why -1 is a useful value, you can script the movement of keyboard focus using the arrow keys. Using 0 would break the interaction model, so I wouldn't use the jQuery menu if you want to change it in that way.

I have found in usability testing that few people know about this interaction (i.e. they get stuck), at least for 'standard' sites which are mostly content with one WAI-ARIA widget. It is different for things like gmail, where people (may) expect a more application-like experience.

If you are looking for a menu in the website sense of navigation, I would recommend the Adobe OS mega-menu, which uses a combination of standard-scripting and a few ARIA attributes to provide a great experience for regular websites.

Upvotes: 3

steveax
steveax

Reputation: 17753

The jQueryUI team has put a lot of effort into accessibility lately and the tabs widget is keyboard navigable:

Keyboard

  • When focus is on a tab:
    • UP/LEFT - Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
    • DOWN/RIGHT - Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
    • HOME - Move focus to the first tab. Activate focused tab after a short delay.
    • END - Move focus to the last tab. Activate focused tab after a short delay.
    • SPACE - Activate panel associated with focused tab.
    • ENTER - Activate or toggle panel associated with focused tab.
    • ALT+PAGE UP - Move focus to the previous tab and immediately activate.
    • ALT+PAGE DOWN - Move focus to the next tab and immediately activate.
  • When focus is in a panel:
    • CTRL+UP - Move focus to associated tab.
    • ALT+PAGE UP - Move focus to the previous tab and immediately activate.
    • ALT+PAGE DOWN - Move focus to the next tab and immediately activate.

Honestly, I'd recommend not mucking with what they've come up with.

Upvotes: 1

SQRCAT
SQRCAT

Reputation: 5840

A tabindex of -1 is used to exclude an element from the tab order entirely.

Example

<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="-1" />
<input type="text" tabindex="3" />

See this fiddle for an example

It is fine to use that. See the W3C HTML5 specification:

If the value is a negative integer

The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.

I'd say that (from an accessibility standpoint) this approach makes most sense when:

  • You don't want the menu to be accessed using the keyboard at all

or

  • You do not know in which environment your code will be used (a jQuery menu could end up below forms whose fields are already covering certain tabindex values, so they couldn't just set the tabindex to anything really)

As for your question regarding the usage of "0" as a tabindex:

In the HTML specification it says:

Elements that have identical tabindex values should be navigated in the order they appear in the character stream.

Meaning that you could use any value other than 0 as long as all the elements you want to give a natural tab order to, all have the same tabindex.

Upvotes: 0

Johnny Harlamert
Johnny Harlamert

Reputation: 271

This prevents the element from being part of the sequential navigation focus. It is best to assume it is not a tab worthy item then to set an index which would be undesirable when done incorrectly.

Even for the scenario of a readonly field that shows a calculation sum. If you have a user tabbing to each entry they shouldnt have to tab twice to bypass the readonly field

Upvotes: 0

Related Questions