WCAG (Level AA) SC 2.4.7 Focus Visible (W3.org)
Issue description
WCAG 2.4.7, “Focus Visible” ensures that when a user uses a keyboard to navigate a website, it’s crystal clear which element/content currently has focus. This is essential for people who rely on keyboards for navigation, including:
- Users with motor impairments: Those who have difficulty using a mouse need a clear visual indicator of where the keyboard focus is to interact with the page.
- Users of assistive technologies: Many assistive technologies, like screen readers, rely on keyboard navigation, and a visible focus indicator helps users understand what the screen reader is focusing on.
- Keyboard-only users: Anyone who prefers or needs to use a keyboard for navigation benefits from a clear visual cue of the active element.
Why focus visible matters
- Provides a clear target: A visible focus indicator shows users exactly which element they are interacting with, preventing accidental clicks or activations.
- Improves navigation: It helps users track their position on the page and understand the order of interactive elements.
- Reduces confusion: It prevents disorientation and frustration, especially for users with cognitive disabilities.
Essentially, WCAG (Level AA) SC 2.4.7 Focus Visible ensures that a clear visual indicator is provided when an element receives keyboard focus. This indicator should be easily noticeable and distinguishable from the surrounding content, making keyboard navigation more predictable and user-friendly for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.4.3 Focus Order
- WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum)
- WCAG 2.2 (AAA) SC 2.4.12 Focus Not Obscured (Enhanced)
- WCAG 2.2 (AAA) SC 2.4.13 Focus Appearance
- WCAG (Level A) SC 3.2.1 On Focus
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.7, “Focus Visible” involves ensuring that a clear visual indicator is provided when an element receives keyboard focus. Here’s how:
Provide a visible focus indicator
- Default focus indicators: Most browsers provide default focus indicators (usually a dotted outline). If these are sufficient and meet contrast requirements, you might not need to do anything.
- Custom focus indicators: If you need to customize the focus indicator, ensure it’s highly visible. Use a distinct color, thickness, or style (e.g., a solid border, a glow, or a change in background color).
- Ensure Sufficient Contrast Contrast ratio: The focus indicator should have a contrast ratio of at least 3:1 against the background color. Use a contrast checking tool to verify this.
- Adjacent colors: Consider the contrast against adjacent colors as well, especially if the element is near other elements with similar colors.
Maintain consistency
- Consistent styles: Use consistent focus styles across all interactive elements on your website. This helps users learn and predict how focus is indicated.
Avoid removing or overriding focus
- Don’t remove outline: Avoid using CSS to remove the default focus indicator (e.g.,
outline: none;) unless you provide a suitable custom indicator. - Don’t override with JavaScript: Avoid using JavaScript that overrides or hides the focus indicator.
Test with different browsers
- Browser variations: Focus indicators can vary slightly across different browsers. Test your website in various browsers to ensure the focus is clearly visible in all of them.
Consider user preferences
- High contrast mode: Ensure your focus indicators are visible and distinguishable when users enable high contrast mode in their operating system settings.
- Customizable styles: Consider offering users the ability to customize the focus indicator style through website settings if feasible.
Example
If your website has interactive elements with a subtle or invisible focus indicator, you can:
- Add a CSS rule: Add a CSS rule to provide a more visible focus indicator, such as:
CSS
button:focus,
input:focus,
a:focus {
outline: 2px solid #007bff; /* Blue outline */
}By implementing these techniques, you can ensure that keyboard focus is clearly visible on your website, making it easier for everyone to navigate and interact with your content, especially those who rely on keyboards for accessibility.
