Image alt text: What it is, how to write it and why it matters to SEO

Welcome to alt text best practices. If you’re wondering what image alt text is, how to write alt text and why it is essential for accessibility and SEO you’ve come to the right place.

What does this article cover?

• What is alt text
• Why does alt text matter and who does it benefit?
• Does alt text help AI understand your content?
• Understanding image purpose and when not to write alt text
• How to write good alt text (best practices)
• FAQs
• How Insytful can help

Images can make content quicker to understand, but only when everyone can access the information they contain.

Well-written alt text helps people using screen readers, provides context when images fail to load and helps search engines understand how an image relates to the page. It may also give AI-powered search and content tools an additional signal about what the image means.

But good alt text is not simply a description of everything in the picture. It should communicate the image’s purpose, in the context where it appears.

The alt text provides context if an image doesn’t load, explains the image for assistive technology, and helps search engine crawlers index an image properly.

Wherever you find an image on a web page, you will always find a <img> tag. HTML consists of elements, and the <img> element tells the browser the element is an image and how to display the content.

The <img> element can include attributes that tell the browser where to find the image and how to display it:

• Src = The source file specifies where the image comes from
• Alt = Alternative text provides a description of the image if it cannot be viewed
• Width = Image width size
• Height = Image height size

Below is a HTML image example:

The primary purpose of alt text is to communicate the information or function an image provides. Describing what is present in an image benefits:

• Users who rely on assistive technology.
• Users who cannot see the image because it hasn’t loaded.
• Web crawlers for improved SEO.

Alt text is essential for users who rely on assistive technology, helps when images don’t load, and gives search engines context about your content.

Not all users can see the images on your website. Appropriate alt text helps people who cannot see an image understand the information or function it provides.

Screen readers can announce the text provided in the image’s alt attribute, helping users understand the image’s information or purpose.

Making a conscious effort to add descriptive alt text provides an accessible and inclusive web experience for all users.

If you have ever encountered an image that hasn’t loaded on a website, you've probably encountered an empty image alt text.

When alt text is missing, you're left with the image file name “Screenshot_2022-03-14-06-411_com.facebook.katana.jpg” as a replacement, which means absolutely nothing to anyone.

When an image fails to load, the browser may display its alt text instead. If no useful alt text is available, users may encounter an unhelpful file name or little indication of what is missing.

On the odd occasion that an image doesn’t load because of a slow internet connection, a broken link or errors with the server, image alt text can save the day.

Alt text provides a better user experience, replacing a broken link or file name with a descriptive image overview in its place.

In addition to creating an accessible web experience, alt text and alt tags can help your SEO efforts.

Alt text provides search engines with vital information to understand what is being displayed visually, and well-written alt text can help with image ranking and discovery. Search engines and AI systems are increasingly able to analyse images, but alt text still provides a clear, author-written explanation of what the image means in the context of the page.

Search engines can use alt text alongside the image, surrounding copy and other page signals to understand an image and its relationship to the page. Well-written alt text may support image discovery, but it should be written for accessibility and meaning first—not as a place to insert extra keywords.

Alt text can help AI-powered search, assistants and content-indexing systems understand the meaning of an image, particularly when a tool primarily processes the text and HTML of a page.

Some multimodal AI systems can also analyse the image itself. In those cases, alt text provides an additional clue and lets the content author explain why the image matters in that particular context.

However, important information should not exist only in an image or its alt text. W3C recommends that if a chart, diagram or infographic contains information people need to understand, include its key message in the visible page content too. This is an additional benefit, rather than the primary reason for providing alt text.

Clear visible content, meaningful headings and appropriate text alternatives make information easier for people, search engines and AI-powered tools to interpret.

Not every image needs a written alt text description, there are some occasions when alt text should be left empty. These are treated as decorative images. However, every <img> element should have an alt attribute, even when that attribute is intentionally empty.

Knowing when you should have an empty alt attribute will help provide better UX for users reliant on assistive technology.

Below are some examples of different image types and how to approach them. Considering the image’s purpose will help you choose an appropriate text alternative and avoid unnecessary repetition for screen-reader users.

