Okuzeka
UX/UI Design vocabulary · Accessibility

Focus state

Meaning in UX/UI design, with examples

nounCommon term

In UX/UI design, focus state means: The visible style, usually an outline or ring, that shows which element is currently selected when someone moves through a page with a keyboard.

In Turkish: odak durumu, focus durumu

How it is used

Keyboard and switch users depend on it to know where they are. Removing the browser's focus outline without a replacement is a common accessibility failure, and WCAG requires a visible focus indicator.

Example sentences

  1. The focus state is almost invisible on the dark header.

  2. Every interactive component in the design system needs a clear focus state.

Common collocations

  • visible focus state
  • focus ring
  • focus indicator
  • design the focus state
  • keyboard navigationMoving through and using an interface with the keyboard alone, mainly with the Tab, Shift+Tab, Enter, Space and arrow keys, without a mouse.
  • hover stateThe way an element looks when the mouse pointer is over it, for example a button getting darker, which shows that it can be clicked.
  • accessibilityThe practice of designing products that people with disabilities, such as low vision, blindness, deafness or limited movement, can perceive, understand and use.
  • WCAGShort for Web Content Accessibility Guidelines: the international standard, published by the W3C, that explains how to make websites and apps accessible.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Accessibility

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: