Keyboard focus is not visible on Next.js
What this is
3 controls show no change when tabbed to. Keyboard users cannot tell where they are on the page.
Who it affects
- Keyboard users
- People with low vision
- People with motor disabilities
Standards
How to fix it
- Remove any CSS that sets `outline: none` / `outline: 0` on focus unless you replace it with another visible style.
- Add a clear focus style such as a 3px outline with an offset, using a color that contrasts 3:1 with the background.
- Apply it once, globally, with `:focus-visible`.
On Next.js
Add a global `:focus-visible` style (or Tailwind `focus-visible:ring-2`) and delete `outline-none` utilities that have no replacement ring.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.