Image buttons missing alternative text on Lovable

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 Lovable

Ask the builder to add descriptive `alt` text to every `<img>` (and `alt=""` to decorative ones); in generated React code it is the `alt` prop on `<img>`.

Other platforms

• General advice
• WordPress
• Elementor
• Shopify
• Webflow
• Framer
• Wix
• Squarespace
• Next.js

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