Visible focus states

Focus indicators are often used by people who use the keyboard as a primary way of navigating the web.


Designing focus states

Designing focus states

While navigating keyboard users, and alike, need to know where they are on the page. Designers need to make it easy to visually identify where the keyboard focus is.  Elements with keyboard focus must have a clearly visible focus style that is different from other styles.

Create distinct, custom visual designs for focus state, or use the browser default. Be sure the focus state is different from hover states, error states, current states, or selected states.

While navigating keyboard users, and alike, need to know where they are on the page. Designers need to make it easy to visually identify where the keyboard focus is.  Elements with keyboard focus must have a clearly visible focus style that is different from other styles.

Create distinct, custom visual designs for focus state, or use the browser default. Be sure the focus state is different from hover states, error states, current states, or selected states.


Explore the experience

Explore the experience


Further reading

Further reading

Review the Colour cue guide and Distinct elements guide for more information on visual design.

Review the Communicating current state guide for more information on the whole experience.

Review the Colour cue guide and Distinct elements guide for more information on visual design.

Review the Communicating current state guide for more information on the whole experience.


Explore more

Explore more