Level: Intermediate
A focus state shows a keyboard user exactly where they are on the page, and a poorly designed or missing one leaves them genuinely lost.
Make Focus States Clearly Visible
A subtle, low-contrast focus indicator can be nearly as unusable as no focus indicator at all for a visitor who genuinely relies on it.
Don't Simply Remove Default Focus Styles
Removing a browser's default focus outline for purely aesthetic reasons, without replacing it with an equally clear custom style, is a common and significant accessibility mistake.
Keep Focus State Styling Consistent Across the Site
A consistent, predictable focus style helps a keyboard user build confidence navigating your site, rather than encountering different treatment in different sections.
Next step: Use the Color Picker to design a custom focus state with strong enough contrast to remain clearly visible against your site's background.