SVG images missing a text alternative on WordPress

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