Focus Indicator - Good Example

This example demonstrates proper focus indicators that provide clear visual feedback when navigating with a keyboard, making interactive elements accessible to all users.

Contact Form

Interactive Elements

Accessibility Features

  • All interactive elements have clear, visible focus indicators that meet WCAG contrast requirements
  • Focus indicators are consistent across all interactive elements (links, buttons, form controls)
  • Focus indicators are visible in both light and dark color schemes
  • Focus indicators have sufficient contrast ratio (3:1 minimum) against the background
  • Focus indicators are not removed or hidden by CSS, ensuring keyboard users can see where they are

How to Test for Accessibility

  • Navigate through all interactive elements using only the Tab key to see clear focus indicators
  • Use Shift+Tab to navigate backwards and verify focus indicators appear on all elements
  • Test in different browsers to ensure focus indicators are consistently visible
  • Verify that focus indicators have sufficient contrast against the background
  • Check that focus indicators are not removed or hidden by any CSS rules

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