Explain the key information or meaning the image contributes.

Not every image needs an Alt text description. Use an empty alt attribute, alt="", so assistive technologies can ignore the image.

This is the case for decorative images because they do not provide any information. For example, the image below is purely decorative and for visual interest.

Describe the action rather than the appearance. If an image is the only content in a button or link, its accessible name should describe the action or destination—for example, “Search” rather than “Magnifying glass”.

Include the meaningful text in the alt text unless the same wording already appears next to the image.

Use concise alt text to identify the chart, diagram or infographic and communicate its main point. Provide the detailed values, relationships or explanation in nearby visible text or a linked long description.

Describe the destination or purpose of the link rather than simply describing the image.

If a caption or surrounding text already communicates the same information, use alt="" to avoid making screen-reader users hear it twice.

Good alt text does not always describe everything visible in an image. It communicates the image’s purpose and any essential information it adds to the page. This means the same image may need different Alt text depending on where and how it is used.

When you are writing alt text, remember to;

• Be concise. Keep alt text as concise as possible, but long enough to communicate the image’s purpose and essential information.
• Communicate the purpose: Describe the information or function the image adds in its particular context, rather than listing everything visible.
• Include important text: If words shown in the image are important and are not repeated nearby, include them in the alt text or visible page content.
• Don’t use phrases like “image of” or “picture of”: Screen readers already announce that it’s an image.
• Avoid keyword stuffing. Avoid forcing keywords into alt text. It can make the description less useful and may be treated as spammy by search engines.
• Skip inside jokes or irrelevant details: Focus on what’s useful for someone who can’t see the image.
• Decorative images: If an image adds no information or function, use alt="" so screen readers can ignore it.
• Avoid repetition: Do not repeat information already communicated by a nearby heading, caption or link label.

The following examples show how the same image may need different alt text depending on its purpose and surrounding content.

Examples of bad alt text descriptions

• Too literal: Picture of five trees, three bushes, one house and a hill with a sunrise
• Keyword stuffing: Garden, sunrise, morning sunrise, trees, frosty morning, winter morning, old house.
• Too detailed: A landscape shot from afar, looking over a frosty garden on a winter morning. There is a house looking over trees and bushes on a clear January morning, with a bright orange sky sunrise above the hill in the background.

Good alt text is not a literal visual description, it communicates the purpose of the image, depending on context. For example, here are examples of good alt text descriptions with different purposes:

On a tourism page: Sunrise over Ludlow and the surrounding Shropshire hills

On the Zengenti website: A sunrise at Zengenti’s head office in Ludlow

Beside a caption saying “Zengenti’s Ludlow office at sunrise”: alt=""

In this context, repeating the same wording in the alt attribute would create unnecessary duplication.

As the saying goes, a picture tells a thousand words. But it doesn’t if you neglect your alt text.

Good alt text communicates the information or function an image adds to the page. It helps people who cannot see the image, provides useful context when an image does not load and can help search engines and AI-powered tools interpret visual content.

The right approach depends on the image’s purpose. Informative and functional images need a meaningful text alternative, while decorative images should use an empty alt attribute: alt="".

1. Always include the alt attribute with every image <img> element.
2. Decorative images should use an empty alt attribute: alt="".
3. Figure out the purpose of the image before writing your alt text.

Every <img> element should have an alt attribute, but not every image needs a written description. Decorative images and images fully described by nearby text should generally use alt="".

Some screen readers may announce the image’s file name or URL, which is often confusing and unhelpful. An empty alt attribute is different: it tells assistive technology that the image can be ignored.

There is no universal character limit. Keep it as concise as possible while still communicating the image’s purpose and essential information. Complex images may require a short alt description plus a fuller visible explanation.

Insytful can help you identify images with missing alternative text across your website, making it easier to find and prioritise potential accessibility issues.

Our automated accessibility scans can identify images with missing alt attributes across your website, helping your team locate and prioritise potential issues. However automated checks cannot tell whether Alt text accurately communicates an image’s purpose, so the results should be combined with a manual content review.

Try Insytful for free to find missing alt attributes and other potential accessibility issues across your website.