Clear which element is focused when navigating via keyboard
Ensure that every interactive element on the page provides a visible indicator when it receives keyboard focus. This helps keyboard users, especially those with visual impairments, identify and interact with the currently focused element.
Acceptance Criteria
All keyboard-focusable elements display a visible indicator when in focus.
Examples
• A border or outline appears around a button when it is focused.
• A text cursor or highlight shows in a text field when it is active.
Exceptions
Tips
• Use high-contrast colors for focus indicators to ensure they are easily visible.
• Ensure focus indicators are not too subtle and are clearly distinguishable from other visual elements.
How to test?
• Navigate through interactive elements using the keyboard and verify that each shows a visible focus indicator.
• Check the focus indicators in different contexts and under various visual conditions to ensure they are consistently visible.