Image buttons missing alternative text on Framer

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 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
• 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