Ensure source code order matches visual page flow

The Challenge
People with visual, neuromuscular, or other impairments generally cannot use a mouse to navigate through Web pages; instead, they typically use a keyboard. Making a site keyboard-accessible helps ensure that they can access the content.

Solutions
Keyboard users press the Tab key repeatedly to move through a page. They reach links and form fields in the order they appear in the HTML source code, which is called source order. By making content appear in your HTML source in the same order as it should be read, you ensure users will reach links and form fields in a logical order. This also makes content understandable to screen reader users, who also hear content in source order.

The tabindex attribute should not be used to manage tab order. It carries the risk of disorienting users, particularly screen reader users who do not have a visual perspective of their position in the document. Single-function pages, like Search pages and Login screens, are exceptions to this rule.

  • Test your ability to use the Tab key to navigate in a logical order to every menu item, link, form input, and object in the body of the Web page.
  • Reorder content in the HTML source if the tab order is not logical.