WCAG: Alternative Text for Images

The European Union has implemented new accessibility regulations with a compliance deadline of June 28th, 2025. Many companies are proactively taking steps to meet these standards to avoid penalties and ensure their digital platforms are accessible to all users.

Introduction

The European Accessibility Act (EAA) - Directive 2019/882, which establishes a comprehensive set of accessibility rules for digital offerings within the EU market, is going to come into effect next year. The deadline for compliance with this new legislation is June 28th, 2025. WCAG 2 Level AA is widely recognised as a benchmark for achieving EAA compliance.

With this in mind, I'm taking a look at some of the most common accessibility issues according to The WebAIM 2024 report on the accessibility of the top 1,000,000 home pages, who they affect, and how to fix them.

In this post, I'll be looking at the image alternative (alt) text, why it's important, who it affects, and how to fix it.

Why alt text matters

Alt text plays a crucial role in making the web more inclusive for all users, especially those who are visually impaired. It’s not just about filling out an attribute in your HTML code; it’s about ensuring every user can experience the full content of your site, regardless of their ability to see the images.

Who is impacted by missing or poor alt text?

The absence of alt text, or poorly written alt text, impacts several user groups, including:

• Screen Reader Users: Screen readers rely on alt text to interpret and vocalise the content of an image. Without alt text, users won’t know what the image represents, missing out on essential information.
• Users with Cognitive Disabilities: Descriptive alt text helps users with cognitive disabilities better understand the context of the image within the webpage.
• Low Bandwidth Users: Alt text can be beneficial for users with slow internet connections, as it provides a text-based description of an image when it fails to load.
• Search engines: Search engines use the alt text to understand what an image represents. Proper alt text helps improve your website's search rankings.

By omitting alt text on images that convey meaning, you risk creating a frustrating and exclusionary experience for these users.

WCAG alt text guidelines

The WCAG provides clear guidelines to ensure alt text is used effectively. Below are some key criteria that must be followed to meet accessibility standards:

• WCAG 1.1.1: Non-text Content (Level A) All non-text content, including images, must have an alt text description unless the image is purely decorative.
• WCAG 2.4.4: Link Purpose (In Context) (Level A) When an image is used as a link, the alt text should describe the link’s purpose, not just the image.
• WCAG 2.5.3: Label in Name (Level A) Any image used as a control (e.g., buttons) must have alt text that matches the label presented to users.

WCAG offer clear standards for implementing alt text, primarily under WCAG 1.1.1: Non-text Content. This criterion ensures that all non-text content, including images, has a text alternative. Here are some key principles to follow:

• For images that convey important information, provide descriptive alt text.
• For decorative images that don’t add meaningful content, use empty alt attributes (<img alt="" ... or just <img alt ...), so screen readers skip over them.
• Avoid redundancy: Don’t include phrases like "image of" or "photo of" in your alt text—this is implied.
• Avoid duplication: Don't duplicate adjacent text

The alt attribute is non-negotiable for accessibility

Every <img> tag must include an alt attribute, without exception. While the attribute doesn't always require a value—decorative images should use an empty alt —the attribute itself is mandatory. Failing to provide an alt attribute results in a critical accessibility issue, as screen readers will announce a graphic and some will then read the image’s file path (src) or file name, which offers no meaningful information to users.

Identifying Decorative Images: When to use an empty alt attribute

Not all images on a webpage serve a functional or informative purpose. Some images are purely decorative, added for visual appeal without contributing meaningful content to the page. For these images, you should include an empty alt attribute, which tells screen readers to ignore the image, allowing users to focus on the content that matters. For help see the WAI images decision tree

How to write effective alt text

When writing alt text, it’s essential to consider the purpose of the image and its context within the page. Here are a few best practices:

• Be concise but descriptive: Summarise the content of the image in a brief, meaningful way.

<!-- DON'T DO THIS -->
<img src="accounts.jpg" alt="accounts">

<!-- DO THIS INSTEAD -->
<img src="accounts.jpg" 
    alt="Our company accounts team posing in front of the Berlin office">

• Include relevant information: If an image conveys complex information (e.g., a chart or diagram), summarise the key insights it provides.

<img src="sales_chart.png" alt="Line graph showing a 25% increase in sales over the last quarter">

• Leave alt text empty for decorative images: If an image is purely decorative and does not convey important information, use an empty alt attribute.

<img src="border.png" alt="">

Testing alt text for accessibility

Verifying the presence and quality of alt text can be done both manually and through automated testing:

• Manual Testing: Try navigating your website with images disabled or better still with a screen reader and observe how well the alt text conveys the image content.
• Automated Tools: Tools like Axe DevTools, WAVE, or Lighthouse can automatically flag images without alt text or those with potentially problematic alt descriptions.

Alt text for complex images

Sometimes, images are more complex and can't be fully described in a short piece of text. For these cases, consider linking to a detailed description:

<img src="graph.png" alt="Graph showing Q3 earnings. Full description below">
<a href="#full-description">Read full description of the graph</a>
...
<div>
  <a id="full-description"></a>
  Detailed description of the Q3 earnings here...
</div>

Note: the longdesc attribute is no longer recommended and shouldn't be used.

Video content: Accessibility considerations

Under WCAG 1.1.1: Non-text Content, videos are also non-text elements and must be made accessible, just like images. Videos can be informative, decorative, or both, but they must be handled properly to ensure that all users can engage with their content. Video accessibility is out of scope of this post. But for more information on this topic see Making Audio and Video Media Accessible

Conclusion

Alt text is a small but essential part of creating accessible and inclusive websites. By following WCAG guidelines and best practices, you can ensure that users relying on screen readers, users with cognitive disabilities, and those with poor connectivity can still fully engage with your content. In addition to fulfilling the legal requirements of the upcoming EAA, providing thoughtful and well-written alt text makes your website more usable and welcoming to everyone.