Image buttons missing alternative text on Next.js

What this is

3 image buttons have no text, so screen reader users cannot tell what pressing it does.

Who it affects

• Screen reader users
• People with motor disabilities

Standards

• WCAG 1.1.1 Non-text Content (A)
• WCAG 4.1.2 Name, Role, Value (A)

How to fix it

1. Add an `alt` to the `<input type="image">` that describes the action (for example "Search"), not the picture.

Example

Before

<input type="image" src="/go.png">

After

<input type="image" src="/go.png" alt="TODO: describe the action, e.g. Search">

The alt text should describe what the button does.

On Next.js

Give every `<Image>` / `<img>` an `alt` prop with a description, or `alt=""` when decorative. `next/image` requires `alt`, so check imports of plain `<img>` too.

Other platforms

• General advice
• WordPress
• Elementor
• Shopify
• Webflow
• Framer
• Wix
• Squarespace
• 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

• Images missing alternative text
• SVG images missing a text alternative
• Elements with role="img" missing a text alternative
• Links without a name
• Buttons without a name
• Links distinguished only by color