Skip to main content
Vially Logo
Free ScanLogin

WCAG 2.1 Criteria Documentation

2.4.3 Focus Order

Level A

If a Web Page can be navigated successfully and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Who This Helps

These techniques benefit keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.
  • People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order.
  • People with disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected. They benefit from a logical focus order.
  • People with visual impairments can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element.
  • Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.

Examples

  • On a web page that contains a tree of interactive controls, the user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key expands a node, then using the down arrow key moves into the newly expanded nodes.
  • A Web page implements modeless dialogs via scripting. When the trigger button is activated, a dialog opens. The interactive elements in the dialog are inserted in the focus order immediately after the button. When the dialog is open, the focus order goes from the button to the elements of the dialog, then to the interactive element following the button. When the dialog is closed, the focus order goes from the button to the following element.
  • A Web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set within the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.