Focus Indicator - Bad Example

This example demonstrates the accessibility issue of having no visible focus indicators, making it difficult for keyboard users to know which element is currently focused.

Contact Form

Interactive Elements

Accessibility Issues

  • No visible focus indicators on any interactive elements, making it impossible for keyboard users to know where they are
  • Focus indicators have been removed or hidden using CSS, creating a barrier for keyboard navigation
  • Users cannot determine which element is currently focused when tabbing through the interface
  • This creates confusion and makes the interface unusable for users who rely on keyboard navigation
  • The lack of focus indicators violates WCAG 2.4.7 Focus Visible criterion

How to Test for the Issue

  • Try navigating through the page using only the Tab key - you won't be able to see which element is focused
  • Use Shift+Tab to navigate backwards and notice there's no visual indication of focus
  • Attempt to fill out the form using only keyboard navigation - it's very difficult without focus indicators
  • Notice how disorienting it is to not know which element you're currently on
  • Test in different browsers to see that the issue persists across platforms

WCAG Related Criteria

  • 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible
  • 1.4.11 Non-text Contrast: The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1
  • 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability