How to Fix Missing Image Alt Text Attributes

Category: Hygiene & Accessibility (Weight: 20 points) • Severity: Medium Warning

Why Image Alt Text Matters

The alt attribute serves two vital purposes: it provides a descriptive textual alternative for visually impaired visitors using screen readers (WCAG 2.1 Success Criterion 1.1.1 Non-text Content), and it informs search engine crawlers what an image illustrates, driving traffic from Google Image Search. Decorative images should use an explicit empty attribute alt="" so screen readers ignore them cleanly.

Platform-Specific Solutions

WordPress Fix Steps

Go to Media > Library in your WP Admin dashboard.
Click the image flagged in your Nyrolo report.
In the Alternative Text field on the right sidebar, enter a concise description of what the image depicts (e.g., “SaaS dashboard displaying revenue growth charts and conversion rate metrics”).
WordPress automatically auto-saves media library metadata.
If the image is inserted inside a Gutenberg post or page, select the Image Block, expand Block Settings > Image Settings, and verify the Alternative Text field is filled.

Webflow Fix Steps

Open the Webflow Designer and select the flagged Image element on canvas.
Open the Element Settings panel (press D or click the Gear icon).
Under Image Settings, locate the Alt Text dropdown menu.
Choose Custom description and enter your descriptive sentence.
If the image is purely decorative background embellishment (like a gradient blur or icon separator), select Decorative to render a compliant alt="" attribute.
Publish the site.

Shopify Fix Steps

For product images: Go to Products, choose the product, click on the specific media file thumbnail, and click Add alt text.
For theme sections and banners: Go to Online Store > Themes > Customize.
Select the section (e.g. Image with text, Hero slideshow), click the selected image, and click Edit or fill the “Image alt text” input.
Save your theme changes.

Custom Code (React / Next.js Image)

In Next.js, always pass a descriptive alt prop to next/image:

import Image from 'next/image';

// Meaningful visual content
<Image
  src="/images/checkout-modal.png"
  alt="Stripe payment checkout modal showing credit card form and discount field"
  width={600}
  height={400}
/>

// Purely decorative background illustration
<Image
  src="/decorations/blob.svg"
  alt=""
  aria-hidden="true"
  width={200}
  height={200}
/>