To add in some #a11y salt: One might be interested in @scottohara's scottohara.me/blog/2019/01/2… as well
On leaving out the alt Attribute
As it seems I'm currently looking at my Twitter timeline way too often. Because this time it was a tweet from Šime Vidas that caught my attention:
Do I need alt text if there’s a visible image description?
— Šime Vidas (@simevidas) January 16, 2021
<figure>
<img src="x.jpg" width="900" height="600" alt="">
<figcaption>Caption serves as alt text</figcaption>
</figure>
What Šime is asking is if alt could not be left out if the corresponding image is being described through other technical means, i.e. a <figcaption>.
As most commentators correctly answered: you cannot leave it out. This is due to the different use cases and therefore user expectations for alt and <figcaption>:
-
altis literally meant as an alternative representation of the visual "data". Therefore it should be a textual reproduction of the image's appearance. It would describe its format, colors, what shapes and things can be spotted and where, as well as text that is visible and in what type of font it is presented. Imagine one of those new AIs which can draw an image from a text you provide. Ideally your text is written in such a way that the image generated by the AI closely matches the original one. -
<figcaption>on the other hand is meant as an accompanying caption or legend. Similarly to a<table>'s<caption>element, it could provide a headline-like description of the given<figure>. For example: "Usage of jQuery vs. React in %". Or in the case of a photograph, it could offer additional info like artist and copyright.
So we need both, as alt and <figcaption> are not interchangeable.
One more thing to spot in Šime's code example is that he leaves the alt attribute an empty string. This is only allowed when the corresponding image is of purely presentational character and not conveying any additional info:
In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.
In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.
…or when it is not meant for the user to see at all:
Generally authors should avoid using img elements for purposes other than showing images.
If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, then the alt attribute must be the empty string.
In such cases, the width and height attributes should both be set to zero.
Would any the above be true, then Šime's image would probably never be located inside a <figure> element with its rather strong semantic implications to begin with.
Does it all boil down to something we already know, which is that the alt attribute is mandatory - end of the story? Not quite!
When you write your HTML the way Šime was suggesting… 👇
<figure>
<img src="./image.jpg">
<figcaption>Description</figcaption>
</figure>…and run it through the validator you will find that it is perfectly valid HTML! The same holds true if the image has a title attribut instead of alt:
<img src="./image.jpg" title="Description">This again is perfectly valid HTML! Is this a glitch in the validator? Well, no. The reason for allowing these constellations is explained in the HTML Spec:
In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).
Basically when an image is meant for the user to be seen and it does convey information, but when at the same time it is technically impossible to offer, or generate, a textual alternative describing what can be seen, then it is allowed to leave away alt altogether, as an empty alt="" would mark the image as to ignore - which is not what you'd want. One example mentioned above is a live webcam feed, another one would be a CAPTCHA. In both cases it is impossible at the time of authoring the HTML to say what later will be shown in the image. At the same time both types of images are important for the user and nothing to skip over. Therefore dropping the alt attribute in these cases makes sense.
So in the end things turn out again more nuanced than we initially thought (and maybe hoped for). But since omitting the alt attribute in the described cases is optional whereas all the other cases require it to be present, the easiest strategy is to keep adding them to every image element, and you are good.
Please have a look and subscribe to Šime's Web Platform News ❤
Thanks go out again to Stefan Judis for proof reading. ✨
The cover image of this post is Audio Sound Wave by edwardolive