Why a11y?

Focus Indicators

Why Focus Indicators Matter

  • Focus indicators show which interactive element (link, button, form field, etc.) is currently selected when navigating using the keyboard.
  • Keyboard users (including people with motor impairments, vision impairments, and power users) rely heavily on focus indicators to know which element they are interacting with.
  • Without visible focus, it’s difficult for users to know where they are on the page, making it almost impossible to navigate without a mouse.

Best Practices for Focus Indicators

Ensure Focus is Visible

By default, browsers apply a focus style (often a blue or dotted outline) to interactive elements like links, buttons, and form inputs. However, custom CSS can sometimes remove or hide the default focus outline, which can lead to accessibility issues.

<a href="#">Link</a>
<button>Submit</button>

Browsers will automatically apply a focus outline when these elements are navigated to using the keyboard (Tab key).

Do Not Remove Focus Styles

Some developers remove the focus outline for aesthetic reasons, but this can significantly hinder keyboard navigation.

Bad Practice:

:focus {
	outline: none;
}

Solution: Always keep a focus indicator. If you want to customize it, ensure it’s still clearly visible.

Customize Focus Indicators for Better Usability

You can design custom focus styles that are both accessible and match your site’s branding. Make sure the focus indicator has sufficient contrast and is distinguishable from the rest of the page.

Good Focus Style Example:

a:focus,
button:focus {
	outline: 3px solid #007BFF; /* Clear focus indicator */
	outline-offset: 2px; /* Adds spacing between the outline and element */
}

This provides a highly visible blue outline around focused elements. The outline-offset creates some space between the outline and the element, improving the indicator’s clarity.

Alternative Focus Style Example: You can also use background color or box-shadow for a softer focus style:

button:focus {
	box-shadow: 0 0 5px 3px rgba(0, 123, 255, 0.75); /* Glowing effect */
}

Provide Sufficient Color Contrast for Focus Indicators

Ensure that the focus indicator has sufficient contrast against the background of the element it is highlighting. WCAG suggests a minimum contrast ratio of 3:1 for visual indicators like focus outlines.

  • WCAG 1.4.11 - Non-Text Contrast: The focus indicator needs to have sufficient contrast against the background.
  • Color Contrast Testing: Use tools like the WebAIM Contrast Checker to ensure your focus indicator meets contrast requirements: WebAIM Contrast Checker

Focus Order and Keyboard Navigation

For keyboard users, the order in which focus moves through the page is critical. Focus should move in a logical, predictable order that aligns with the visual layout of the page.

WCAG 2.4.3 - Focus Order: Ensure that focusable elements are navigated in a logical order.

Make sure that:

  • Links, buttons, and other interactive elements are focusable via keyboard (using Tab to navigate).
  • Focus moves from top to bottom, left to right (or in a logical sequence) across the page.
  • Use the tabindex attribute only when necessary to control the focus order. Improper use of tabindex can cause confusion by interrupting the natural tab order.
<a href="#main-content">Skip to main content</a>
<nav>
	<ul>
		<li><a href="/home">Home</a></li>
		<li><a href="/about">About</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>
</nav>
<main id="main-content">
	Main content go here
</main>
  • The "Skip to main content" link appears first for accessibility.
  • The focus order follows the natural reading order of the page, ensuring intuitive keyboard navigation.

Testing Focus Indicators

Keyboard Testing

To ensure proper focus management and visibility:

  • Use the Tab key to navigate through all interactive elements on your webpage.
  • Check that the focus indicator is always clearly visible and that focus moves in a logical order.

Testing Tools

  • Axe Accessibility: A tool that tests accessibility, including visible focus management. Download Axe
  • WAVE Accessibility Tool: Provides a summary of focus issues and visible focus problems. WAVE Tool
  • Screen Readers (NVDA, JAWS): Testing with screen readers ensures that keyboard focus is announced correctly and that users can navigate through the site logically.

Additional Focus Management Considerations

Skip Links

Provide a skip link at the top of the page to allow keyboard users to skip repetitive navigation (like the main menu) and jump directly to the main content.

<a href="#main-content" class="skip-link">Skip to main content</a>

Ensure that the skip link becomes visible when focused:

.skip-link {
	position: absolute;
	left: -999px; /* Hidden by default */
}

.skip-link:focus {
	left: 0; /* Visible when focused */
	top: 0;
	background-color: #000;
	color: #fff;
	padding: 10px;
}

Handling Custom Elements

For custom interactive elements (e.g., a custom dropdown made with div or span), you must ensure that they are both focusable and navigable via keyboard.

  • Use tabindex="0" to make non-focusable elements focusable.
  • Add ARIA attributes (role="button", aria-expanded, etc.) to provide context to screen readers.

Related links