How To Write Good Alt Text and Why It Matters

Alternative text (also known as “alt text” or “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, writing good alt text, and why it is so important.

What is alt text?

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

• People who have limited or no vision
• People who use 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 a lack of internet connection, the alt text will appear instead of the image in the space where the image would be. To people using 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 describe 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 you know that the alt text is providing users with the best experience? These are relevant concerns that we'll address in the next sections.

How to write good alt text

Now that we have established that a number of different users — both human and technological — benefit from alt text and 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, here are a few alt text dos and don’ts to set you 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 on an e-commerce site or whether the image is merely elaborating on an article and needs a less specific description.
• Keep it concise: Be clear and to the point. Long descriptions with lots of filler words and colorful language can be distracting when using a screen reader. Consider that your users might just want an overview of the image while skimming the page. Furthermore, if there is text on the image, be sure to 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 people using screen readers 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 image's file name, which is, more often than not, nonsensical.
• Never keyword-pack your alt text: As we've mentioned, alt text is great for SEO, but only when used correctly. At text is not an easy way to sneak multiple keywords into your page. This should be avoided and, as we'll 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 ensure 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 use “null” and leave a space in the alt text field so a screen reader will know there is a non-essential visual element.
• Never rely solely on artificial intelligence (AI) to add your alt text for you: AI 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.

Alt text and accessibility

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 users with visual impairments or those who use 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.

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.

Alt text and SEO

It's 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. Aim for alt text that describes the image while using relevant keywords. Here’s Google’s advice on choosing good alt text:

When writing 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 (also known as 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, as this can harm both your accessibility and ultimately your SEO. 

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