Is an alt text still required on a decorative image?
Let's test a "tracking pixel" image and find out.
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.
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.
| 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
3 types of images
- Interactive images – think images used as links or buttons.
- Images which contain information – like a chart, a graph, or just text.
- Decorative images – which add no extra meaning to the content.
The 5 rules
- Every
<img>must have analtattribute. - Describe the information, not the picture.
- Interactive images (e.g. image links) require descriptive alt text (e.g. the link destination).
- Images which contain information (e.g. a chart, graph, or text) require descriptive alt text containing that information.
- Decorative images should have empty alt text,
alt="".