Movement through a web page or application should almost always follow a logical order and mirror the visual order of navigation and controls on the page. Users who are navigating by keyboard (e.g., using the tab key) expect to move sequentially from left to right and top to bottom through the focusable elements on the page. In some cases, there may be a need for a tab order that follows relationships in the content without following the order of the interactive elements in the code. In these cases, an alternative order can be specified using the tabindex attribute of the interactive element.

Examples

Implementation

  • Tab, left/right arrow keys advance through top level nav items and focus ring appears on the button, if section has a submenu open but maintain focus on the button
  • If submenu revealed, "enter" key or "down" arrow advances focus to the first element in the submenu
  • Once inside submenu, tab or arrow keys work, enter follows the link
  • Tab or right arrow key from last element in submenu puts focus on next top level item (or nex focusable element in the natural page order)
  • Shift+tab or left arrow on first item in subemnu would put focus on parent top level item
  • Enter key on top level element with no submenu follows the link (e.g.: Find Care)