This success criterion ensures that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and that content can be accessed from the keyboard.
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. Without a proper focus sequence, users with visual impairments who rely on screen readers or individuals with motor impairments who navigate with a 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 incorrect, 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 the focus order with the visual and content hierarchy to ensure a predictable and efficient navigation experience.
Screen reader users who rely on correct pronunciation
Users with motor impairments
Users with cognitive impairments.
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.
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 Web Governance 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.
This success criterion ensures that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and that content can be accessed from the keyboard.
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. Without a proper focus sequence, users with visual impairments who rely on screen readers or individuals with motor impairments who navigate with a 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 incorrect, 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 the focus order with the visual and content hierarchy to ensure a predictable and efficient navigation experience.
Screen reader users who rely on correct pronunciation
Users with motor impairments
Users with cognitive impairments.
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.
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 Web Governance 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.
Web Governance