SVG images missing a text alternative on Framer

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 Framer

Select the image layer → in the right panel find "Alt" under the image properties and describe the image. Mark purely decorative images with an empty alt.

Other platforms

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