Why it matters
Users must be able to interact with a software application 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.
Do
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 screen 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 appear in multiple views have a consistent tab order.
- For example, if multiple views in an application 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
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.
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.