Why it matters
Users must be able to interact with a website or web app using only a keyboard.
- Using a mouse is impossible for people who can't see the pointer.
- Some people don't have the physical capability to control a pointing device.
- Many people without disabilities prefer to use a keyboard.
Good tab stop design allows keyboard users to:
- Access all of the application's interactive elements in a predictable order.
- Identify which element currently has the input focus.
Poorly-designed tab stops create high-impact accessibility problems.
Provide a visible focus indicator on the interactive element that has the input focus.
- Input focus is commonly indicated by a solid or dotted border surrounding the element, but other visible changes are acceptable.
Make all interactive elements focusable.
- Users should be able tab to every interactive element on the page unless it is currently disabled.
- Interactive elements include links, buttons, form fields and other input controls.
- Watch out for "keyboard traps," elements that receive input focus then prevent it from moving away.
Make the tab order consistent with the logical order that's communicated visually.
- In most cases, tab order should match the expected reading order (left-to-right and top-to-bottom).
Make sure elements that repeat on multiple pages have a consistent tab order across all pages.
- For example, if multiple pages in a site have a navigation bar, a search field, and a settings menu, these elements should have the same relative tab order in every view.
Don't make non-interactive elements focusable.
- Don't allow users to tab to text elements (such as labels) or other static content.
- Don't allow users to tab to potentially interactive elements that are currently disabled.
Don't allow users to tab their way out of a modal dialog.
- Users must actively dismiss the dialog (for example, using an OK or Cancel button).
Don't use tabindex values to define an explicit tab order.
- If the default tab order isn't ideal, first try to fix the problem by rearranging the content and/or changing the style sheet.
Don't show input focus on any element that does not currently have the input focus.
- Be sure styling doesn't make any element appear to have the input focus.
Don't move input focus unexpectedly.
- All focus changes that occur should be a predictable result of user action.