Writing alternative text for images

Best practices for writing alt text for images. Practising with examples to tell a story to our readers utilizing screen-readers.

A visible hand reading braille with a flower sitting on the side

For those starting out in web development – alternative text (or alt text) is how the images are read out to people utilizing tools like screen-readers.

When using alt text to describe an image, we need to think about context and the reusability of the image across different scenarios. In a way, we can consider this task as content design and it is just as important as the rest of the content on the page.

People who are visually impaired want to have the same experience to those who are sighted. Remember, not everyone who is impaired were born that way. In a way, many can still mentally paint a picture.

In fact, creating good descriptions for our images will not only help out those using assistive technologies, but the website will have better SEO ranking from the web crawlers being able to now read the image context too.

A woman with a heart over her heard shopping and favoriting sneakers on a human-sized smartphone
Illustration from Artitor

What would be the description of this image? Many would probably write "A woman shopping for shoes."

A woman shopping for shoes.

This sort of description doesn't give any context to the reader. Is the woman shopping in a store? online? on her mobile? It also leaves out important details like the action she is taking. The description for the image below gives the reader a much stronger mental image of what is going on:

A woman shopping online with a human-sized smartphone and a heart over her head while she saves sneakers to her favourites.

If context needs to be added, such as the shop name, or perhaps if the illustration is using a new feature, for example with the following image:

A woman sitting in a chair using our VideoNow feature. She is talking to three other people that appear over her head in circle frames.
Illustration from Artitor
A woman sitting in a chair using our VideoNow feature. She is talking to three other people that appear over her head in circle frames.

Description limits

Although the description can be as long as possible, there seems to be a consensus on the idea that the alt text for images needs to be constrained to a limit of approximately 140 characters. This limit may be a good guide for the use cases I showed above – mostly product and marketing driven images.

If our website displayed artwork, as a painter or even museum websites. It would make sense to use an alternative text that describes the artwork in detail. The best way to think of this is by thinking in the setting of a museum visitation with a visually impaired friend.

Think about how we can describe the image to them in a way they can consume and mentally understand? In a way, many art pieces can have a story told through the description. As we who can see finds new details in the photo, we explain these to the visually impaired to allow the story to unfold more.

If our website were to display an art gallery, the description should be of length, either in the alternative text or as a description on the same page as the images detailed page. In this case, our alternative text should let the users know a basic description and that they may go to a detailed page for more description.

Small exercise

I believe product image placement and descriptions are quite easy, but I want to leave you with this painting from JoJoesArt store on Esty. Try to write a description for it. You may even describe it to a friend without showing the image to them to see their feedback on how accurately the image was portrayed.

In essence, we need to be storytellers when building websites and products.
The scenery of a forest on a foggy autumn day. In the forest is a pathway hosting a deer with its fawn front and centre, staring back at you. The deer's antlers are tree branches forming a large circle above the head with berries and fruits growing off them and flower blossoms. Birds are flying around the deer with some perched on the branches.
Art by JoJoesArt on Etsy