Alt Text for Accessibility

Visual content has become an integral part of today’s digital landscape. On websites and social media platforms, images play a key role in conveying information and captivating audiences. But what about users who are blind or have low vision, or other disabilities that make it difficult to perceive visual content? How do they access this information? That’s where alt text comes in, providing a simple way to make graphic elements accessible to all.

Whether you’re a visual learner or not, images can add an extra layer of richness to digital content. Photos and illustrations create a more approachable experience by providing context and breaking up blocks of text, while charts and infographics enable learners to quickly digest new concepts and data trends. But without meaningful alt text, individuals with visual or cognitive disabilities miss out on these benefits.

In this post, we explore the importance of alt text for accessibility (and beyond) and provide practical tips for writing it more effectively, so you can ensure that your content is reaching its full potential and benefiting all users.

What is alt text?

Alternative text, also called alt text or a text alternative, provides users with a brief yet informative description of the information conveyed by images such as photos, charts, graphs, maps, and infographics. It allows people who use screen readers or other assistive technologies to understand the context of on-page visuals. Additionally, alt text will populate on a webpage in the event that an image doesn’t load. Alt text is housed in the alt (alt=) attribute of an image in HTML content.

Why use alt text?

Alt text is important for accessibility

When images are accompanied by alt text, everyone can understand the content of a web page. Let’s explore some of the types of users that benefit from alt text for accessibility.

1. Screen reader users: Many people who are blind or have low vision use screen readers to consume online content. Without alt text, screen reader users may miss out on important information that’s being communicated by images. Since screen readers typically read out the file names for images that lack alt text, failing to provide these descriptions also causes unnecessary disruption to users’ experience.
2. People with cognitive disabilities: Some individuals with cognitive disabilities may find an abundance of images distracting, overwhelming, or difficult to parse and process. Many web browsers have features that enable users to turn off all images on a site. Alt text enables these users to experience a page without gaps in context.
3. People with limited internet bandwidth: Finally, alt text is helpful for those who have a slow internet connection, especially those in geographic locations with unreliable internet service. Individuals who turn off images to reduce page loading time can still understand their contents if alt text is displayed on the page.

This is just a small sample of the types of users that benefit from alt text for accessibility. 

Alt text keeps websites compliant

Including alt text for accessibility is necessary for conforming with the Web Content Accessibility Guidelines (WCAG), the universal standard for evaluating the accessibility of digital content. While WCAG itself is not a law, it is frequently cited in ADA compliance lawsuits concerning web accessibility. Additionally, WCAG conformance is mandatory for entities covered by Section 508 of the Rehabilitation Act in the U.S., and the Accessibility for Ontarians with Disabilities Act (AODA) in Canada.

Alt text boosts SEO

Alt text is a powerful tool for boosting your website’s search engine optimization (SEO) efforts. While it’s well-known that including alt text helps make your content more accessible, it also has a measurable impact on your site’s search engine rankings. By providing meaningful alt text for images, you’re giving search engines a better understanding of the content on your site, which can lead to higher rankings in search results. Additionally, recent updates to search engine algorithms have made user experience a top priority in determining page rankings, and alt text for accessibility is a key factor in optimizing for this metric.

Tips for writing effective alt text

We’ve established the importance of including alt text for images. However, an image with poor alternative attributes can be just as unhelpful as one with none at all. Here are a few best practices to keep in mind when writing alt text:

1. Keep it short. Excessively long alt text can be a source of frustration for screen reader users and may be cut off. As a rule of thumb, keep alt text to 125 characters or less. If anything more than a brief phrase or sentence is necessary, use one of the long description methods detailed later in this post under “complex images and images of text.”
2. Include important details. While concision is a priority, don’t omit information that is crucial for understanding an image’s context and purpose.
3. Structure alt text with the most important information at the beginning.
4. Be mindful of tone and language. Writing should be neutral and free of superfluous, subjective adjectives like “beautiful,” “terrible,” and “funny.”
5. Keep the context of the page in mind and what the image is meant to add to this context.
6. Avoid including “image of,” “picture of,” or “graphic of,” as the user already knows you’re describing an image. However, information about the type of image (such as a chart, photo, illustration, or screenshot) may be useful, depending on context.
7. Keep alt text free of spelling and grammar mistakes. These errors defeat the purpose of crafting alt text for accessibility.

Alt text examples

Let’s examine a few photos, along with examples of effective—and ineffective—alt text for each.

Context: Imagine that this image is included in a campus news article on a university’s website. The piece details preparations that four of the university’s runners are undertaking for an upcoming track and field meet.

Poor alt text: Runners training

This alt text doesn’t provide sufficient information about who the runners are, or why they’re training.

Okay alt text: Four female runners train on a sunny day for Saturday’s track and field meet.

This description provides a little more information, but not necessarily the right kind. If the post were about the benefits of exercising outdoors, mentioning the weather might be relevant. However, this post focuses on the activities of a specific sports team.

