A screen reader user and or a keyboard only user access a page through the keyboard. They do not use a mouse. By hitting the tab key, they can move from one link or form field to the next. It is important that the tab order be in some logical order. That does not mean it has to follow the visual layout perfectly, but it does mean it needs to be in an order.
Tab order follows the order of the source code, not the order of the visual presentation. Since we now can use CSS to position HTML anywhere on the page, it is necessary to make sure the tab order is working correctly, and can usually be easily corrected by reording the source code. Be careful when inserting new DOM nodes to get them in the right place to keep tab order logical.
Tabindex can be used to change the tab order, but is usually more trouble then it's worth. If you add TABINDEX=1 to an Anchor or a form field, it will make it the first tab stop on the page. TABINDEX=20 (assuming the next lower number is 1) would be the second stop. After all the TABINDEX stops have been traversed, the page reverts to the natural source order of the remain stops.
Tabindex=0 will take a link or form field out of the taborder; a useful bit of information at times.
- Use the HTML Anchor tag. Making other tags clickable does not put them in the tab order. Also, the Jaws Links List (Insert F7) will not include links that are made without the A tag.
- Use an HREF with each A tag. Without it, Jaws will not see it as a link.
- Remember, tab order follows the order of the source code, not the order of the visual presentation.
- It's best to avoid using tabindex. It generally leads to more issues.
- Tabindex=0 will take a link or form field out of the taborder.
- Tabindex=-1 is a special case used to made an HTML tag focusable. See more about this in our Best Practice on moving focus.
- A Tabindex > or = to 0 when applied to anything other then an Anchor or Form Field will have no affect on the tab order. You can not place just any tag into the tab order, only an Anchor or Form Field.
In this example the red numbers denote the tab order. Notice that there are two search boxes. One at the top and one at the bottom of this page. Because the author added tabindex=10 values to multible links, both at the top of the page and the bottom, it causes the tab order to go first to the top and then to the bottom, doubling the effort needed to find the real information on this page, the search results.
The example below, shows that once the user reaches tabstop #10, they must go to the bottom of the page to a second group of tabstops numbered 10 before it can go to the search results numbered 44. The logical order would be to go directly from the search box to the search results as it appears visually.
