Alt Text for Accessibility

If you’re aiming to create a more inclusive and accessible digital experience for all users, visual content is a great place to start. 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—a simple but essential way to make images meaningful and usable for everyone.

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 blog, we’ll 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, including people with disabilities.

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?

Providing alt text for images 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.

What are some alt text best practices?

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 consider when writing alt text:

1. Keep it short. Aim for 125 characters or less—screen readers may cut off longer text, and brevity keeps things clear.

2. Include important details. Be concise, but don’t leave out context that helps users understand the image’s purpose.

3. Prioritize important details. Lead with the essential details at the beginning so users get the point quickly.

4. Use neutral, clear language. Be mindful of flowery or subjective adjectives like “beautiful” or “funny.” Stick to what’s necessary.

5. Consider the page context. Think about why the image is there and what it’s meant to add to the surrounding content.

6. Skip the obvious. Avoid writing “image of” or “picture of”—screen readers already do that. Mention the type only if it’s useful (e.g. chart or screenshot).

7. Check spelling and grammar. Mistakes make alt text harder to follow and less useful. Give it the same attention you’d give any other content.

Alt text examples

Let’s examine a few photos, along with alt text variations that range from ineffective to optimal. Each version is evaluated based on how well it communicates the image’s content and purpose in the given context.

Image description: Four women are working out together on a track, doing step-ups and lunges using raised platforms.

Context: This image will be 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.

Ineffective alt text: Runners training

This version is too vague. It lacks detail about who is involved, what they’re doing specifically, and why. It doesn’t reflect the context of the article or add meaningful information.

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

This adds some context and detail but includes elements that may not be relevant—such as the weather. Since the article centers on the team’s preparation, the alt text should focus more on the athletes’ actions and roles.

Optimal alt text: Four women perform training lunges using black step-up boxes near the track in preparation for Saturday’s meet

This version provides clear, specific, and relevant information. It identifies who is in the image, what they’re doing, where, and why—all in a concise, neutral tone that aligns with the page’s context.

Image description: A pair of trendy sneakers sit on a white podium in front of a white background.

Context: This image is being used to showcase a new product from a fashion designer.

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

While factually accurate, this alt text doesn’t follow best practices. The use of subjective language (“trendy”) introduces bias, and the description focuses on visual setup rather than product-relevant details.

Acceptable alt text: A pair of colorful basketball sneakers with pink laces. Each sneaker has white soles and a beige canvas strap on the side.

This version captures detailed product features but exceeds recommended length and could be cut off by screen readers. It may also overwhelm the user with too much information in one go.

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

This description balances key product details with brevity. It avoids subjective language, stays focused on what matters for a product showcase, and remains accessible within typical character limits.

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 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 indicate 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

Alt text is used in HTML. HTML, or HyperText Markup Language, is like the building blocks of websites. Think of it as a set of instructions that tell your browser how to display content on a webpage. It uses tags, which are like special codes, to format text, add images, create links, and more. For example, <p> is a tag that tells the browser to display a paragraph. HTML makes sure that when you visit a website, everything looks and works the way it should.

Alt text for HTML helps improve accessibility by providing context for screen readers and search engines. When an image can’t be displayed, the alt text appears instead, ensuring that the content’s meaning is still conveyed.

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: A small step with a big impact

By following alt text best practices, you help ensure everyone gets the same information from an image—including those with disabilities. If you’re working toward a more accessible website, adding alt text is one of the smartest places to start.

Level Access’ comprehensive digital accessibility solution includes automated remediation tooling that quickly detects and fills in missing alt text—saving your team time while improving usability.

For a more holistic approach to end-to-end accessibility, Level Access combines technology, managed services, and legal expertise to help you make your digital assets accessible and compliant. Request a demo to learn how you can kickstart your journey to digital inclusivity today.

Frequently asked questions

Is alt text legally required for digital content?

Yes—while the Web Content Accessibility Guidelines (WCAG) aren’t laws themselves, they’re widely referenced in ADA, Section 508, and AODA compliance cases. Non-compliance puts your business at legal and reputational risk.

What types of images need alt text—and which don’t?

All informative images—charts, graphs, photos, infographics—require alt text. Decorative images don’t and should use empty alt tags (alt=””) to avoid cluttering screen reader output.

What’s a common mistake when adding alt text to images?

One common mistake when writing alt text is being too vague or verbose. Alt text that’s either lacking key detail or overloaded with description can negatively impact the user experience.

Can alt text support SEO performance?

Alt text can support your search engine optimization (SEO) efforts by giving search engines context about your images.