WCAG 2.4.7: Focus Visible

How to

• Visible focus indicator

  All interactive elements such as buttons, links, or form fields must have a visible keyboard focus. The focus indicator or highlight should remain visible for as long as the element is focused, with no time limit.

  Possible focus highlights include:

  • Underlining

  • Bold styling

  • Color change (as long as the contrast between the focused and unfocused state is greater than 3:1)

  • The blinking caret when clicking into an input field

  • A focus outline

  We recommend using a focus outline. It is consistent across all elements and easy to recognize. More about this can be found in Sara Soueidan’s blog post on focus indicators.

  Technique(s):

  • G149: Using user interface components that are highlighted by the user agent when they receive focus
  

• Overriding the browser’s focus indicator

  Pay attention to the default focus indicators provided by browsers or operating systems: these sometimes do not meet contrast requirements.

  Even though many browsers now use a double focus outline, the contrast against certain colored backgrounds is not high enough (3:1). This is because browsers sometimes use colors like blue or pink for the focus outline.

  If the contrast is too low, you must provide your own focus indicator that meets the contrast requirements.

  Technique(s):

  • G195: Using an author-supplied, visible focus indicator