A Beginner's guide to writing better ALT texts

An image speaks more than a thousand words, but when used wrongly, you would convey the wrong information to people who can't see that image with their physical eyes.

The web is used by a diverse group of users and web developers need to get every element of the web right. This means we need to make the web easy to navigate for people with any type of disability. Today I will be sharing few ways to properly use alt text for images so that users don't miss out on the important messages you might want to pass through images.

Before we proceed, let's first understand what alt texts are. According to WebAIM(web accessibility in mind),

Alternative text (ALt text) is a textual substitute for non-text content in web pages.

This article is about images but the same principles applies to other multimedia and non-text content. When screen readers such as Microsoft Narrator, JAWS, and NVDA reach digital content with alt text, they will read the alt text aloud, allowing people to better understand what is on the screen.
Well written and descriptive alt text helps improve user experience and gives meaning to the content it is used for. It is beneficial that your image is understandable in the context of your overall page.

Alternative text can be used within

• the alt attribute of the <img> element
• the visible body text near the image, eg. <figure> and <figcaption>. If the text can't be presented on that page, the alt text can be used on a separate page, linked from either the image or a text link adjacent to the image.

The alt text should typically:

• be representing content and function accurately.
• be succinct. Content (if any) and function (if any) should be presented as succinctly as possible, without sacrificing accuracy. Typically, it shouldn't be more than 125 characters long, though rarely a short sentence or two may be appropriate.
• not be redundant or provide the same information as text near the image.
• not include phrases like "image of ..." or "graphic of ...", etc. This would be redundant since screen readers already announce "graphic" along with the alt text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Alt text can serve several functions:

• Some users who have visual or certain cognitive disabilities rely on screen readers to navigate the web and screen readers announce alternative text in place of images, helping users perceive the content and function of the images.
• If an image fails to load due to connectivity issues or the user has blocked images, the browser will present the alternative text visually in place of the image.
• Search engines use alternative text and factor it into their assessment of the page purpose and content.

Some right contexts to use alt text

Example 1

When working with images , you need to first consider its content and function. In this example, the image is not used as a link or in a button, so it has no function.

The image content shows the user that this is Cristiano Ronaldo. He is also holding a named jersey indicating that he is a sportsperson - which is meaningful.

"Image of Cristiano Ronaldo, Footballer" redundantly describes the image as an image.

"Cristiano Ronaldo, latest Al-Nassr signing" is still referencing what is already in the body text.

The image content is presented within the surrounding text, which means that our image is more understandable to visual users. You might be tempted to leave it as alt="" but since the image conveys content, an alt text of alt="Footballer Cristiano Ronaldo" would suffice.

Example 2

In this example, the image has content in it but no surrounding text meaning there is no other context to the image. Sometimes, this type of image is used in articles or social media posts and the article or post will not have much context to the content of the image.

Because the image has content, we cannot do alt="" so we would have to use the content in the image as the alt text. The best option for this would be to do alt="Don't wish for it, work for it"

Example 3

When an image is wrapped within a link, it has function. If it doesn't have any adjacent text inside the link to describe the link's function, the alt text for that image would be the content of the image or the link. The alt text cannot be empty because screen readers will then read out the filename of the image which would make no sense to your users.
For example, <a href="popsicle.com"><img src="boy.png" alt="Little boy holding our popsicle" ></a>

Example 4

When using an image for just decorative purposes, maybe as a logo in the header that links back to the homepage, you should resist the urge to do alt="Logo" or `alt="[Company Name] Logo". Adding the word 'logo' is redundant there because it's not important to the image's content or the function, so just the company/brand name will suffice.

Conclusion

Designing the web with inclusivity in mind will at the long run benefit everyone and parts of the web like images play a huge role to passing your message to your users. Little things like this can be easily overlooked but it's beneficial to get it right. I hope you'll begin to write better and more meaningful alt texts from now onwards.

To further learn more ways to write better and relevant alt texts, check out WebAIM's article on Alternative Texts