Choosing the right alt text for your images

I recently saw a post on LinkedIn about alt text on images, and thought it worth turning the comment I added to it into a post of its own and expanding on what I originally said.

The original post included three images he'd found with questionable alt text, completely useless alt text, and no alt text, and his purpose in posting was to remind people that not only should images include alt text in them, the alt text needs to be appropriate.

Guidelines for alt text on the web have changed over the years - for a very long time the recommendation was the purely decorative images did not need alt text (from a technical HTML point of view, they needed the null alt="" attribute included in the image tag); this included the obvious decorative images of a wavy line or a multicoloured ball, but it also included stock photography that had been included to zhuzh the page up but served no informational purpose; essentially for many years the guidelines had it that really the only alt text you should include in an image was if the image contained text itself, or for example if the image was a logo the user might be expected to click on.

More recently though the guidelines for including alt text have changed, as it has been acknowledged that even if the image doesn't contain any information, not describing the image gives blind / screenreader users a second class experience, and whilst all users of assistive technologies will have their own individual needs and desires, there's been a groundswell of opinion from those users that actually yes, as a rule and by and large they do want descriptions of images included, even if the purpose of the image is essentially to add excitement to the text content.

This has implications for how you craft your alt text! A simple factual description of the image may not actually be the correct text to write; essentially, when creating your alt text, you need to consider - what is your communications intention in choosing the image you’ve chosen? What caused you to choose this image from your library of images rather than that image?

For example, if the purpose of the image is to evoke a mood, describe the mood as part of describing the image. Did you choose this image to evoke a sense of a relaxed and open team atmosphere, or did you choose it to emphasise the diversity of the team? Or are you making a point about the bloke sitting on the table looking like he might be senior to the other people in the organisation?

Are some of the components in the image superfluous to your reason for choosing it or are they part of the point? Was the next image deliberately chosen to show the books in the foreground and/or the plants in the background as part of what atmosphere you're trying to convey, or are you only concerned with the woman focussing on her laptop, and this happened to be the best image of a woman focussing on her laptop you could find?

Is the location or activity relevant in the image? Are the children in the next image running along a corridor, or are the smiling children simply eager to get somewhere? If the point of you choosing the image is that they're running along the corridor, does it matter where the corridor is? Does it matter that it appears to be a corridor along the outside of a building rather than inside it? Does it matter if it's a school corridor, a block of flats, or something else?

A picture paints a thousand words — make sure when choosing a picture to support your text content, the picture you choose is painting the thousand words you want it to paint; conversely, when crafting your alt text, don’t just bang out a plain description of the picture which interrupts the flow of the assistive technology user, use your words - preferably somewhat fewer than 1,000 of them - to in text paint the picture the image is painting.

Lastly, a note about where to add your alt text in social media posts such as LinkedIn, Facebook, X, etc - most social media apps will now have a specific setting to add the alt text when you add the image. Please use this rather than being tempted to describe the image in the body text of the post. By doing this, you allow the user of the assistive technology to control how the text is rendered to them, indeed control whether it's rendered to them at all; some users might have decided they've no interest in hearing about the group of children running to the woman who's quit the office because it's too chatty, they just want to hear the facts on the page rather than all the descriptive fluff. Or they might have their assistive technology set up to read alt text in a different voice so they have a clearer cue about what it is; they might have it configured to read the alt of the images exactly where the image appears, or they might have it configured to bundle all the descriptions of the images at the end of the page. The point is, the assistive technology user will have made their own choices about how alt text is rendered to them, and you should respect those choices by using the configuration of the platform you're posting to properly, rather than forcing the user to listen to the image description by - however well-meaning your intention - posting it as part of the body text and forcing the user to listen to it.