How To Write Good Alt Text and Why It Matters

“Alt text” or “alternative text” (sometimes known as “alt tags”) is, in its basic form, any text incorporated into a website’s HTML to describe the appearance and function of visuals like images, illustrations, or graphs. In practice, it is so much more than just a tool to describe visual elements on the web. Good alt text can help your website optimization and accessibility, as well as SEO and general user experience. Here, we will guide you through alt text best practices, what to avoid when writing good alt text, and why it is so important.

The function of alt text is to provide a description of what an image on a website shows and its function if the user of the site cannot see the image in question. This can help:

• People who have limited or no vision
• Users of screen readers and other assistive devices
• People who have turned off images to save data
• Search engines that categorize your visual content

When an image cannot be shown on a website due to loading problems or lacking internet connection, the alt text will appear instead of the image in the space where the image would be. To users of screen readers, the alt text is read aloud when the user engages with the image on the site. Therefore, what you write in your alt text actually has a big impact on certain users of your content.

The text should aim at describing the image, so users who cannot see it will get the same experience in text form as people viewing the image on the page. But this is not always a simple task. What is the most relevant information in the image? Do all images need alt text? And how do I know that my alt text is providing my user with the best experience? These are relevant concerns, and we will address them in the next sections.

Now that we have established that a number of different users - both human and technological - benefit from alt text and a good alt text should always aim to describe the image or other visual component as directly as possible, it is time to get into how to actually write good alt text. To start off with, here are a few alt text dos and don’ts to set you off on the right path:

Alt text dos:

• Describe the image: What does the image actually show? What is essential can be context-dependent and you should consider the function of the image and what information the user needs to get from it. This could, for example, be whether the users need specific information about the image content like colors of shoes in a webshop or whether the image is merely elaborating on an article and needs a less specific description.
• Always keep it concise: Be clear and to the point. Long descriptions with lots of filler words and colorful language can seem distracting when using a screen reader. Consider that your screen reader users might just want an overview of the image while skimming the page. Furthermore, if there is text on the image, be sure to always write that out in the alt text.
• End your alt text correctly: Just like any other sentence, your alt text should end in a period so your screen reader users know the description is finished by the pause added by the reader. Further it is good practice to provide information if the visual is an illustration, chart, graph or anything other than an image. There is no need to say “photo of” or “image of” since screen readers already provide that information by default, but adding on “illustration” or “graph” after the alt text description, if relevant, is a good idea.

Alt text don’ts:

• Never write alt text that is not a part of the image: This seems matter-of-fact, but many websites have alt text on images that have nothing to do with the image itself. This includes photographer names, article titles, or in the worst cases, the alt text is simply the file name of the image that is, more often than not, nonsensical.
• Never keyword-pack your alt text: As we have mentioned, alt text is great for SEO, but only when used right. Most importantly, alt text is not an easy way to sneak multiple keywords into your page! This should be avoided and, as we will get into later, actually hurts more than helps your SEO.
• Never use alt text for repeated images and decorative content: It is important to remember that you are first and foremost providing alt text to secure accessibility and usability, so there are times when adding alt text is more distracting than useful. This is most common for repeated images like profile pictures on social media or merely decorative content like background images. Your users do not need this information to understand the content and it takes time for assistive devices to describe non-essential images. Though you should never delete the alt text field, instead do a “null” and leave a space in the alt text field so a screen reader will know there is a non-essential visual element.
• Never trust AI-technology to do your alt text for you: These technologies have gotten a lot better, but still leave a lot to be desired in terms of descriptive information. So, always manually check your alt text and add in any relevant information the AI might have missed.

It should be clear by now that alt text is very much a feature of making your content accessible to all users - especially, but not limited, to the sight-impaired and users of screen readers. In fact, alt text is so important for accessibility that the Web Content Accessibility Guidelines (WCAG 2.1) have alt texts as their very first guideline:

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”
– WCAG guideline 1.1.1

As the quote shows, the guideline refers to all non-text elements and as this article has mentioned, alt text is not just limited to images but is also important for illustrations and charts. Also, it should be mentioned that alt text is not limited to content on your own website. To have a truly accessible online profile, all visual elements must have alt text where it makes sense across all platforms. Apart from your own website, this includes platforms and content such as social media posts with images or other visuals. For a guide to setting up alt text on Facebook, Instagram, LinkedIn, and Twitter, refer to DigitalMaas’ easy to use step-by-step overview.

It is not just humans that benefit from having visual elements described in text. Alt text can also greatly benefit your SEO if used in the right way. The best thing about this is that the right way to use alt text for SEO is also the way to correctly use alt text for accessibility. So if you optimize your content for one, you also improve the other. This is because search engines rank your website based on usability as well as keywords so you should aim for an alt text that describes the image while using relevant keywords. Here’s Google’s advice on choosing a good alt text:

“When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.”

So, we recommend you optimize your alt text to fit in your keywords, but only if the image allows for it. It is not good practice to just use your keyphrase or a list of keywords as alt text and can harm both your accessibility and ultimately your SEO.

We hope this explainer and quick guide to alt text has been useful to you and it helps you on your way to a more accessible website and online content as well as boosting your SEO. If you are interested in more accessibility advice or an easy SEO checklist, Monsido has it all.