Skip to main content

Next.js fix guide

Fix ARIA mistakes on Next.js

Use ARIA sparingly; prefer native HTML.

Check your live page

Canonical issue page: ARIA mistakes

What this issue means

Guidance

Fix invalid combinations reported by automated tools; validate with browser accessibility inspectors.

How to fix on Next.js

In Next.js, verify both server and client components: hydration can change roles/names. Use `next/image` with meaningful `alt`, and ensure dynamic imports do not drop focus management.

How to fix

Prefer native elements; validate custom widgets with browser a11y inspectors.

Remove invalid combinations reported by axe; retest with keyboard.

Related: 4.1.2 Name, Role, Value.

Other platforms

TestAccessibility · Programmatic fix page · localhost:3001