SVG images missing a text alternative on Lovable

What this is

3 SVG graphics marked as images have no accessible name.

Who it affects

• Screen reader users

Standards

• WCAG 1.1.1 Non-text Content (A)

How to fix it

1. Add `aria-label="…"` (or a `<title>` child referenced with `aria-labelledby`) to the `<svg role="img">`.
2. If the graphic is decorative, remove `role="img"` and add `aria-hidden="true"` instead.

Example

Before

<svg role="img" viewBox="0 0 24 24"></svg>

After

<svg role="img" viewBox="0 0 24 24" aria-label="TODO: describe the graphic"></svg>

Or mark decorative graphics with aria-hidden="true".

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
• Image buttons missing alternative text
• Elements with role="img" missing a text alternative
• Links distinguished only by color
• Form fields without a label
• Dropdowns without a label