Techniques for WCAG 2.0

On this page:

-

# F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability

## Applicability

HTML and XHTML

This failure relates to:

- Success Criterion 2.4.3 (Focus Order)
  - How to Meet 2.4.3 (Focus Order)
  - Understanding Success Criterion 2.4.3 (Focus Order)

## Description

This document describes a failure that occurs when the tab order does not follow logical relationships and sequences in the content.

Focusable elements like links and form elements have a `tabindex` attribute. The elements receive focus in ascending order of the value of the `tabindex` attribute. When the values of the `tabindex` attribute are assigned in a different order than the relationships and sequences in the content, the tab order no longer follows the relationships and sequences in the content.

One of the most common causes of this failure occurs when editing a page where `tabindex` has been used. It is easy for the tab order and the content order to fall out of correspondence when the content is edited but the `tabindex` attributes are not updated to reflect the changes to the content.

## Examples

### Failure Example 1

The following example incorrectly uses tabindex to specify an alternative tab order:

Example Code:

    <ul>
       <li><a href="main.html" tabindex="1">Homepage</a></li>
       <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
       <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
       <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
    </ul>

If this list is navigated by the tab key, the list is navigated in the order Homepage, chapter 3, chapter 2, chapter 1, which does not follow the sequence in the content.

### Failure Example 2

The tab order has been set explicitly in a Web page by providing `tabindex` attributes for all fields. Later, the page is modified to add a new field in the middle of the page, but the author forgets to add a `tabindex` attribute to the new field. As a result, the new field is at the end of the tab order.

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Tabbing navigation

## Related Techniques

- H4: Creating a logical tab order through links, form controls, and objects

## Tests

### Procedure

1. If `tabindex` is used, check that the tab order specified by the `tabindex` attributes follows relationships in the content.

### Expected Results

- If check #1 is false, then this failure condition applies and content fails the Success Criterion.

- Top
- Contents
- Intro
- Previous: Failure F43
- Next: Failure F46