The focused state is vital for accessibility. While some users will never see the focused state, those who use their voice or the Tab ↹ key to navigate an interface benefit from a visual cue that tells them which element is currently in focus.

Focused states are often shown with either a border around the element, an overlay, or a change to the element’s fill color.^[1] Be careful not to use a focused state that is styled too closely to other element states, so as not to confuse users.