WCAG 1.1.1 — Non-descriptive Alt Text

Who Is Affected

People who are blind or have severe low vision and use screen readers, users with slow internet connections who disable images, and users of text-only browsers or older devices.

What This Means

Alt text (alternative text) is hidden text attached to images that describes what the image shows. Screen readers speak this text aloud so blind users understand the visual content. Generic phrases like "image," "photo," or "graphic" provide no useful information. Filenames like "IMG_2047.jpg" are equally unhelpful.

Effective alt text describes the meaningful content or function of the image. For a photo of Mayor Johnson cutting a ribbon at the new library, good alt text might be "Mayor Johnson cuts ribbon at Grand Opening of Central Library" rather than "image of ribbon cutting" or "DSC00394.jpg."

Fix: Content Editor

Review each flagged image and rewrite its alt text to be descriptive and purposeful:

1. For informative images: Describe what's shown in a way that conveys the same information the image provides to sighted users. Include relevant details like who, what, where, when.

   • Poor: "City council meeting"
   • Better: "Five council members seated at curved desk during Tuesday budget hearing"

2. For functional images (buttons, links): Describe what happens when clicked, not what it looks like.

   • Poor: "Red arrow pointing right"
   • Better: "Next page" or "Continue to application"

3. For decorative images: Use empty alt text (alt="") if the image adds no information.

4. For complex images (charts, diagrams): Provide a brief description in alt text and include detailed explanation in surrounding text or linked document.

In WordPress: Edit the image in the Media Library or while editing a post. Update the "Alternative Text" field.

In Joomla: Edit the article containing the image. Click on the image and select "Image Properties" or edit the Image field's "Alt Text" property.

Fix: CMS / Theme

If your theme automatically generates poor alt text from filenames or includes generic placeholder text:

1. WordPress: Remove any theme code that auto-generates alt text from filenames. Check functions.php and image-related template files.

2. Joomla: Review your template's image handling code. Ensure it doesn't override manually entered alt text with generic values.

3. Set up content guidelines requiring staff to add meaningful alt text before publishing images.

4. Consider plugins like "Auto Alt Text" (WordPress) that can provide starting points for manual review, but never rely on automated solutions alone.

Standard Reference

WCAG 2.1 Success Criterion 1.1.1 — Non-text Content, Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for specific situations including decoration, formatting, and invisible content.

• W3C Understanding SC 1.1.1
• WCAG Technique G94 — Short text alternative
• WCAG Technique G95 — Long text alternative
• WCAG Technique H37 — Using alt attributes on img elements
• WCAG Failure F30 — Using text alternatives that are not alternatives
• WCAG Failure F67 — Failing due to providing long description for non-text content