Coding:
Guidelines:
- Actionable elements (web links, form objects such as edit fields or buttons, etc.) must appear in a logical tab order. Tab order normally runs left to right, top to bottom. Focus should wrap to the top when the tab key is pressed after the last actionable item is reached.
- Unplug your mouse and test using your keyboard only. Consider how well you have used your TABINDEX attributes to allow a keyboard user to navigate your page? Have you used enough? Are they ordered in such a way as to be useful? Do they follow the visual order of the page?
- Typically, the tab key will take a user from one link to the next. If you use tabindex, the tab key will take you to the tabindexes first and then normal tabbing will resume allowing readers to navigate the page's remaining links in the order they appear.
- Tab order is in the order in which they appear in the source code, not on the visual page.
- Changing the tab order is easy. We merely assign a tabindex value to any item we want to prioritize.
Notice the Search box has a tab order of 107, placing it at the bottom of the tab order page. This would be a good place to use tabindex to explicitly set the tab order.
Testing:
Using the AIS Toolbar to Test Tab Order you should select "Show Tab Order from the "Structure" Menu Tab.
AIS Toolbar Results shows the tab order in red. Notice the search field is numbered 107, but is at the very top of the page. This is not ordered well.
SEO:
No Known SEO Issues.
W3C:
- HTML Techniques for Web Content Accessibility Guidelines 1.0
-
- Keyboard access
- Keyboard access to forms
- Link text
- Keyboard access