Better alt text: Emma G., Alexa A., Lorna D. and Becca T. do training lunges using black step-up boxes near the track field in preparation for Saturday’s meet.

We now know exactly who is training, along with how, where, and why this training is taking place.

Context: Imagine that this image will be used to showcase a new product from a fashion designer.

Poor alt text: A pair of trendy sneakers, sitting on a white podium in front of a white background.

While this alt text isn’t inaccurate, it doesn’t reflect alt text best practices. It is not tone-neutral, and it describes unnecessary details while leaving others too vague.

Okay alt text: A pair of leather basketball sneakers featuring purple, yellow, grey and pale green detailing. The shoes have chunky white rubber soles with red accenting, and red laces. On the side of each sneaker, a beige canvas strap extends up from the sole to the laces.

While this is very descriptive, it’s too long and is likely to be cut off by a screen reader. Remember that alt text needs to be succinct.

Better alt text: Leather basketball sneakers with purple, yellow, grey, and green detailing, chunky white rubber soles, and red laces.

While alt text accessibility should provide a meaningful description of an image, it’s important to strike the right balance between concision and detail. In this example, shoppers will benefit from additional information about these shoes—but an accessible product web page would use body text, rather than alt text, to share more granular details.

Alt text for complex images and images of text

Photographs are not the only visual elements that require alt text for accessibility. So do graphs, charts, maps, infographics, and images of text. However, thorough descriptions for information-heavy images typically exceed the recommended character count for alt text. So, how should you approach alt text in these cases?

To write alt text for charts and graphs, include the chart type (for example, line graph, bar graph, or pie chart), the type of data the chart displays, and a summary of the main trend in the chart. Alt text for maps and infographics should contain a brief summary of the information. Provide more detailed information in the surrounding body text, or include in-depth text descriptions directly below these images.

For images of text, such as promotional banners, alt text should repeat, verbatim, the text displayed in the image. However, there is one exception to this rule. In some cases—such as a banner that contains a heading followed by a list—users need a semantic structure to understand the information that’s conveyed by the text in an image. In these situations, it’s best practice to include a separate text description below the graphic, offering only a concise summary in the alt attribute.

Types of images that don’t require alt text

While most images require alt text for accessibility, there are a few exceptions to this rule. When an image serves a purely decorative purpose, or when the content of an image is already described in the accompanying copy, the alt text field should be left blank. A blank alt text field is also known as an “empty” or “null” alt attribute.

If unnecessary or redundant alt text is added to a decorative image, it can create a disruptive and frustrating experience for screen reader users who rely on alt text to understand the content of a page. In these cases, it is best to use empty or null alt attributes (i.e., alt=””) instead, which indicates to screen readers that the image is purely decorative and should be skipped over. This allows the screen reader to move smoothly and seamlessly through the content without any unnecessary interruptions.

For example, imagine you’re writing an article about cat health and include a colorful banner with paw prints at the top of the page. While the image is relevant, it does not provide additional context or information—someone could read the article without the banner and absorb the same knowledge. But if the same article provides a graph displaying the five most common illnesses for indoor cats, alt text is necessary for all users to access the graph’s content.

Not sure if an image is decorative? Certain testing tools will hide images on a page and display their alt text instead. If a page provides the same amount of value with an image hidden, that image is likely decorative. The Worldwide Web Consortium (W3C)’s alt Decision Tree is also a useful resource for determining how specific images should be treated in different scenarios.

How to add alt text to images

Now that we’ve covered best practices for writing alt text for accessibility, let’s explore a few ways you can add alt text to images in digital content.

Adding alt text in HTML

If you’re familiar with HTML, you can embed alt text directly into the HTML code of a document. First find the code for the relevant image, which should follow this format: <img src=”imagetitle.jpg”>. After the src attribute, input your alt text in the “alt=” attribute.

Adding alt text in a content management system (CMS)

Most CMS platforms make adding alt text easy. When you insert an image into a web page, you’ll find a field where you can type in your description. Some CMS platforms even provide a link with a few alt text pointers.

Adding alt text on social media platforms

Social media sites including Twitter, Instagram, and Facebook now support the addition of alt text. As soon as you upload a photo to post, you’ll find an “add description” button. Like many CMS platforms, most major social media platforms also provide handy links to alt text best practices.

Effective alt text benefits everyone

By following alt text best practices, you can ensure that everyone who encounters an image receives the same information. And if you’re on the path to making your website more accessible, adding alt text is a great place to start.

However, alt text is just one of many accessibility features teams need to consider when creating accessible websites. Level Access’ digital accessibility solution can accelerate your progress by combining advanced software for testing and monitoring your digital properties with expert managed services including manual evaluation, design reviews, and strategic support. To learn more about what we can accomplish together, engage with our team today.

Start your journey toward accessibility.

Contact us