Digital Accessibility Knowledge Base

insufficient-focus-indication

Any operable UI element must have a sufficient visual focus indication

Who might be affected
Keyboard
Low Vision

Description

Keyboard users and, in some cases, also visually impaired users rely on a focus indication to get page orientation and know the active control. For all users to perceive the focus indication, it must be discernible and prominent according to the WCAG 2.2, 2.4.11 Focus Appearance (Minimum) success criterion.

Quick Fixes

  1. If the focus indication is based on color change, the contrast between focused and unfocused states should be at least 3:1
  2. If the focus indication is based on a border or outline on the entire perimeter of the element, it should have a thickness of at least 1 CSS pixel.
  3. If the focus indication is based on an outline that does not encompass the entire control, its thickness should be at least 4 CSS pixels along the shortest side and at no less than 2 pixels on other or additional sides
  4. The focus indication is not obscured.

How Users Are Affected

Since keyboard users do not directly point to the controls on the UI as a mouse user would, they need some indication of the currently active control. When such an indication is not discernible enough, users (particularly ones with low vision or other visual impairments) may easily miss it. As a result, the reliability of the interface is compromised, and users will lose confidence and may avoid using controls and even abandon the interface.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.11 Focus Appearance (Minimum) (AA)