Focus indicator
A focus indicator shows which control receives keyboard input. It differs from a mouse pointer or a marker for the selected item.
Locate the current keyboard position
A focus indicator visibly marks the element that currently has keyboard focus. It might be an outline around a button or input field. When moving through a form with Tab, it shows where the next input or activation will take effect.
In an example order form, “Review order” gets a clear outline when reached with Tab. A colour change only on mouse hover is insufficient: it represents a different state.
Likewise, a persistently highlighted tab only shows which content is selected. Focus may already be on another element. If a design removes the browser's outline, it needs a suitable visible replacement. Check this on different backgrounds and when the page is enlarged.
Sources
Related terms
- Keyboard operabilityKeyboard operability makes tasks possible without a mouse. Actions must be reachable through a clear sequence of controls.
- Focus orderFocus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
- Accessible nameAn accessible name labels a control for assistive technology. It should explain the action and agree with the visible text.
- Search suggestionA search suggestion offers a possible query while someone types. Selection, submission and the later results list need to work together clearly.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence