WCAG 1.1.1 — Decorative Image Not Marked Null

Who Is Affected

Blind and low vision users who rely on screen readers to navigate websites. These users become frustrated when screen readers announce irrelevant decorative images instead of focusing on meaningful content.

What This Means

Decorative images serve only visual purposes — they don't add information to the page content. Examples include border graphics, visual separators, background patterns, or images that are purely aesthetic. When these images have alt text (even generic text like "image" or the filename), screen readers announce them unnecessarily, creating clutter in the audio experience.

These images should have empty alt text (alt="") so screen readers skip over them entirely. This is different from missing alt text, which causes screen readers to announce the filename or surrounding text.

Fix: Content Editor

For images added through your content management system:

1. Open the page containing the decorative image.
2. Select the image in your editor.
3. In the image properties or alt text field, enter empty quotes: alt=""
   • Joomla: In the Image dialog, leave the "Alt Text" field completely empty
   • WordPress: In the Image block settings, delete all text from the "Alt text" field
4. Save the page.

Important: Don't remove the alt attribute entirely — this causes screen readers to announce the filename. Always use alt="" for decorative images.

Fix: CMS / Theme

If decorative images are part of your theme or template:

1. Locate the image in your theme files (typically in /templates/ for Joomla or /themes/ for WordPress).
2. Find the <img> tag for the decorative image.
3. Ensure it has alt="" (empty alt attribute).
4. If the image is purely decorative and can be moved to CSS, consider using it as a background image instead: background-image: url(decorative-image.jpg)

Example fix:

<!-- Wrong -->
<img src="border-decoration.png" alt="border decoration">

<!-- Correct -->
<img src="border-decoration.png" alt="">

<!-- Even better if possible -->
<div style="background-image: url(border-decoration.png)"></div>

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 when the non-text content is pure decoration, in which case it is implemented in a way that it can be ignored by assistive technology.

• W3C Understanding SC 1.1.1
• WCAG Technique H67 — Using null alt text for decorative images
• WCAG Technique C9 — Using CSS to include decorative images
• WCAG Failure F38 — Missing alt attribute causing filename announcement
• WCAG Failure F65 — Omitting alt attribute on img elements