A visible focus indicator is essential for keyboard accessibility. It shows which element will be activated when the user presses Enter or Space. Without a visible focus indicator, keyboard users are lost. This page covers best practices for focus indicators that align with WCAG 2.4.7 and ADA Title II requirements.
Why this matters
Keyboard users navigate by pressing Tab to move focus from element to element. They need to see where focus is at all times. Without a visible focus indicator, users don’t know which link they’re about to click or which form field they’re about to edit.
Many users depend entirely on keyboard navigation: those who are blind (who use screen readers), those with low vision (who may use magnification), those with motor disabilities (who cannot use a mouse), and power users who prefer keyboards. A missing or invisible focus indicator breaks the entire experience for these users.
Focus indicators benefit everyone. They help users with cognitive disabilities stay oriented on the page. They make pages easier to use for anyone navigating with a keyboard. A clear, visible focus indicator is a sign of respectful, accessible design.
What is Focus?
Focus indicates which element will respond to keyboard input. When you press Tab, focus moves from element to element. The focused element is highlighted so the user knows which element is active.
Focusable elements (by default):
- Links (<a> with href)
- Buttons (<button>)
- Form inputs (<input>, <textarea>, <select>)
- Other interactive elements that have semantic HTML
Non-focusable elements (by default):
- Divs, spans, paragraphs
- Images without alt text or role
- Elements without semantic meaning
You can make any element focusable using tabindex=”0″, but it’s better to use semantic HTML when possible.
Example of focus: When you press Tab on a web page, a link might have a blue outline around it. That outline is the focus indicator, showing you which element is currently focused.
Browser Default Focus Styles
All modern browsers provide default focus indicators for interactive elements. These indicators vary by browser but are typically outlines around focused elements.
Browser default focus examples:
- Chrome/Edge: Blue outline around focused elements
- Firefox: Blue outline (sometimes dashed)
- Safari: Blue ring around focused elements
Default focus indicators are usually sufficient for basic accessibility. They meet WCAG 2.4.7 requirements. However, they may not match your site’s visual design.
Browser default focus styles typically apply a blue outline around focused elements with some offset to make them visible. These defaults are usually sufficient for accessibility and meet WCAG 2.4.7 requirements without additional styling.
When to use browser defaults: Browser defaults are fine for most sites. If your site design allows blue outlines, use them. They’re reliable and well-understood by users.
Creating Custom Focus Styles
If browser default focus indicators don’t match your design, you can create custom focus styles. Custom focus indicators must be equally visible and meet contrast requirements.
Custom focus indicator requirements:
- Must be visible against all backgrounds (sufficient contrast)
- Should be at least 2 pixels wide
- Should be clearly distinguishable from non-focused states
- Should be consistent across your site
- Should have sufficient contrast (minimum 3:1 against adjacent colors)
Custom focus indicators can take many forms: An orange outline, a colored background highlight, a bottom border, or a combination of effects like outline plus box-shadow. The important thing is that the focus indicator is clearly visible against all backgrounds and distinct from the unfocused state. Using :focus-visible (rather than :focus) applies focus styles only when navigating by keyboard, not when clicking with the mouse, which is the best practice.
Using :focus-visible applies focus styles only when navigating by keyboard (not when clicking with mouse). This prevents blue outlines from appearing during mouse interaction.
The outline:none Problem
Many designers remove focus indicators using outline: none to match their visual design. Never remove focus indicators without providing a replacement. This violates WCAG 2.4.7 and breaks keyboard accessibility.
Bad example (never do this): Using outline: none on all interactive elements removes all focus indicators with no replacement, completely breaking keyboard accessibility. Keyboard users will have no way to see which element is focused.
Now keyboard users have no visible focus indicator. They cannot navigate your site.
Better approach: Replace the outline with something else If you don’t like the default outline, remove it only after adding an alternative focus indicator. For example, use background color, border-radius, and box-shadow to create a visible focus state that matches your design.
Now focus is visible, just styled to match your design.
Or, keep the outline but customize it: Instead of removing the outline entirely, just change its color to match your design (like an orange outline instead of blue) and adjust the width and offset for visibility. This maintains the expected browser behavior while adapting to your design system.
If you use outline: none, you must provide an alternative focus indicator using background-color, box-shadow, border, or other visible property.
Focus Indicator Contrast
Focus indicators must have sufficient contrast to be visible against all backgrounds. A focus indicator that’s invisible on some backgrounds is not truly visible.
WCAG 2.4.7 requires: A focus indicator with at least 3:1 contrast ratio against adjacent colors.
Examples of adequate contrast:
- Orange outline (#ff9500) on white background: Good contrast
- Orange outline (#ff9500) on light background: May not meet 3:1 ratio
- White outline on light background: Poor contrast, don’t use
- Dark outline on light background: Good contrast
Testing focus indicator contrast: Use a contrast checking tool like DASH’s Color Contrast guide or WebAIM’s contrast checker to verify your focus indicator meets the 3:1 ratio.
Solution: Use multiple visual cues Combining outline, background color, and underline ensures the focus indicator is visible on almost all backgrounds. If an outline doesn’t show well on one background color, the background highlight or underline ensures something is visible. Multiple cues together create more robust focus indicators.
Combining outline, background color, and underline ensures the focus indicator is visible on almost all backgrounds.
Focus in Custom Components
When you create custom interactive components (not standard HTML buttons or links), you must ensure they have visible focus indicators.
Example: Custom button component A custom button-like div would need role=”button” and tabindex=”0″ to be focusable, plus CSS styling to show focus with an outline or other indicator.
Better approach: Use a native button element instead Native button elements get focus handling automatically and meet accessibility requirements without custom code. You only need to style the focus state if the browser default doesn’t match your design.
Native buttons get browser default focus handling automatically. You only need to style the focus state if the default doesn’t match your design.
Checklist for custom components:
- Component must be focusable (use tabindex=”0″ if needed)
- Component must have a visible focus indicator
- Focus indicator must be clearly visible on all backgrounds
- Focus indicator contrast should meet 3:1 ratio
- Test with keyboard navigation and with screen readers
Common mistakes to avoid
- Using outline:none without replacement: This removes the focus indicator completely, breaking keyboard accessibility. Always provide an alternative focus style if you use outline:none.
- Focus indicator with poor contrast: A focus indicator that blends into the background is invisible. Ensure focus indicators have 3:1 contrast against adjacent colors.
- Very thin focus indicators: A 1-pixel outline is hard to see. Use at least 2-3 pixels for clarity.
- Focus only on hover: Keyboard users don’t hover. Focus styles must be visible when the element receives keyboard focus, not just mouse hover.
- Inconsistent focus styles across the site: Use consistent focus styling throughout your site. Users learn what focus looks like and expect it everywhere.
- Focus indicators that are too subtle: High contrast, clearly visible focus indicators are better than subtle ones. Err on the side of being obvious.
- Removing focus indicators on form inputs: Form inputs especially need visible focus indicators. Users need to know which field they’re editing.
- Not testing focus indicators on all backgrounds: Test your focus indicators on light backgrounds, dark backgrounds, and colored backgrounds. Make sure they’re visible everywhere.
- Using the same color for focus and normal state: Focus indicators must be visually distinct from unfocused elements. Don’t use the same styling.
Related DASH resources
Getting help
UGA’s Digital Accessibility Services Hub (DASH) is here to support you. Whether you need guidance on making your content accessible, help troubleshooting an issue, or training for your team, we are ready to help.
- Contact DASH at [email protected] for consultations, training, or technical assistance.
Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.