Image buttons missing alternative text on WordPress

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 WordPress

In the Media Library open each image and fill in "Alternative Text". In the block editor select the image block and edit "Alt text" in the sidebar. For decorative images tick "Decorative image" or leave alt empty.

Other platforms

• General advice
• Elementor
• Shopify
• Webflow
• Framer
• 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