Techniques for WCAG 2.0

On this page:

-

# G59: Placing the interactive elements in an order that follows sequences and relationships within the content

## Applicability

All technologies that contain interactive elements and define a default tab order for interactive elements.

This technique 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

The objective of this technique is to ensure that interactive elements receive focus in an order that follows sequences and relationships in the content. When designing the content, the interactive elements such as links and form controls are placed in the content so that the default tab order follows the sequences and relationships in the content. Each technology defines its default tab order, so the mechanism for placing the controls in the content will depend on the technology used.

As an example, in HTML, the default focus order follows the order in which elements appear in the content source. When the order of the HTML source matches the visual order of the Web page, tabbing through the content follows the visual layout of the content. When the source order does not match the visual order, the tab order through the content must reflect the logical relationships in the content that are displayed visually.

## Examples

- A form contains two text input fields that are to be filled in sequentially. The first text input field is placed first in the content, the second input field is placed second.

- A form contains two, side-by-side sections of information. One section contains information about an applicant; the other section contains information about the applicant's spouse. All the interactive elements in the applicant section receive focus before any of the elements in the spouse section. The elements in each section receive focus in the reading order of that section.

## Resources

No resources available for this technique.

## Related Techniques

- G57: Ordering the content in a meaningful sequence
- H4: Creating a logical tab order through links, form controls, and objects
- C27: Making the DOM order match the visual order
- SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element
- SCR27: Reordering page sections using the Document Object Model
- SCR37: Creating Custom Dialogs in a Device Independent Way

## Tests

### Procedure

1. Determine the order of interactive elements in the content.

2. Determine the logical order of interactive elements.

3. Check that the order of the interactive elements in the content is the same as the logical order.

### Expected Results

- Check #3 is true.

- Top
- Contents
- Intro
- Previous: Technique G58
- Next: Technique G60