When navigated sequentially using the ‘Tab’ key, interactive elements should receive focus in a predictable, natural reading order (from left to right and top to bottom, in most cases).
The easiest way to avoid focus order issues is to make sure that elements are laid on screen in the same order as they appear in the Document Object Model (HTML document).
Manage keyboard focus manually when needed to make the interface easy to use for screen reader, Switch control and keyboard-only users.
For example, if pressing a button triggers a modal dialog, keyboard focus should move to that dialog and stay within (rather than going back to elements behind the dialog), until the user closes the dialog.
Keyboard users and screen reader users use the ‘Tab’ key to navigate between the focusable (interactive) elements on a page.
If that navigation doesn’t happen in a logical way, it’s difficult to understand:
which element on the page currently has the keyboard focus;
where they are on the page;
how to reach a specific element on the page.
How does this work?
The order in which elements are laid out on screen should match the order in which they’re defined in the Document Object Model (HTML document).
But some (discouraged) CSS and HTML techniques can create a mismatch here. We shouldn’t use those techniques.
See Rob Dodson explain ‘Focus order’ in this short video:
Guidance for Design
When you provide different mockups for different screen sizes (such as desktop, mobile, and for different break points), make sure that all interactive elements appear in the same order across on the different mockups.
If you really can’t do that, call it out to developers and ask them to reorder the elements across different breakpoints in the HTML code itself, rather than using CSS.
On the designs that you give to developers, and in conversations with them, indicate what the ‘keyboard focus order’ should be for interactive elements.
Also indicate when actioning a button should move the keyboard focus somewhere else.
When activating a button makes a modal dialog appear, which interactive element within the modal should receive focus? (Usually it should be the first one).
When closing a modal dialog, which interactive element should the keyboard focus move to? (Usually it should be the button that triggered the modal).
When activating a button that disappears right after being activated, where should the keyboard focus move to?
A common design mistake
The order of interactive elements is not consistent across designs for different screen sizes.
For example, imagine that you’ve designed a modal dialog with two buttons: ‘Cancel’ and ‘OK’:
On the design for large screens, the ‘Cancel’ button is positioned to the left of the ‘OK’ button. (‘Cancel’ comes before ‘OK’ in the reading order).
But on the design for small screens, the ‘Cancel’ button is positioned to the bottom of the ‘OK’ button. (‘Cancel’ now comes after ‘OK’ in the reading order).