* - Buttons - Failure to Provide Keyboard Focus Indicators

What the issue is

Buttons that lack clear keyboard focus indicators make it difficult for users who rely on keyboard navigation to determine which element has focus. This issue typically arises in custom-styled web pages where the default focus styles provided by browsers have been overridden or removed. Without visible focus indicators, keyboard users may lose track of their current position on the page, leading to a frustrating and inefficient navigation experience.

Why this is important

Providing a clear visual indication of keyboard focus is essential for users who navigate websites using a keyboard. This group includes users with motor disabilities, those who prefer using keyboard shortcuts, and users of assistive technologies. Visible focus indicators help to maintain the navigational context, enhancing the usability and accessibility of web content. Ensuring that all interactive elements, including buttons, have a discernible focus style is crucial for creating an inclusive web experience.

Who it affects

This issue affects:

  1. Users who rely on keyboard navigation to interact with web content.
  2. Users with motor disabilities who may use specialized keyboards or other input devices that rely on keyboard-equivalent commands.
  3. Users of assistive technologies that emulate keyboard navigation, enabling them to traverse web content.
  4. All users, as clear focus indicators contribute to a more navigable and user-friendly interface.

How to remediate the issue

  1. Ensure that all buttons and interactive elements have a visible focus indicator. This can be achieved through CSS by styling the `:focus` pseudo-class with properties such as `outline`, `border`, or background color changes.
  2. Ensure that the focus outline meets non-text contrast requirements of 3:1.
  3. Ensure that a focus outline is stepped back slightly from the button it surrounds, particulalry for colored buttons where the focus indication can visually become part of the button border. This is acheived by utilizing the "outline-offset" property in CSS.
  4. Avoid removing the default focus outline provided by browsers unless it is replaced with an equally clear custom focus indication style.
  5. Consider the use of a focus ring or other visual effect that encircles the focused element, making it stand out prominently against the background and other elements.
  6. Test your web content with keyboard navigation to ensure that focus indicators are clearly visible and consistently applied across all interactive elements.

Guidance on providing clear keyboard focus indicators can be found at WCAG Quick Reference on Focus Visible.