Skip to main content
TestAccessibility

Issue guide

Common findingHigh impact on tasks

Missing focus indicator

Do not remove outlines without replacing them.

Without a visible focus ring, keyboard users cannot see which element is active—navigation feels random.

See this on your site

Run a scan, then match rule names in your report to the sections below.

At a glance

Instructional

Visible keyboard focus

If you remove the default outline, replace it with a custom ring that meets contrast.

Why this matters

  • Focus styles are required for WCAG 2.4.7 and basic usability.
  • Custom themes often strip outlines without replacing them.

Where this shows up

Use this list to spot the same pattern on your templates and key URLs.

Navigation

  • Header links
  • Skip-link styling

Forms

  • Inputs and custom controls

Buttons and icons

  • Ghost buttons with no focus-visible state

Fix priority — address first

  • Global CSS that sets `outline: none`.
  • Component libraries with weak focus tokens.

Fix priority — can follow

  • Mouse-only prototypes (still fix before production).

Who is affected

Keyboard-only users, switch users, and people using screen readers with custom components.

Fix this in your platform

Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.

Fixes

Use `:focus-visible` styles with sufficient contrast. Avoid `outline: none` unless you supply a custom ring.

Examples (bad vs good)

  • Bad

    `button:focus { outline: none }` with no replacement.

    Good

    `button:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px }`.

How to fix

  1. Search CSS for `outline: none` and `:focus` overrides.
  2. Add `:focus-visible` styles with contrast against background.
  3. Test in light and dark themes; rescan.

Platform-specific notes

Where this often comes from on common stacks—and what to change.

React / CSS modules
Check focus styles in both light and dark themes.

Common mistakes

  • Using outline none globally.
  • Focus ring same color as background.

How to verify the fix

  1. Tab through the page without a mouse.
  2. Confirm every interactive target shows focus.
  3. Rescan.

Related: 2.4.7 Focus Visible.

Related guides

Run another scan

After you ship a fix, rescan the same URL and keep both report links to compare.

Broader topics

Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.

Related issues

Next steps

Keep the scan, fix, rescan loop going

Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.

Open scan