2.4.3 Focus Order

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Are elements focused in a logical order when navigating with keyboard?

What

The sequence that users navigate through interactive elements on a webpage when they use a keyboard must follow a logical and meaningful order. The focus order must align with the visual and content hierarchy to provide seamless navigation and comprehension for users with varying accessibility needs.

This success criterion ensures that, when users navigate sequentially through content, they access information in an order that is consistent with the meaning of the content and that content can be accessed from the keyboard. 

Why

A logical and meaningful focus order is essential for users who rely on assistive technologies. Without a proper focus sequence, users with visual impairments who rely on screen readers or individuals with motor impairments who navigate with a keyboard can find it confusing or impossible to access key features and information on the page.

For example, when users tab through a form, they expect the focus to move sequentially from the Name field to the Email field and then to the Submit button. If the focus order is incorrect, it can jump to unrelated elements such as a social media link or footer content before it completes the form. This disrupts the user's flow and prevents them from successfully completing tasks.

Align the focus order with the visual and content hierarchy to ensure a predictable and efficient navigation experience.

2.4.3 Focus Order

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Are elements focused in a logical order when navigating with keyboard?

What

The sequence that users navigate through interactive elements on a webpage when they use a keyboard must follow a logical and meaningful order. The focus order must align with the visual and content hierarchy to provide seamless navigation and comprehension for users with varying accessibility needs.

This success criterion ensures that, when users navigate sequentially through content, they access information in an order that is consistent with the meaning of the content and that content can be accessed from the keyboard. 

Why

A logical and meaningful focus order is essential for users who rely on assistive technologies. Without a proper focus sequence, users with visual impairments who rely on screen readers or individuals with motor impairments who navigate with a keyboard can find it confusing or impossible to access key features and information on the page.

For example, when users tab through a form, they expect the focus to move sequentially from the Name field to the Email field and then to the Submit button. If the focus order is incorrect, it can jump to unrelated elements such as a social media link or footer content before it completes the form. This disrupts the user's flow and prevents them from successfully completing tasks.

Align the focus order with the visual and content hierarchy to ensure a predictable and efficient navigation experience.

Who

Affected users¶

This check affects the following users who have:

• Blindness or are visually impaired: Who use screen readers to navigate pages.

• Motor impairments: Who find it difficult to access key features and information on the page.

• Cognitive disabilities: Who benefit from a sequential focus.

User story

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:

“When I am tabbing through a form, my screen reader usually tells me what to fill in next. But sometimes it just starts jumping around. Like, when I am shopping online, right when I try to pick a delivery option or go to pay, it will start bouncing from one thing to another without any rhyme or reason. I will be trying to figure out where I am, and it feels like it is all over the place. It is so frustrating, especially when I just want to make a quick purchase and move on with my day.”

Examples

This section provides pass and fail examples for this check.

Pass example ¶

Ticket search with logical focus order

A ticket search form follows a logical order when a keyboard user tabs through the input fields. The tab order matches the sequence of the visual layout: 1. Departure Station, 2. Arrival Station, 3. Date of Travel, 4. Departure Time, 5. Number of Passengers, 6. Class of Service, 7. Special Preferences, 8. Search Ticket Button.

Because the focus order matches the visual flow of the form, keyboard users can navigate through the input fields in an intuitive and easy-to-understand way.

Fail example

Ticket search with illogical focus order

A ticket search form with a poor focus order disrupts the logical navigation for a keyboard user. The tab order skips essential fields and breaks the sequence of the visual layout: 1. Departure Station, 2. Arrival Station, 3. Date of Travel, 4. Departure Time, 5. Number of Passengers, 6. Search Ticket Button, 7. Class of Service, 8. Special Preferences. 

Because Search Ticket is not the last element in the focus order, it is likely that a blind screen reader user might completely miss the Class of Service and Special Preferences fields. This is because they would naturally expect the Search Ticket button to be the final element in the form.

How

This section provides instructions on how to review the issue.

How to review it

The Web Governance platform highlights all pages for keyboard review.

Ensure that the focus order on a webpage is logical and consistent with the intended reading and navigation order. Use Tab to move forward through focusable elements and Shift + Tab to move backward.

As you navigate, observe the following: 

1. Verify that the focus order matches the visual and contextual order:

Make sure that the focus moves in a logical sequence, typically top-to-bottom and left-to-right, or as intended for the page layout and user tasks. 

2. Pay attention to key content types:

• Headers and landmarks: Focus must follow a logical path through primary sections like navigation, main content, and footer.
• Forms and inputs: Form fields must be focused in the order they are visually presented.
• Interactive components: For elements like menus, modals, or accordions, ensure that the focus order aligns with user expectations. Focus must be on the first menu item when a menu is opened. 

3. Look for focus jumps or inconsistencies:

  Ensure that the focus does not skip essential elements or jump to unrelated content. 

4. Check hidden or off-screen elements:

  Focus should not land on elements that are hidden or off-screen unless they are intended to be accessed, for example, items such as skip links. 

If, based on the steps above, you determine that the page has a logical focus order, you can mark it as Reviewed.

For instructions, visit How to review an accessibility issue.

Additional resources

WCAG success criteria

2.4.3 Focus Order