2.4.7: Focus Visible

Guideline 2.4.7 ensures that the keyboard focus indicator is visible when navigating through a webpage using the keyboard. This allows users to easily see which element is currently focused, improving navigation and usability for individuals relying on keyboard navigation.

Importance of 2.4.7: Focus Visible Success Criterion

A visible focus indicator is crucial for accessibility, especially for users with visual impairments or those who rely on keyboard navigation. Without a visible focus indicator, it can be difficult for users to understand their current position on a webpage, leading to confusion and frustration. Ensuring a clear and visible focus indicator enhances the user experience by making navigation more intuitive and efficient. This is particularly important for forms, interactive controls, and links, where users need to see where they are focused to interact correctly.

Primary Use Cases and Requirements Under Guideline 2.4.7: Focus Visible (Level AA)

Use Case 1: Form Fields

Example: A contact form with input fields for name, email, and message.

Implementation: Ensure that each form field shows a visible focus indicator when tabbed into.

How to Test: Use the Tab key to navigate through the form fields. Verify that each field shows a visible focus indicator (e.g., border change, background color change).

Use Case 2: Interactive Buttons

Example: A webpage with buttons for submitting a form, navigating to another page, or triggering a modal dialog.

Implementation: Ensure that each button shows a visible focus indicator when tabbed into.

How to Test: Use the Tab key to navigate through the buttons. Verify that each button shows a visible focus indicator (e.g., outline, color change).

Use Case 3: Navigation Links

Example: A navigation menu with links to different sections of the website.

Implementation: Ensure that each link shows a visible focus indicator when tabbed into.

How to Test: Use the Tab key to navigate through the links in the navigation menu. Verify that each link shows a visible focus indicator (e.g., underline, border change).

Use Case 4: Modal Dialogs

Example: A modal dialog that appears when a button is clicked, containing interactive elements like buttons and form fields.

Implementation: Ensure that all interactive elements within the modal dialog show a visible focus indicator when tabbed into.

How to Test: Trigger the modal dialog and use the Tab key to navigate through its elements. Verify that each element shows a visible focus indicator.

Testing Steps:

1. Manual Testing: Use the Tab key to navigate through the webpage. Observe the focus indicator for each interactive element to ensure it is visible and clear.

2. Screen Reader Testing: Use a screen reader to navigate through the webpage. Confirm that the focus indicator is announced and visible for each interactive element.

3. Automated Tools: Use automated accessibility testing tools to check for focus visibility issues. Review the tool's report and manually verify any flagged elements to ensure compliance.

How to Implement 2.4.7: Focus Visible

CSS for Focus Styles

Use CSS to define clear and visible focus styles for interactive elements.

a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid #005fcc; /* A bright color for visibility */
  outline-offset: 2px;
}

Custom Focus Indicators

Enhance the default focus indicator with additional styles for better visibility.

a:focus, button:focus {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 3px 2px rgba(0, 95, 204, 0.8); /* Custom focus shadow */
}

Ensure Consistent Focus Styles

Apply consistent focus styles across all interactive elements to maintain a uniform user experience.

.focus-visible:focus {
  outline: 3px dashed #ff6600; /* Dashed outline for better visibility */
  outline-offset: 3px;
}

JavaScript for Enhanced Focus Management

Use JavaScript to manage focus for custom components or complex interactions.

document.getElementById('openModal').addEventListener('click', function() {
  var modal = document.getElementById('modal');
  modal.style.display = 'block';
  modal.querySelector('.close').focus(); // Set focus to the close button
});

document.getElementById('closeModal').addEventListener('click', function() {
  var modal = document.getElementById('modal');
  modal.style.display = 'none';
  document.getElementById('openModal').focus(); // Return focus to the trigger button
});

Testing and Iteration

Regularly test focus visibility as part of your development process. Use real-world scenarios and assistive technologies to ensure the focus indicator is effective and accessible.