Image Alt Text: What It Is and Why It Matters for Accessibility

Back to blog

Image Alt Text: What It Is and Why It Matters for Accessibility

Posted February 10, 2023

AudioEye

Posted February 10, 2023

An icon of an eye with a purple iris, above a tag that reads <alt>.
An icon of an eye with a purple iris, above a tag that reads <alt>.

Ready to see AudioEye in action?

Watch Demo

Alt text is a written description of an image that can be read by assistive technologies (such as screen readers) and provides valuable context for disabled users. Learn more about why alt text matters for accessibility.

In today’s digital world, images have become a critical part of the digital landscape. From websites to social media, images are a helpful tool in conveying information and engaging audiences. 

Yet, how do individuals with visual impairments interact with images? How do those who are blind or who have low vision able to navigate a visually-driven landscape? 

Enter alt text — an element that has become one of the most important elements for digital accessibility. Alt text provides users with a straightforward solution for interacting with digital content. But what exactly is it? Why is it so important for digital accessibility? Let’s get into it.

What is Alt Text?

Alt text — also called alternative text — is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders. It’s essentially a written description of what’s conveyed in an image, photograph, infographic, or other non-text content so people with disabilities can understand their context. Alt text is also displayed in the event an image fails to load, and helps search engine bots understand the contents of an image.

Alt text is typically added to your HTML code using the “alt” attribute. It will look something like this:

<img src=”image.jpt” alt=”Description of the image”>

Here’s a more practical example. Say you have this image on your site:

Brown and white dog standing in tall grass and surrounded by white flowers.

Alt text for this image could look something like this: “Brown and white dog standing in tall grass and surrounded by white flowers.” This gives users an idea of what’s happening in the image which can help them better understand how the image relates to the rest of the content on the page.

Alt Text vs. Image Description

Before we go any further, a quick note: alt text is not the same as an image description. The two often get confused, but there are distinct differences between them.

For instance, alt text is typically invisible to sighted users, while image descriptions (also called captions) are displayed directly in the web browser. Captions can also include additional details about an image, such as photo credits or copyright information.

Why is Alt Text Important?

There are a number of reasons alt text is important for digital accessibility.

First, alt text significantly improves the online experience for screen readers. Without these descriptions, screen reader users might miss out on key information communicated via images. Most screen readers will read the image file name if alt text is missing which can be confusing. 

Second, users with cognitive disabilities or attention problems may find pages with numerous images to be overwhelming or distracting. Some web browsers enable users to turn off images to improve focus. Adding alt text ensures these users are still able to experience the page without gaps in content.

Third, alt text can increase your search engine optimization (SEO) rankings. Including descriptive alt text for your images gives search engines a better chance to understand the content on your site, which can boost your search result rankings. Also, search engines have recently started to prioritize the user experience in page rankings and alt text plays a critical role in optimizing the metric.

Finally, alt text helps you to comply with various accessibility laws, including the Americans with Disabilities Act (ADA), the European Accessibility Act (EAA), and the Accessibility for Ontarians with Disabilities Act (AODA). While these laws do not include technical specifications for digital accessibility, each one enforces the recommendations outlined in the Web Content Accessibility Guidelines (WCAG).

WCAG success criterion 1.1.1, for example, recommends digital content include alt text so users with varying disabilities can consume or interact with the content. Without alt text, your site does not fulfill the criteria outlined in WCAG which means your website may not be compliant with the ADA or other accessibility laws. This can leave you vulnerable to accessibility lawsuits or demand letters.

Icons representing five types of images: Informative, Decorative, Functional, Text, and Complex.

When Should I Use Alt Text?

According to the World Wide Web Consortium (the creators of WCAG), all images must have a text alternative that describes their function or the information they represent. However, that doesn’t mean every image should be treated the same.

Here’s a quick overview of the different types of images — and how to write alt text for each one:

  • Informative images: If a picture, photo, or illustration is intended to visually represent an important concept or information, the text alternative should be a short description conveying the essential information presented by the image.
  • Decorative images: If an image’s only purpose is to add visual decoration (rather than convey information that is important to understanding the page), adding a null (empty) text alternative (alt=””) tells assistive technologies to ignore, or not announce, the image. WCAG does recommend using alt text for all decorative images to ensure a seamless user experience.
  • Functional images: If an image is used as a link or button (such as a printer icon to represent the print function), the text alternative should describe the functionality of the link or button, rather than the visual image.
  • Images of text: If readable text is presented within an image, the text alternative should contain the same words as the image. 
  • Complex images: To convey data or detailed information (such as a graph or diagram), the text alternative should be a complete text equivalent of the data or information provided in the image.

