focus-order
Mobile validation
Focus order is the sequence in which keyboard focus moves between the interactive elements on the screen, for example when a user presses Tab on an external keyboard. A clear focus order helps people understand where they are and complete tasks efficiently. In most cases, the default focus order follows the layout, so don't override it. If you do set a custom order, make sure it matches the visual order on the screen. Don't skip large portions of the screen, as this may confuse users.
Note: This validation is about keyboard focus. Screen readers and switch access move through the screen in the accessibility order, which is set separately. For the reading order of related content, see the related content-grouping validation.
Pass Patterns
Android
XML Views
The buttons have no nextFocus attributes, so focus follows the layout, from Button 1 to Button 3.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>Fail Patterns
Android
XML Views
The nextFocusForward attributes send focus from Button 1 to Button 3 and then back to Button 2, against the visual top-to-bottom order.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nextFocusForward="@id/button3"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nextFocusForward="@id/button2"
android:text="Button 3" />
</LinearLayout>Try It Yourself
Using a keyboard
- Connect an external keyboard to the device. On iOS, also turn on Settings > Accessibility > Keyboards > Full Keyboard Access.
- Press Tab to move focus through the interactive elements on the screen, and Shift+Tab to move back. You may also need to use the arrow keys to navigate within containers.
- Compare the order in which elements receive focus with their visual order.
Expected results: Focus moves through the interactive elements in a logical order that matches the layout, and you can anticipate the next and previous element.
Actual results: Focus jumps between distant parts of the screen, skips elements, or moves in an order that does not match the layout.
FAQ
How does this issue relate to 2.4.3 Focus Order?
SC 2.4.3 requires that when people move through a screen sequentially, focusable elements receive focus in an order that preserves meaning and operability. When the focus order does not match the visual order, keyboard users can lose track of their position and reach controls out of context, so the criterion is not met.
Why is this issue marked as Serious?
An unpredictable focus order makes keyboard users guess where focus will move next. They may skip important controls, activate the wrong one, or struggle to complete forms and multi-step processes, so it is rated serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 2.4.3 Focus Order (A) | If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. |
| EN 301 549 | 11.2.4.3 Focus Order | Same as the WCAG text. |
Personas impacted by this issue
Learn More
- Focus Order Guidance
- Apple: Focus (SwiftUI)
- Apple: Focus-based navigation (UIKit)
- Android: Support keyboard navigation (Views)
- Android: Focus in Jetpack Compose
- Focus in React Native (Experimental)
- Flutter: FocusOrder class
- Understanding Success Criterion 2.4.3: Focus Order