I’ve been involved in multiple discussions about so called alt attribute for images on webpages and web applications and decided to reflect on it on this blog. I think that biggest issue for everybody is the thin line between decorative and informative images. This imaginary line is extremely subjective and asking different people gives different answers, but even more than that – sometimes even same people can change their mind with time. My conclusion is that we must think of almost all images from both perspectives and let authors decide for themselves.
Some images are decorative for all people
Some images are definitely decorative and there are no doubts about it. As they say – “if I have to describe this image over the phone then I would not do it at it does not bear any information whatsoever”. Opinions about images like that are the same and nobody doubts that we should just leave the alt attribute empty, so that screen readers ignore it.
Some examples include fancy borders on components that can not be done with CSS alone (or are too complex to be done in that way), corners, complex backgrounds and so called eye candy that really just adds the make-up and is absolutely not bearing meaning or calling to action.
Some images may be decorative for some people but also adding some additional information to other people
We are all different, and our brains work differently, no surprises there. Some people are more rational and some are more emotional. There are also combinations. There are also situations that change how we treat same things. I will not go into philosophy and psychology but I think it is clear that I can sometimes see a picture as totally useless and some other time it can make or break my day.
Let’s take a simple example – let’s say I want to order a vacation I’ve been waiting for so long due to corona. I go and browse some pages and I land on a page that has a so called hero image of a sunrise over Easter island statues. The page is not about Easter island, neither about the Moai statues on it and I guess that author picked it to set a special mood on the page. As I were happy to visit the island it brings back a lot of memories and this image is absolutely not decorative to me. Not in this situation. Maybe if I were in a hurry and browsing for a fifth travel that year I would not even noticed it. But I surely did notice it now. And it added to my emotions. It did not add to the information on that page though. So my evaluation of that hero picture would not be decorative and if I was also the author of that page I would very probably add an alternative text to it saying something like “sunset over Easter island, dropping shadow behind Moai statues with sailboats in the ocean”.
On the other hand I discussed a hero image on clients website with persons responsible for their marketing. When we talked about accessibility and search engine optimization interdependence plus best practice about those two I was against adding alternative text to the hero image as it was purely decorative for me. It was not decorative for them as they thought of tone of voice, branding and setting the mood of the page plus trying to get into search engines images search. I decided to check it with some screen-reader users and SEO professionals to get a better perspective. And their answers were almost the same;
- screen-reader user number one did not liked to have alternative text on any image that was not really adding to the content information. Hero image of Ferrari and Maserati on a car loan page was not important to this user,
- SEO expert number one wanted to write a whole paragraph for all images. Not keyboard stuffing, just natural description of the image with some calculated keyword positioning in it,
- screen-reader user number two was appreciating all alternative texts on all images, and argued that if first few words doesn’t make sense we can skip the rest at any time and move to another image, heading, link, almost any element. So give me alternative texts and I will decide if I want to listen to them,
- marketing specialist wanted to send a message – people smiling when signing the contract for their new car that they could afford now and pay later – including the brand name in the message, so that search engine and screen-reader users alike remember where they are,
- content editor wanted to use an image to break a long article and decided to have text inside image that would really get the point out. Alternative text was the text in the image and short paragraph on the positive impacts of the article,
- accessibility veteran and screen-reader user mentioned never to trust alternative text and rather send the message in the surrounding text so that everybody can benefit from it. Avoid clutter, a second here and second there saves a lot of time for blind users.
Developers must give freedom to content creators
So as this list of user opinions from both side of the table (in previous section) demonstrates – developers should not decide if images are decorative or not. I would maybe even go so far to say that user interface that allows images, either background or inline, should make it possible to add alternative text on them.
To repeat again – every single image in HTML must have an alt attribute. It is up to content creators to decide upon it’s content or if it can be left blank. Content creators must bear the responsibility for that, and developers must make sure all images have the attribute.
If developer will use background image then the content management system must support both decorative and informative images. It’s simple when we think about it from the start – simple logical check in code that checks if content creators added alternative text to hero components image. Then developer can set role=”img” and aria-label=”” on the HTML responsible for background image. Now content creator has the possibility to make a hero image informational and also available for screen reader users. I like the article about img role method on the Mozilla Developer Network (opens in new window).
So – again – developers and even designers must never prevent the content creators to add alternative text to any image on the page that is not absolutely decorative. I think that this rule gives most freedom and possibilities for all kinds of content.
HTML standard on alternative text for images
Everybody working in the web industry but especially developers and designers should understand the HTML standard as much as possible. The semantics, possibilities and limitations of the elements are the building blocks of the web, both visually and also for assistive technologies as screen readers and so on. It is a contract that should be respected before reaching out to innovation that needs much more effort and especially testing. That being said – the standard also have some great tips on the alternative text for images. I’ll refer to some that really need to be repeated but please do visit the whole paragraph on alternative text for images on the official site of HTML standard (opens in new window);
The most general rule to consider when writing alternative text: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.
HTML standard on writing alternative text.
That basically says that alt text could replace the image and the meaning would stay the same. The same can be applied for no alt text – if we delete the image, will content stay the same?
Alternative text can be written by considering what one would have written had one not been able to include the image.
HTML standard continued on alternative text for images.
At the same time it is actually defined that alternative text should never contain image’s caption, title or legend but actually a replacement text that could be used instead of image. Users that can not see images will not benefit at all if alternative text expands on the image, right? It must describe the meaning of image and at the same time should not repeat information that is provided in plain text next to the image.
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
HTML standard on how to write good alternative text.
Now the standard goes on and defines also alternative text for images that are wrapped inside links and buttons – those images must actually have alternative text that defines interaction – destination for links and action for buttons. Developers must really understand this! I’ve seen some examples of wrong usage;
- link with text and image inside, in many cases this image can be an icon that means the same as neighbor text and therefore alt attribute needs to be empty. This is most commonly notable in emails when email client prevents images to display and we only get “get it for free arrow” – where arrow was the alt text on the icon,
- mobile navigation buttons (hamburger button variations) that have the text “menu” under icon. If icon also has alt text with “menu”, then screen-readers will pronounce menu twice,
- some card patterns with images and text where text is repeated in the images alt attribute and whole cards are then wrapped in links – this causes both texts to be read when on screen reader.
Developers must understand that alt text for images used inside links and buttons will actually define name of it’s parents (link / button).
The standard is also extremely valuable for complex images like infographics, graphs and image maps and as mentioned before – when involved in the web, either as author or designer but especially as a developer we should be really informed about the HTML as the foundation for our creations.
This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.
How to read HTML specification!
