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:
- Sighted screen reader useers who rely on visible focus indicators to understand which element is active.
- Users with motor disabilities who use keyboard navigation exclusively and need clear indications of focus to navigate and select links confidently.
- Keyboard users in general, as clear focus indication enhances usability by streamlining keyboard navigation.
How to remediate the issue
- Ensure that all interactive elements, including links, have a visible focus state that is easily distinguishable from the non-focused state.
- 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.
- Avoid removing the browser's default focus outline (`outline: none;` or `outline: 0;`) unless a suitable and equally visible replacement is provided.
- Test website navigation using keyboard-only controls to ensure that focus indicators are present and functional across all interactive elements.