Not sure how to treat a specific image? The W3C has developed an alt text decision tree to help you choose the right alt text based on the image’s purpose.

A stylized drawing of a flower, next to text explaining that images may be decorative when they are visual styling, illustrative of adjacent text, or identified and described by surrounding text.

How Do I Know if an Image Is Decorative?

There’s quite a bit of subjectivity when it comes to deciding if an image is decorative or informative. As a general rule, images may be decorative when they are:

  • Visual styling, such as borders, spacers, or corners.
  • Illustrative of adjacent text, but not contributing any additional information.
  • Identified and described by surrounding text.

To help you determine if an image is decorative, the W3C’s Web Accessibility Initiative (WAI) recommends pretending to read your web page out loud to someone over the phone. If the image doesn’t contain any information and isn’t a link or button, you can consider it decorative.

Pro tip: If you use a null (empty) text alternative (alt=””) to hide decorative images, make sure not to include a space between the quotes. If a space is present, the image may not be effectively hidden from assistive technologies.

""

Four Alt Text Best Practices

Now that you have an in-depth understanding of alt text, let’s look at some alt text examples. We’ll look at both poor and good alt text use so you can see the difference.

The picture we’re creating alt text for is of men and women attending a business meeting and discussing a financial chart.

  • Poor: “Group of people attending a meeting.
    While this description does provide some context, it leaves out valuable information that conveys the real meaning behind the image.
  • Better: “Men and two women in a conference room talking.
    undefined
  • Best: “A group of professionals gathered in a conference room discussing a financial chart displayed on a whiteboard.
    undefined

1. Don’t Start With “Image of” or “Picture of”

It might seem like a helpful cue, but remember not to include phrases like “picture of” or “image of” in your alt text. Screen readers will know from the preceding HTML tag to announce the alt text as an image — so including these phrases in the alt text will only disrupt the user experience and waste valuable characters that could be used to describe the image:

Pro tip: In some cases, it may be necessary to declare if something is a painting, a photograph, or an illustration, but in general, it’s best to avoid the more generic use of the terms, i.e., image or picture.

2. Be Descriptive

People using screen readers can ignore what you write, but they can’t ignore what isn’t there. For that reason, it’s important to be as descriptive as possible — while still paying close attention to the context and setting of the image.

For example, the phrase “golden retriever puppies” is an okay description for a photo on the homepage of a veterinarian's website, but adding details can provide valuable context. If the page lists specific services for dog owners, a better use of alt text might be: “Golden retriever puppies getting their first vaccinations.”

3. Lead With the Most Important Information

The same rules that apply to news articles and novels apply to alt text: Don’t bury the lede, and have a strong hook. Try to put the most important information about an image at the very beginning, so people aren’t left wondering why you’re describing every minute detail of an image.

4. Write for People, Not Search Engines

Many developers make the mistake of trying to stuff keywords into their site’s alt text, like it’s some sort of secret element that will fool search engines. 

Here’s the problem: You can actually harm your website’s SEO efforts by stuffing keywords into alt text. Even worse, the people who actually rely on alt text to understand a page will certainly take notice.

If you can naturally fold a keyword into your alt text — great. But don’t fall into the trap of keyword stuffing.

Alt Text Examples: Good and Bad

A PDF cover next to a title that reads: "Check out our Guide to Accessible Design"

Take the Next Steps Toward Accessibility

Alt text plays a critical role in ensuring individuals with visual or cognitive disabilities can interact with and consume digital content. Good, descriptive alt text provides much-needed context around images and ensures readers have all the information needed to understand what’s happening on a page.

Want to make sure everyone can enjoy your website, images and all? AudioEye’s Website Accessibility Scanner conducts an in-depth scan of your webpages and highlights common accessibility issues — including missing alt text. Our team of human testers will also perform an expert audit of your site to identify accessibility issues that can’t be detected by software alone such as poor or non-descriptive alt text.

Ready to get started? Scan your website below.

Interested in learning more about accessible design? Check out our ‘Ultimate Guide to Accessible Design’.

Use WordPress or Squarespace as your CMS? Check out specific guidance for accessibility on these platforms in our WordPress ADA Compliance and Squarespace ADA Compliance guides.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading