5 Quick Accessibility Improvements for Images on Your Website

Web developers often find themselves in the situation of having to make existing websites accessible after the fact. This can range from trivial to very time-consuming. Below, I’ll show you a few tricks related to images that will improve the accessibility of your website.

1. Missing alt Attribute in <img>-Tags

This is especially common on sites built with JavaScript frameworks (like React or Angular), where the alt-attribute for <img>-tags is often forgotten. Web components are frequently created manually, and accessibility is overlooked. Developers might think, “A picture is worth a thousand words – it explains itself!” But who considers that there are people who cannot perceive the image?

That’s exactly what the alt-attribute (often called “alt text”) is for. It provides a textual description of what the image shows or its function. Assistive technologies like screen readers use this text and read it aloud. Without an alt-attribute, screen readers often read out the filename, which is rarely helpful, or simply state that it’s an image.

2. Inaccurate or Overly Detailed alt-Text

Let’s take the example of a travel agency’s website. To link to the “Departure” section, an image is used showing travelers rushing with rolling suitcases toward a glass door of an airport terminal. The image’s purpose is to function as a link.

A poor alt text might get lost in detail:
“A sunny day. A crowd of people is visible on a plaza. In the center is a glass door labeled ‘Terminal 2’. Three people with suitcases are walking toward it.”
While this may describe the image, it fails to convey its function in context.

A better alt text would be:
“Link to departure section” or “Travelers at airport terminal, link to departure.”

Line breaks in alt text can also cause unexpected pauses in screen readers. Therefore, short and concise texts that convey the purpose or essential content of the image are preferred.

3. Empty alt-Text for Decorative Images

Most accessibility checkers scan pages for <img> tags and report an error if the alt– attribute is entirely missing.

However, it’s allowed – and often recommended – to leave the attribute empty (alt="") when the image is purely decorative and has no semantic meaning for the page content. An example would be the landing page of an IT company featuring a purely ornamental background image with ones and zeros in the company’s colors.

In such a case, the alt-attribute is deliberately left empty: alt="". This signals assistive technologies to ignore the image. Omitting the alt-attribute entirely, on the other hand, is not compliant and will often be flagged as an error by checkers (and screen readers).

4. SVG-Icons

Let’s not forget another widely used graphic format online: icons. These are often provided as SVG files and are frequently used as interactive elements, such as buttons. A practical example would be a flight status page where departures and arrivals are symbolized using airplane icons.

A screen reader can’t interpret the raw pictogram (i.e., the <svg> code without a description) and may only read incoherent path information – or nothing at all. Unlike <img>-tags, <svg>-tags don’t have an alt-attribute.

There are several ways to provide textual descriptions for SVGs:

• The aria-label attribute directly on the <svg> tag:
  <svg aria-label="Departure">...</svg>
• A <title> element within the SVG:
  <svg><title>Departure</title>...</svg>
  (Often also displayed as a tooltip in browsers)
• The aria-labelledby attribute, referencing a separate element (e.g., a hidden <span> or a <title> element with an ID)

The key is to ensure the function or meaning of the icon is made clear.

5. Avoiding Redundancy

Too much text can also impair accessibility. Therefore, it’s important to avoid repetition and other forms of redundancy.

For example, if a company logo (as an <img>) is placed directly next to the full company name in text, the logo’s alt-attribute should be empty (alt=""), since the name is already visible in the text. Otherwise, a screen reader would read the name twice – once from the alt text and once from the adjacent body text.

Conclusion

Experience shows that many content management systems (CMS) automatically use the filename as the alt attribute if no manual entry is provided. This avoids a formal error being flagged by automated accessibility checkers (since the attribute is present), but the content is often meaningless or unhelpful.

So, it’s worth following the above best practices to improve the images on your website in terms of accessibility – genuinely helping users rather than just satisfying scanning tools.