Skip to main content
AccessibilityBrief

Elements with role="img" missing a text alternative on Lovable

What this is

3 elements with `role="img"` have no accessible name, so the image is announced without a description.

Who it affects

  • Screen reader users

Standards

How to fix it

  1. Add `aria-label` (or `aria-labelledby`) describing the image, or remove `role="img"` if it is decorative.

Example

Before

<div role="img" class="logo"></div>

After

<div role="img" class="logo" aria-label="TODO: describe the image"></div>

Replace the TODO with a real description.

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

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.

Check your own website

Paste a web address. The free scan checks one page and shows what it finds.

Example: example.com/pricing. We scan this one page only.

More fixes

Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.