AccessAuditPro
← Back to Free Tool Run Free Audit
Step-by-Step Remediation Tutorial

How to Add Alt Text in WordPress & Shopify (The Right Way)

Missing image alt text is the single most common violation cited in 70%+ of digital ADA lawsuits. Here is how to fix it in WordPress and Shopify in minutes.

The 3 Golden Rules for Compliant Alt Text

Rule 1

Be Concise & Descriptive

Describe the specific subject and context in 8–15 words. Avoid keyword stuffing for SEO purposes.

Rule 2

Drop "Image of" / "Photo of"

Screen readers automatically announce "graphic" or "image". Writing "Image of blue sneakers" causes redundant audio.

Rule 3

Mark Decorative as Empty

For purely ornamental lines, abstract shapes, or background textures, use empty alt="".

W

How to Add Alt Text in WordPress

WordPress provides two primary ways to set alt text: through the central Media Library or directly in the Gutenberg Block Editor.

  1. Method A (Media Library - Best for all existing images):
    Navigate to WP Admin → Media → Library. Click on any image. On the right-hand side panel, locate the Alternative Text box. Enter your description. Changes auto-save immediately.
  2. Method B (Gutenberg Block Editor):
    While editing a Page or Post, click on the Image block. In the right sidebar settings panel under Image Settings, fill in the Alternative Text (Alt text) input field.
  3. Verify Theme Output:
    Right-click the image on your live website, select Inspect, and confirm that the rendered HTML tag contains <img alt="Your description"...>.
S

How to Add Alt Text in Shopify

E-commerce product photos are the #1 target of retail ADA lawsuits because visually impaired buyers cannot discern product colors, materials, or features.

  1. For Product Catalog Images:
    In your Shopify Admin, click Products. Select a product. Under the Media section, click directly on the image thumbnail you want to edit. In the preview modal, click Add alt text on the right pane. Enter the specific description (e.g. "Front view of black leather messenger bag with silver buckles") and click Save alt text.
  2. For Theme Banners & Homepage Slideshows:
    Go to Online Store → Themes → Customize. Click on the Image Banner or Slideshow section on your homepage. In the image picker section, click Edit or look for the Image alt text field.
  3. For Files in Content Assets:
    Go to Content → Files in your Shopify sidebar, select the image, and update the alt text attribute.

Real-World Examples: Bad vs. Compliant Alt Text

Image Context Bad (Lawsuit Risk) Compliant (WCAG 2.1 AA)
Bakery Croissant Photo alt="IMG_4092.jpg" alt="Freshly baked golden butter croissant on a marble counter"
Dentist Clinic Team alt="dentist austin tx best cheap dental doctor" alt="Dr. Sarah Miller and clinical dental hygiene team in treatment room"
Promotional Sale Banner alt="banner" or missing alt alt="Labor Day Sale: 30% off all plumbing services using code FALL30"

Check If You Missed Any Images

Run your store or blog URL through AccessAudit Pro to scan all images and detect missing alt attributes in 60 seconds.

Run Free Site Audit Now →