Users should be able to sequentially navigate through the content in such a way that they can easily consume information.
Table of Contents
Official Requirements
Success Criterion 2.4.3 Focus Order (Level 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.
Why is it required?
Keyboard users, people with mobility who must rely on a keyboard to access the web, have difficulty understanding content if it’s not presented in a logical, usable focus order. Users with disabilities might also interpret form fields in a different context if the logical order is not followed.
How do we fix it?
By ensuring that the visible focus order matches the Document Object Model (DOM) order
Mistakes to avoid
- Using CSS properties like flexbox to alter visual presentation may result in DOM order not matching the visual focus order
- Focus order won’t make sense if CSS styles are disabled without making up for it
- Using dialogs or menus that are not adjacent to trigger control in the sequential navigation order
