Logical focus order

Introduction¶

This document gives information about the related Acquia Optimize checks:

• Logical focus order.

What¶

The sequence in which users navigate through interactive elements on a webpage using a keyboard must follow a logical and meaningful order. Focus order should align with the visual and content hierarchy to provide seamless navigation and comprehension for users with varying accessibility needs.

Why¶

A logical and meaningful focus order is essential for users who rely on assistive technologies so that they can navigate and understand the content in an effective way. Without a proper focus sequence, users with visual impairments who rely on screen readers or individuals with motor impairments who navigate via keyboard may find it confusing or even impossible to access key features and information on the page.

For example, when they tab through a form, users 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 not implemented correctly, it might 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 can prevent them from successfully completing tasks, such as submitting information or navigating a site efficiently.

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

This check affects the following users who have:¶

• Visual impairments: Users who rely on screen readers depend on a logical focus order so that they can navigate and understand the content in a meaningful way. An incorrect sequence can cause confusion or lead to missed information. 
• Motor impairments: Users who navigate with keyboards or alternative input devices need a predictable focus order so that they can efficiently interact with interactive elements such as forms. Disruptions in focus order can prevent task completion. 
• Cognitive impairments: Clear and sequential navigation helps users process information more easily, which reduces cognitive load and enhances comprehension.

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’s 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 gives some examples of the issue.

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 for a keyboard user navigating through the input fields matches the visual flow of the form, users who rely on the keyboard can navigate the form in an intuitive and easy-to-understand way.

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¶

How to review it.

The Acquia Optimize platform highlights all pages for keyboard review.

Your task is to ensure that the focus order on a webpage is logical and consistent with the intended reading and navigation order. Use the Tab key 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 should follow a logical path through primary sections like navigation, main content, and footer. 
• Forms and inputs: Form fields should be focused in the order they are visually presented. 
• Interactive components: For elements like menus, modals, or accordions, make sure that the focus order aligns with user expectations, such as focusing 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, see the user guide article:

How to review an accessibility issue.

Additional resources¶

WCAG success criteria¶

2.4.3 Focus Order