Tab Order does Not Make Sense

Short Description

Controls are navigated in illogical order using the tab button

Long Description

  • A screen reader user generally uses arrow keys and the tab key to navigate the content of a page. The arrow keys will go to both controls and text, whereas the tab key will only go to controls. Because a screen reader uses short cut keys that are just single letters to navigate around a page, it is generally necessary to have two modes on a page, one where a single letter is a navigation short cut and one where that same key will manipulate a control or put content into a form field. When the screen reader is in the form to manipulate controls or fill in a form field, the way to navigate from control to control is with the tab key; the arrow keys will only move the screen reader within that particular control.
  • It is important that the order in which the controls receive focus makes sense to a user who is not reading the surrounding content,.
  • Sometimes new edit boxes appear based on an entry, and it is important that the edit box appears next in the tab order. Sometimes the new content does not appear until after the user tabs past it, obviously a problematic behavior.
  • Primary navigation should come before secondary navigation, which should come before main content, which should come before social media links. The link to expand or collapse a menu should come before the items inside the menu.
  • It is important that controls created through alternative coding methods, such as JavaScript, still appear in the tab order.
  • Since most users navigate a mobile device without a mouse or keyboard, it is particularly important for content to fall inside the tab order.

Example of Issue

Recommendations

  • Tab order is one of the easier accessibility issues to test for. Simply tab through the content of a page. Make sure all controls are included without ever using the mouse. Also make sure the tab order is consistent with the order a sighted user would access it.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile