While navigating the page with a keyboard, the sequence in which the elements receive focus must be logical. If the order is missed user may miss important information or might be confused in certain cases.
In some cases when invoking a button opens a modal window or an overlay. If the focus is not shifted to the newly opened modal or the overlay. Screen reader users an users who depend on screen magnifiers miss to understand that the new window is displayed if the focus is not shifted to these sections.
Validation for focus order while tabbing
- A Open the page on the browser.
- Navigate to each element on the page using keyboard only.
- The navigation flow in which keyboard tab key travels should be logical and intuitive.
- If the navigation order is illogical this success criteria is considered as a violation, else the success criteria is passed.
Note: Repeat the check using a screen reader. The success criteria is passed only when both checks are passed.
Focus order for modals and overlays,
- Open the page on a browser.
- Check for any elements that invoke modal windows or overlays. Eg: Calanders on travel booking aplications.
- Activate the element and see if the focus jums to the newly opened window or overlay.
- If the keyboard focus does not move to the newly opened modal it is an accessibility violation. Else not.
Remember that on closing the modal or overlay the focus has to trigger back to the initiating element, else it is an accessibility violation too.
Repeat the check using screen reader. To mark the success criteria of focus order passed both check 3 and check 4 has to be passed.
WCAG success criteria
2.4.3 Focus Order(Level A)