Keyboard focus indicator is easily visible and distinguishable
When an element receives keyboard focus, the focus indicator must be clearly visible. This makes it easier for users to locate and interact with the focused element, especially those with visual impairments or older adults.
Acceptance Criteria
• The focus indicator is at least as wide as a 2 CSS pixel thick border of the unfocused component.
• The focus indicator has a contrast ratio of at least 3:1 between its focused and unfocused states.
Examples
• If the focus indicator is determined by the user agent (browser or assistive technology) and cannot be customized by the author.
• If the focus indicator and its background color cannot be modified by the author.
Exceptions
• A button with focus might have a visible border or outline that is at least 2 pixels wide and contrasts sufficiently with the background.
• A menu item with focus shows a high-contrast outline or highlight that is easy to see against the surrounding content.
Tips
• Ensure that focus indicators are visible in various color schemes and on different backgrounds.
• Test focus visibility under different lighting conditions and on different devices to ensure accessibility.
How to test?
• Navigate through focusable elements using the keyboard and confirm that each focus indicator is at least as wide as a 2 CSS pixel border and has the required contrast ratio.
• Use tools or browser extensions to measure contrast ratios and check the visibility of focus indicators under various conditions.