* - Links - Missing Focus Indicators for Keyboard Navigation

What the issue is

Links that lack a visible focus indicator can significantly impede keyboard navigation, making it difficult for users who rely on a keyboard instead of a mouse to determine which link is currently selected. The absence of these indicators can lead to users losing track of their location on a web page, which not only hinders usability but also accessibility, particularly for those with visual impairments or motor disabilities that necessitate keyboard navigation.

Why this is important

Visual focus indicators are crucial for indicating the current keyboard focus within a webpage. They allow users who depend on keyboard navigation, including those using assistive technologies, to interact with web content effectively. Without clear focus indicators, the usability of the website declines as it becomes challenging to navigate through links, buttons, and other interactive elements, leading to a frustrating or inaccessible experience.

Who it affects

This issue affects:

  1. Sighted screen reader useers who rely on visible focus indicators to understand which element is active.
  2. Users with motor disabilities who use keyboard navigation exclusively and need clear indications of focus to navigate and select links confidently.
  3. Keyboard users in general, as clear focus indication enhances usability by streamlining keyboard navigation.

How to remediate the issue

  1. Ensure that all interactive elements, including links, have a visible focus state that is easily distinguishable from the non-focused state.
  2. Use CSS to customize the appearance of focus indicators (e.g., `:focus` pseudo-class) to ensure they are visually prominent against the backgrounds of every interactive element.
  3. Avoid removing the browser's default focus outline (`outline: none;` or `outline: 0;`) unless a suitable and equally visible replacement is provided.
  4. Test website navigation using keyboard-only controls to ensure that focus indicators are present and functional across all interactive elements.

Guidance on ensuring keyboard accessibility and focus visibility can be found at WCAG Quick Reference on Keyboard Accessible and WCAG Quick Reference on Focus Visible.