Focus States
Focus states occur when an interactive element receives focus.
What’s in it
What is it for?
Focus states occur when an interactive element receives focus. Interactive elements include links, buttons, and input fields. You can focus on an element by clicking it (as long as the click doesn't take you somewhere else). You can also press the Tab key until the element is selected.
Focus states have their own requirements in Web Content Accessibility Guidelines (WCAG). The focus indicator must be visible (SC 2.4.7, Level AA). It needs a contrast ratio of at least 3:1 against the colours next to it (SC 1.4.11, Level AA). It must not be completely hidden by sticky headers, footers or other content (SC 2.4.11, Level AA, new in WCAG 2.2).
How to support it
If you're building or designing a new component, make sure its focus state meets all three of these requirements.