meaningful-sequence-focus-order

Ensures that keyboard focus moves from one element to another in a logical order.

Description

Keyboard-focusable UI elements on a webpage should be ordered in a logical reading order. This reading order is similar to the natural eye movement from left to right and top to bottom in which languages like English are read. If this rule is not followed, users reliant on keyboards can find the information on the webpage confusing.

When this rule is flagged, the error message contains two nodes. Node 1 in the error message represents a starting position and node 2 represents a destination on pressing the tab key.

There are a few exceptions in which this rule could be ignored:

• Websites in languages like Arabic, Hebrew, Urdu, etc. which are read from right to left.
• Design elements in which a non-standard tab order is intentional.

Example

Consider the following screenshot of a simple website:

The sequence keyboard focus shifts in the above website is in a natural order. This sequence is illustrated in the following screenshot:

In contrast, the following image illustrates an incorrect sequence of movement between keyboard-focusable elements.

In the above website, the keyboard focus shifts from the button “Compare” to the heading “Full Time MBA”. The direction of movement between these two elements is not in a logical reading order. Hence, such scenarios are not accessible and will be flagged by the `meaningful-sequence-focus- rule.

How to fix?

1. Identify the nodes in the error message.
2. Check if the order of keyboard focus between the nodes is in a logical reading order.
3. Change the keyboard focus order using tabindex and/or change the placement of the UI elements to fix the issue.

Reference

• WCAG 1.3.2: Meaningful Sequence
• Success Criteria 2.4.3: Focus Order
• Technique C27: Making the DOM order match the visual order