Best practices for writing good alt text

Best practices for writing good alt text. Read more about how to write an alternative description to the image that boosts your accessibility and SEO.

The alt attribute provides an alternative description for a non-text element¹ and normally is not presented to the user but will be available under certain circumstances. The following is the most general guideline to follow while creating an alternate text:

Consider how you would read the page including the image to someone over the phone without mentioning that there is an image. Generally, a good place to start when creating the alternative text is whatever you intend to say in place of the image.

When search engines crawl your pages, they are unable to understand images that do not include alt text. Search engines will be able to better grasp the content of your sites if images are correctly optimised with alt text, and visually-impaired people will have a far better user experience.

First, let’s take a look at some examples images with both good and bad alt text.

Good and bad alt text example

Let us examine an image related to an optometry eye exam.

Bad Alt Text: Two females in the optometrist’s office.

Good Alt Text: Patient and doctor making a comprehensive adult eye and vision examination.

Notice how much more information there is in the good version of the alt text, which helps create a visual picture of the image for someone who may not be able to see it properly or at all. We were also able to include the term comprehensive adult eye and vision examination because this image alt text is being used on a Services page, suggesting the image’s purpose on that page.

Its also worth noting that the good version of the alt text in this example is 74 characters long, which is in line with best practises for alt length.

The alt text and what to include – best practice

When it comes to image alt text, it’s important to include a concise and accurate description of the image content. This helps visually impaired users and search engines understand the context of the image.

However, writing a good alternative description isn’t always an easy task and we believe that practicing is the way to get a description better and better.

Here are some best practices for writing alt text:

1. Keep it short and to the point: Alt text should be brief and to the point. It should represent the image’s information and purpose in an easy-to-understand way, including text that’s part of the image.
2. Check for spelling errors: Always double-check your alt text for spelling errors before releasing it.

3. Impact on SEO: Description in an alt is very important for SEO and is the key contributing search engine ranking factor. You can use the top keyword or two but use it carefully. Search engines can’t recognize contextually unhelpful alt text and there is a risk of being penalized for keyword stuffing, such as by Google.

   

   

4. Be specific: Alt text should clarify the image’s content, providing important context such as setting, emotions on people’s faces, colors, or relative sizes.
5. Avoid keyword stuffing: Don’t stuff your alt text description with too many keywords. Instead, concentrate on properly and concisely explaining the image.
6. Avoid using images as a background when the image is relevant to the subject of the page: The background image isn’t crawled and indexed and typically just one image is used for the background-image property regardless of the device screen width or resolution which effectively impacts the loading and rendering performance.
7. Avoid using the random filename: Use a short description of what the image is about, for example, stock-photo-beautiful-view-to-swiss-alps.jpg, instead of random characters, for example, P044123.jpg. The filename can give search engines clues about the subject matter of the image. Note: if you localize your images, make sure you translate the filenames, too.
8. Avoid duplicates: Don’t repeat the same information in the alt text as in the surrounding text.
9. Do not start description from Image of, Picture of or Icon. For example, screen readers automatically spells the word Image.
10. When an anchor element <a> that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.
11. Charts, diagrams, graphs, maps, and illustrations should be threat as complex images and have two-part text alternatives to be able to understand the details being conveyed. The brief description is the first part, used to describe the image and, if necessary, to point out where the extended explanation may be found. The long description, the second part, is a written description of the important details seen in the image. Example:

    <figure role="group">
        <img
            src="remediation-progress-timeline-chart.png"
            alt="Bar chart showing the progress of fixing issues for the last 12 months">
        <figcaption>
            <a href="remediation-progress-timeline-chart.html">Example.com site progress of fixing issues for the last 12 months text description of the bar chart</a>
        </figcaption>
    </figure>
    

12. Use an empty alt attribute (alt="") and the screen reader will skip the image altogether. This is often called a decorative image² or background.
13. While there is no limit to the length of the image description (see test for the alt length) using the alt attribute, then there is no way to pause alt-text. Your only option is to stop and refocus in order to listen to it again. It is a very frustrating user experience. As a best practice, we recommend no more than 2-3 sentences expressing the main takeaway and keep alt text at around 125 characters or less.
14. Use the longdesc attribute for a long description: If a long description is necessary, use the longdesc attribute when possible instead of writing lengthy alt text.

Supplemental information

Note: use title with caution as some screen readers don’t read the title attribute by default.

Usage scenarios

Providing an alternative description in an alt attribute is important for following reasons:

• When the image cannot be loaded then the alt text value is displayed in its place. Example scenarios:
  • Unreachable on the server.
  • Invalid URL.
  • The image itself is invalid, e.g. the image was served, but the structure is invalid so the browser can’t recognize it as the image and therefore can’t display it.
  • The image is type of unsupported.
• When the image is loaded on a slow connection then an alt text will be visible while waiting for the image.
• Text-only browser is being used.
• The content of the page is being read out by a hands-free automobile voice web browser.
• The alt text improves the accessibility of a page. Screen readers or Braille devices are frequently used by visually impaired people to read text on websites. When these devices encounter a non-text element that has no alt text associated with it, the user has no way of knowing what the element represents, or if it is important to the content of the page. To explain the meaning of the non-text elements to the user, include text explanations of them on the page.
• Some users choose to browse the web without any graphics (saving bandwidth, minimizing distraction, or privacy reasons). These users will see the alt description instead of the image.
• The alt text is useful for SEO as search engines utilize it to comprehend what an image is about and by that it is used by search engines to return search results.
• In case the image is used as a link or button, the alt text conveys the purpose of the link or button.

Example code

Basic code of the image may look like that:

<img src="small-female-black-cat.jpg" alt="Small female black cat" width="1000" height="600"/>

Here’s an example of displaying the alt description in place of an unavailable image (attribute src points to a non-existent image):

<img src="unavailable-image.jpg" alt="Example render when the source of the image is not available" width="1000" height="600"/>

Final words

Remember, alternative text is not just for accessibility, it also helps with search engine optimization (SEO) and can improve the user experience for all users, not just those with disabilities.