focus-indicator-missing

Focus indicator is missing

Description

The visual focus indicator is missing altogether.

Why is it important?

Sighted users who use a keyboard to navigate through a website must also be able to visually locate the element that is in focus. While a default focus indicator might be available within the browser, it is important to have an explicitly defined focus indicator with sufficient color contrast against the background to be visually prominent. This would also be required for custom elements that do not have a visible focus indicator available by default.

Examples

• Success:
  • Having a defined background color and outline for an element in focus.
• Failure:
  • No explicit focus indicators defined for an element.

How to fix?

Add focus indicators to focusable elements when in focus. Provide a color contrast difference between a component’s default and focused states of at least 3:1 or another prominent visual change.

Some examples include (but not limited to) the following:

1. Change in background color of the focused element
2. A visible border around the focused element
3. A thick line under the focused element
4. Changing the component text (making it bold and/or underlined)

References

• WCAG 2.1.1: Keyboard
• Tips for designing focus indicators