WCAG Fix It: 1.1.1 Non-Text Content (Alt Text Guide)

If your website has images, and it does, WCAG 1.1.1 applies to you.

In this WCAG Fix It guide, we’re breaking down one of the most fundamental accessibility requirements: providing text alternatives for non-text content.

It sounds technical, but it’s really not. And fixing it is often one of the quickest accessibility wins you can make.

What Is WCAG 1.1.1?

WCAG 1.1.1 – Non-text Content requires that all meaningful images and non-text elements have a text alternative.

In simple terms: If something isn’t text (like an image, icon, button graphic, chart, or infographic), you must provide a written description that explains its purpose.

This is usually done using alt text.

What Is Alt Text?

Alt text (alternative text) is a short written description added to an image’s HTML:

<img src=”event-poster.jpg” alt=”Community accessibility event on April 24 at Newcastle Civic Centre”>

Screen readers use this description to explain the image to users who are blind or visually impaired.

If the image fails to load, the alt text appears instead. It also helps search engines understand what your images contain.

An alt text primary reason is for accessibility. But it’s also about clarity, resilience, and SEO.

The Human Impact of Missing Alt Text

Imagine browsing a website using a screen reader ans as you navigate the page, the reader announces headings, buttons, and links. Then it reaches an image, and its silence.

No description. No context. Nothing. You dont know what the image is about and might even think the website journey is broken.

If that image contained:

• An event announcement
• A limited-time offer
• Important instructions
• A “Book Now” graphic button
  

That opportunity to engage with a user is completely lost. Missing alt text doesn’t just create inconvenience; it creates exclusion.

Common WCAG 1.1.1 Failures

Here’s what we typically see when scanning websites:

• Images with no alt attribute at all
  
• Alt text that says “image” or “photo”
  
• File names used as alt text (e.g. IMG_29384.jpg)
  
• Keyword-stuffed alt text written for SEO, not humans
  
• Decorative images incorrectly described
  

All of these fail WCAG 1.1.1.

How to Fix Missing Alt Attributes

1. Identify Missing Alt Text

Run your site through an accessibility checker.

The Recite Me Accessibility Checker will flag:

WCAG 1.1.1 – Missing alt attribute

Click into the issue and you’ll see:

• The affected image
  
• The exact code snippet
  
• Clear guidance on what needs fixing
  
  

2. Add the Alt Attribute

Locate the <img> tag in your code.

If it looks like this:

<img src=”poster.jpg”>

Update it to:

<img src=”poster.jpg” alt=”Spring community fundraising event poster with date and location details”>

3. If You’re Using a CMS

No coding required and its super easy. In platforms like WordPress, Shopify, Wix, or Squarespace:

• Open your media library
  
• Select the image
  
• Add your description in the “Alt Text” or “Image Description” field
  
• Save
  

How to Write Good Alt Text

Here’s the golden rule of writing good and accessible alt text for images. Describe the purpose, not just the appearance.

Instead of:

“Image of people”

Use:

“Three team members collaborating around a laptop in an office”

Instead of:

“Blue button”

Use:

“Download the accessibility checklist button”

Keep it:

• Concise
• Relevant
• Context-aware
• Human-readable
  

Avoid:

• “Image of…” (screen readers already announce it’s an image)
• Keyword stuffing
• Over-describing decorative visuals
  

Decorative Images and Empty Alt Attributes

If an image is purely decorative (background shapes, visual dividers), it should use:

alt=””

An empty alt attribute tells screen readers to ignore it.

This is important, otherwise assistive technology users hear unnecessary clutter.

How to Test WCAG 1.1.1

After adding alt text:

1. Re-run your accessibility scan
   
2. Confirm WCAG 1.1.1 no longer appears
   
3. Test with a screen reader (NVDA or VoiceOver)
   

Hover over the image. If it now reads your description aloud, you’ve fixed it.

Why WCAG 1.1.1 Matters Beyond Compliance

Fixing alt text:

• Removes barriers for blind users
  
• Improves SEO
  
• Improves resilience when images fail
  
• Reduces legal risk
  
• Improves user trust
  

It’s a small technical change, but a massive user impact.

WCAG 1.1.1 Quick Fix Checklist

• Every meaningful image has alt text
  
• Decorative images use alt=””
  
• Alt text describes purpose, not appearance only
  
• No file names used as alt text
  
• No keyword stuffing
  
• Re-tested after fix
  

WCAG 1.1.1 is often one of the easiest accessibility issues to fix, but it’s also one of the most important. This is because when an image carries meaning and that meaning isn’t communicated, someone is excluded.

WCAG 1.1.1 Alt Text Frequently Asked Questions

What is WCAG 1.1.1 Non-text Content?

WCAG 1.1.1 requires that all meaningful non-text content, including images, icons, charts, and graphics, must have a text alternative so screen readers can communicate the content to users with visual impairments.

Is alt text legally required?

In many regions, including the US (ADA), UK Public Sector regulations, and the EU (EAA), meeting WCAG Level A requirements such as 1.1.1 is considered essential for digital accessibility compliance.

What happens if I don’t add alt text?

Users who rely on screen readers may miss critical information, including navigation buttons, offers, or instructions. Missing alt text can also increase legal risk and harm your SEO performance.

How long should alt text be?

Alt text should be concise but descriptive enough to explain the purpose of the image. Typically, one short sentence is sufficient, unless the image is complex (such as a chart), in which case a longer description may be required.