Understanding WCAG SC 2.4.3 Focus Order

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. (Level A)

Intent of this Success Criterion

The intent of this Success Criterion is to ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard. This helps the users to construct  a mental model of the content thereby reduces confusion.

Different logical orders

Based on the arrangement of the content, there may be different logical orders that would convey the relationships. For example, when traversing within a table, the order of elements could be determined either by column to column or row to row. One of these will pass this criterion but a mixture of this would fail.

Who benefits?

Examples

1. In a login page, when the focus is forcefully set on the first field, then the subsequent tabs must take the users to the next form controls and then to the next section below or beside the form depending on the logical order of the page. The focus must not jump to the header after the last element of the form.
2. When a modal opens:
   • The focus is set on the modal (first element)
   • The focus is trapped within the modal (cycles between the elements inside the modal)
   • The focus is returned to the element that triggered the modal
3. On a page with megamenu with submenus:
   • The users encounter only one tab focus for the entire menu
   • The users use right/left arrow keys to navigate between main menus
   • The users use down/up arrow keys to expand/ a main menu and navigate down the submenus.

Points to Ponder

Related WCAG Articles