The WCAG Explained

Summary:
WCAG 2.4.7, "Focus Visible," is all about ensuring that keyboard users can easily see which element has the focus at any given time. This guideline is essential for users who rely on keyboard navigation, including those with motor disabilities or visual impairments, ensuring they can interact effectively with web content.

What:
The criterion mandates that any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible. This means that when a user navigates through a website or application using a keyboard, it should be clear which element (like a button, link, or form field) is currently selected or active.

Why:
Visible focus cues are crucial for keyboard users to understand where they are on a page. Without clear focus indicators, it can be challenging for these users to interact with web content, leading to a frustrating and inaccessible experience. Ensuring focus visibility enhances usability and accessibility.

Examples and Scenarios:

1. Form Fields: When a user navigates to a form field using the Tab key, the field should be highlighted or outlined.
2. Menu Navigation: As users move through a menu with their keyboard, the currently selected menu item should be distinctly marked.
3. Interactive Elements: Buttons, links, and other interactive elements should have a visible change (like a border or color change) when focused.

How to Comply:

• Websites: Use CSS to style the :focus pseudo-class to provide a visible indication of focus, such as a border, background change, or outline.
• Mobile Apps: Ensure that when elements are selected via external keyboards or accessibility features, the focused element is clearly highlighted.
• Software Applications: Implement visible focus indicators for all interactive elements within the application, especially for complex interfaces.

Exceptions:

• Custom Controls: In some custom controls, the default focus indicator might be overridden by custom styles. Even in these cases, a clear focus indicator should be provided.
• Minimalist Design: Some designs opt for very subtle focus indicators due to aesthetic reasons. However, the focus should still be perceivable to meet accessibility needs.