This document covers the tab and reading order on web pages. See Ensuring Proper PDF Tab Reading Order if you need help with a PDF file.
Overview
Movement through a web page or application should follow a logical order. It should 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.
Techniques
When creating web pages be sure the order of items in the source code matches the visual order.
Testing HTML Web Pages
Try navigating through your web page using keyboard alone. Using the tab key, you should be able to access all links and controls in a predictable order based on their visual position on the page. The success of this test can also be affected by whether there is sufficient visual indication of focus.
Some computer users are physically unable to use a mouse. Others prefer using keyboard because it’s often more efficient. Computers in general, and web browsers specifically, can be operated with keyboard alone. In web browsers, users can use the tab key to jump between focusable elements (i.e., links, form fields, and any other content that has been added to the tab order with the HTML tabindex attribute). However, it is often difficult for keyboard users to tell where they are on the page. Designers must take care to ensure that it is easy to tell which item on the page currently has keyboard focus.
Avoid Overriding Browsers’ Default Focus Indicator
All browsers display a visible outline around the element that currently has keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not do this unless you are offering a better focus indicator than the one provided by browsers (see the next section).
Enhance Browsers’ Default Focus Indicator
Some browsers (e.g., Chrome, Safari) show an easy-to-see blue outline around the element that currently has focus. However, other browsers (e.g., Internet Explorer, Firefox) show a thin dotted line. The latter can be very difficult to see. In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus. For example, the following CSS code styles links as black text on a white background by default; then reverses the foreground and background colors when the element has keyboard focus (using :focus) or when the user is hovering over it with a mouse (using :hover):
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}
External WCAG References
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.