When users are navigating with a keyboard or similar tool, they will expect focus to go in the same order that they are reading the page. They will also expect focus to only go to interative elements. This is important because it can be very time consuming navigating through the entire page. Interactive elements need to gain focus in order to be operated but focus on non-interactive elements will only slow the user down.

WCAG 2.4.3: Focus Order Opens in a new window

Details

  • In general, keyboard focus goes left to right, top to bottom.
  • When content is contained in columns keyboard focus should go down each column before moving to the next (this does not include tables).
  • Keyboard focus does not go to any element that is non-interactive.
  • Keyboard focus does not go to disabled elements.
  • Keyboard focus does not go to visually hidden elements.

Tips

  • When using tabindex, only use values of 0 and -1.
  • Do not add tabindex=0 to non-interactive elements.

Tools & Resources