Focus Order
Success Criterion 2.4.3 (Level A)
Question
If page content is designed to be navigated sequentially, do the focusable parts receive focus in a sequential order that maintains the meaning and operation of the content?
Why is this important
When page content is designed to be navigated sequentially, the keyboard tab order must follow the sequential reading order as intended. Some users must navigate through page content using only their keyboard. If the tab navigation order does not follow a logical and meaningful sequence, keyboard only users may easily become confused or disoriented or may not be able to operate the content’s focusable elements.
Whom does it benefit?
Example 1:
As a blind person who uses a screen reader to navigate a website,
I want the content that the screen reader encounters to be presented in the correct reading order
so that I can work my way through each web page in a logical order using the tab and arrow keys on
my keyboard.
Example 2:
As a person with limited mobility in my arms and hands and uses a switch device to navigate web
pages,
I want content presented in the correct tab order
so that I can use my switch device to toggle between content in a logical, meaningful order.
What should you do?
- Focusable components in a web page or application need to receive focus in a logical and meaningful order and should appear on screen as it is meant to be read.
- Arrange content in an intuitively expected location, e.g. ‘Finished’ button following and not preceding the ‘Check answers’ button.
How do you do it?
- Place the focusable components of the page or application in an order that follows meaningful sequences and relationships within the content.
- Provide a logical tab order whenever the default tab order does not follow a logical sequence.
- Ensure the order of the page source code is the same as the visual presentation of the content.