WCAG 1.1.1 — Missing Alt Text on Images

Who Is Affected

Blind users who rely on screen readers, users with low vision who use magnification software, users on slow connections who disable images, and search engines indexing your content. Screen reader users hear "image" or the file name (e.g., "IMG_4392.jpg") when alt text is missing — this provides no useful information.

What This Means

Every image that conveys information must have a text alternative (alt text) that serves the same purpose as the image. This includes photos, charts, diagrams, logos used as links, and icons that convey meaning. Decorative images — backgrounds, spacers, or purely visual flourishes — should be marked as decorative so screen readers skip them entirely.

Alt text should be concise (typically under 150 characters) and describe the image's purpose in context, not just what it looks like. For example, a photo of a ribbon-cutting ceremony might have alt text: "Mayor Johnson cuts the ribbon at the new community center opening, October 2025."

Fix: Content Editor

Most missing alt text is a content editor issue — someone uploaded an image without filling in the alt text field.

1. Open the page in your content editor (WordPress, Joomla, etc.).
2. Click on the image that was flagged.
3. Find the Alt Text or Alternative Text field:
   • WordPress: Click the image → look in the right sidebar under "Alt Text (Alternative Text)"
   • Joomla: Click the image → in the editor toolbar, click the image icon → fill in "Alternative Text"
4. Write a concise description of what the image conveys in the context of the page.
5. If the image is purely decorative (adds no information), mark it as decorative:
   • WordPress: Leave the alt text field empty and check "Decorative" if available
   • HTML: Set alt="" (empty alt attribute, not missing)
6. Save the page and re-run a OctoComply scan to verify.

Common mistakes to avoid:

• Don't start with "Image of" or "Picture of" — the screen reader already announces it as an image
• Don't use the file name as alt text
• Don't repeat the page title or surrounding text as alt text
• Don't write alt text longer than a sentence unless the image is complex (use a long description instead)

Fix: CMS / Theme

If the image is part of your site template (logo, navigation icons, header images), the fix must be made in the theme or template settings.

1. Identify where the image is inserted — usually in the theme header, navigation, or footer template.
2. In the HTML, ensure the <img> tag has a meaningful alt attribute:

   <img src="logo.png" alt="City of Springfield official seal">
   

3. For icon fonts or SVG icons used as links/buttons, add aria-label to the parent element:

   <a href="/search" aria-label="Search"><i class="fa fa-search"></i></a>
   

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 controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content.

• W3C Understanding SC 1.1.1
• WCAG Technique H37 — Using alt attributes on img elements
• WCAG Technique H67 — Null alt on decorative images
• WCAG Technique G94 — Short text alternative
• WCAG Failure F65 — Omitting the alt attribute