Tab order - Information For This Demo

Quick tips:

  • Never use a positive value for tabindex. This will almost always mess up your tab order. Instead, make sure the content is placed on the page in the proper order, and the tab order will be correct with no further action needed.
  • Be very careful when using layout tables. They can easily mess up your tab order and the screen reader's reading order.

So when can you use tabindex?

  • Use tabindex="0" to add an element to the tab order (for elements that are not normally in the tab order). This will let you use the Tab key on the keyboard to tab to the element, even if it is something that normally does not get keyboard focus. Remember: by default, only links, form fields, and form controls will be in the tab order.
  • Use tabindex="-1" to allow programmatic focus to an element that does not normally get keyboard focus, such as a DIV tag or a heading tag (like H1) when it is the target of an in-page skip link. However, the element will not be added to the tab order.

How to test this issue

  • Test technique: Keyboard.
    • Press the Tab key to tab to all of the links, form fields, and other tab stops on the page.
    • Verify the tab order is logical. Normally this is in normal reading order: left to right and top to bottom.

Additional test notes:

  • WAVE will provide an alert indicating the existence of tabindex attributes, which gives a hint that there may be a problem with the tab order. However, you must still test manually with the keyboard.
  • WAVE and the bookmarklet tools may also give you an idea how tables are structured, which can hint at layout table problems also.
  • Also note: the tab order can also give you a good idea what a screen reader's reading order will be.

Failing WCAG Guidelines and Test Tips

For this demo, the following WCAG guidelines fail:

  • 2.4.3: Focus Order