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.
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.