Required ARIA attributes missing on Next.js

What this is

3 elements have an ARIA role that needs extra attributes (for example a slider needs a current value), so its state cannot be announced.

Who it affects

• Screen reader users

Standards

• WCAG 4.1.2 Name, Role, Value (A)

How to fix it

1. Add the required attributes for the role (see the failure summary), or use a native element that provides them.

On Next.js

ARIA attributes live in your JSX; search the component, fix or delete the attribute. Prefer native elements over ARIA roles where possible.

Other platforms

• General advice
• Lovable

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.

More fixes

• Image buttons missing alternative text
• Links without a name
• Buttons without a name
• Interactive controls nested inside other controls
• Form fields without a label
• Dropdowns without a label