--- title: "Are elements focused in a logical order when navigating with keyboard?" date: "2024-11-25T08:08:19+00:00" summary: "Ensure logical keyboard navigation order for accessibility. Learn how to review and implement proper focus sequencing on web pages." image: type: "page" url: "/web-governance/are-elements-focused-logical-order-when-navigating-keyboard" id: "0b789464-6aa5-4d64-aa11-a4670bb5be82" --- Table of contents will be added [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) 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[¶](https://docs.acquia.com/acquia-optimize/accessibility/3-1-1-language-page/document-has-required-lang-attribute-s?cid=29537#section-affected-users "Permalink to this heading") 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 ![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/ab902dae-f391-4c4d-a431-77ca08d2adc6/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png) 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 [¶](https://docs.acquia.com/acquia-optimize/accessibility/3-1-1-language-page/document-has-required-lang-attribute-s?cid=29537#section-pass-examples "Permalink to this heading") 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. ![A train ticket search form is open on a web page. The focus order on the form is logical and ends with focus on the "Search Ticket" button at the bottom of the form.](https://acquia.widen.net/content/503ef62c-0499-4b51-b195-9f9ec1323d28/web/WebGov_AccessibilityGuide-Example-LogicalFocusOrder.png) 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.  ![A train ticket search form is open on a web page. The focus order jumps to the "Search Ticket" button in the middle of the form and then back to the input fields.](https://acquia.widen.net/content/e8ec6640-6598-4615-93ff-1f6d5e143570/web/WebGov_AccessibilityGuide-Example-IllogicalFocusOrder.png) 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](/web-governance/how-review-accessibility-issue "How to review an accessibility issue"). Additional resources -------------------- ### WCAG success criteria [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)