Skip to main content
No Result Found

meaningful-sequence-focus-order

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

Severity: Moderate

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:

A 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:

A screenshot that illustrates the movement of keyboard focus between UI elements in a logical order

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

An arrow mark between two UI elements in a non-logical order

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle