Accessibility

Simplified WCAG guidance

WCAG 2.2 – Levels A and AA only, with dev notes.

Is an alt text still required on a decorative image?

Let's test a "tracking pixel" image and find out.

Author: Mike Foskett – Dated:

What does a screen-reader say when encountering a "tracking pixel" image which doesn't have an alt attribute?

TL; DR; Ensure all images always have an alt attribute!

So, what is a tracking pixel?

A tracking pixel is a 1-pixel square, transparent image. It is used for reporting usage back to the providers server. It does this by attaching a parameter to the request for the image. The parameter contains a unique identifier for the page, and may contain other data too. Upon request the server registers the parameter in a database and returns the transparent image. As the image adds no information to the content it is considered as "decorative".

Traditionally, the advice is to always use an alt attribute, even on invisible tracking images where an empty or null alt text, alt="", would be used.

That was due to screen reader software reading out the entire src attribute when the alt attribute is missing – a major accessibility issue.

Example tracking image (imagine the src read aloud):
<img src="https://appraisd-a11y.netlify.app/code/is-a-decorative-alt-text-still-required/tracking-pixel.png?params=v1.XXXgEf3XWrwX8jW9HDwW5dDGn2sPPCVhLd2TjOykVvl4c37CEQEuYdPlrVzn26dOeO4uAEdh8RCthcyHOdez1dx2OhjqsEBn8-GVZJV7OYn5uQ7X4xBZw6SknxzbEcW3vTyo5r2n--_-V2Bjq6S1wGz7DauRb6Av0txGM6Rcm-NhXj9fogvh-NhUdTiUGvnOmX-MXv2ZkKZ6OKm-QzCYcbChRbm9fBvmoDPxy6hgAQMZ2i87n4QSk6HTbtvzk-4Qojt9ugz9ed_0E6STmf4wsfnGiu0FO6ELbxaa0r7gRPxmuK8&pid=v1.myg3VHlJveTS2OT6n4lQ9eHpN8jFYUVroDRUvhcqdtcnf1U9fe4GibLruc-btjn0Ivre5tydX2QQQHYDLf34PRlH0g&tuid=686662f944f24145d3540d89&configId=839e93c1-0c6f-4b9f-920f-b5cc0db83771" width="1" height="1">

But this is is that still the case?

Results

It is possible to place the tracking pixel within the content area, inside a landmarked region, or added at the end of the HTML (outside). Both positions were tested for completeness.

So, you can test yourself, there's an invisible 1px square tracking image placed between this paragraph and the last which is inside the main landmarked element. Another is placed at the end of the HTML, outside any landmarked regions.

So, what was read aloud?
OS Version Screen reader Browser Outside landmark Inside landmark
iOS 18.5 VoiceOver Safari Nothing Nothing
iOS 18.5 VoiceOver Firefox Nothing Nothing
MacOS 14.7.4 VoiceOver Safari 18.4 Nothing Nothing
MacOS 14.7.4 VoiceOver Chrome 138 src attribute src attribute
MacOS 14.7.4 VoiceOver Edge 138 src attribute src attribute
MacOS 14.7.4 VoiceOver Firefox 141 Nothing "Image"
Windows 11 NVDA Edge 138 Nothing Nothing
Windows 11 NVDA Chrome 138 Nothing Nothing
Windows 11 NVDA Firefox 142 Nothing Nothing
Windows 11 JAWS Edge 138 Nothing Nothing
Windows 11 JAWS Chrome 138 Nothing Nothing
Windows 11 JAWS Firefox 142 Nothing Nothing
Most modern browser versions as of

Conclusion

Considering how long it has been standard practice for screen readers to announce the audio garbage that may be within the src attribute as an accessible fallback, it's good to see that the default behaviour is changing at last.

While this testing is far from comprehensive, you can already see that MacOS with VoiceOver on either Chrome or Edge will read the src attribute in its entirety. That is enough, IMHO, to warrant insistence upon an alt attribute to always be present.

A recap of alt text rules

As the requirement still stands, let's recap the basic rules for image alt text. Based upon AbilityNet's 5 golden rules for alt text.

3 types of images

  1. Interactive images – think images used as links or buttons.
  2. Images which contain information – like a chart, a graph, or just text.
  3. Decorative images – which add no extra meaning to the content.

The 5 rules

  1. Every <img> must have an alt attribute.
  2. Describe the information, not the picture.
  3. Interactive images (e.g. image links) require descriptive alt text (e.g. the link destination).
  4. Images which contain information (e.g. a chart, graph, or text) require descriptive alt text containing that information.
  5. Decorative images should have empty alt text, alt="".