ADA Alt Text Best Practices for Every Image Type

Missing alt text is one of the most common problems found on websites. Following ADA alt text best practices helps make images accessible to screen reader users, but writing a useful description isn’t always straightforward. A product photo, a decorative graphic, and a clickable icon each need a different approach.

The 2026 WebAIM Million report found that 53.1% of the one million home pages tested had images without alt text. Having it in place doesn’t always solve the problem, either. Some descriptions are too vague to be useful, while others repeat what’s already on the page or contain keywords that have little to do with the image.

These are some of the most common accessibility issues found on websites. We’ll look at how to write useful alt text for different types of images, including examples and steps you can follow on your own site.

What Is Alt Text?

Alt text, short for alternative text, is a written description added to an image’s HTML. Screen readers can read it aloud, explaining the image to people who cannot see it. The text may also appear when an image fails to load.

Alternative text for images serves several purposes, depending on how the image is used.

• It gives screen reader users access to visual information. Someone visiting a product page can hear a description of the item instead of missing the image entirely.
• It provides an alternative when an image doesn’t load. Visitors can still get an idea of what the missing image was supposed to show.
• It helps search engines identify image content. Google’s image SEO guidelines explain that alt text, surrounding text, and other page details help identify images. This is one way alt text helps SEO, particularly for image searches.

The descriptions are stored in HTML through image alt attributes. For example:

<img src=”red-shoes.jpg” alt=”Red running shoes with white soles”>

Alt text is also part of website accessibility standards. Although the Americans with Disabilities Act (ADA) doesn’t specifically mention image descriptions, WCAG Success Criterion 1.1.1 requires text alternatives for non-text content, with certain exceptions.

This is one of the Level A requirements within the Web Content Accessibility Guidelines. WCAG is widely used to assess accessibility under various ADA website compliance requirements.

Alt text also supports the Perceivable principle in WCAG. Information shouldn’t depend entirely on a person’s ability to see an image.

How to Decide What Alt Text an Image Needs

Before describing an image, consider why it’s on the page. A photograph in a product listing serves a different purpose from the same photograph used as a background.

The W3C alt decision tree offers a useful way to choose the appropriate text alternative.

1. Does the image contain written text? If the wording isn’t available elsewhere, include it in the alt text. If the same information appears nearby, the image may not need a separate description.
2. Does the image work as a link or button? Describe what happens when someone selects it. For example, a magnifying glass button should communicate “Search” rather than describe the symbol.
3. Does the image provide useful information? Describe what matters in the current context. This includes product photographs, instructional images, and illustrations.
4. Does it contain detailed information? Charts, diagrams, and maps may need a short description and additional text explaining their data.
5. Is the image purely decorative? Use an empty alt attribute, written as alt=””, so screen readers can skip it.

Some images are harder to classify. Groups of photographs might need separate descriptions, while a collection of icons representing one rating may need only a single text alternative.

If you’re unsure, ask what someone would miss if they couldn’t see the image. That usually points you to the right answer.

Alt text is also one of the first things Oyova’s developers check during an ADA compliance audit. Missing descriptions are relatively easy to find, but deciding whether the existing text helps often requires a closer review.

Alt Text Best Practices

Good alt text doesn’t require complicated writing. Most descriptions can be kept to a sentence or less, provided they communicate what matters.

These alt text guidelines also address common mistakes found during accessibility issues reviews.

• Describe what matters. Include details that help explain the image’s purpose. A photograph of a restaurant entrance may need to mention the accessible ramp rather than the building’s color.
• Keep descriptions brief. A sentence or less works for many images. WCAG doesn’t set a universal 125-character limit, so include additional information when it’s necessary.
• Consider the surrounding content. An image may need different descriptions on a product page and in an article about manufacturing.
• Skip unnecessary introductions. Screen readers generally identify images already, so phrases such as “image of” or “picture of” usually add little value.
• Keep the wording direct. “Chef slices vegetables on a cutting board” tells readers what’s happening without adding extra words. There’s usually no reason to write “Vegetables being sliced by a chef.”
• Don’t force keywords into descriptions. If a keyword fits the image, there’s no problem using it. But repeating search terms or adding unrelated phrases makes the description less useful. Google also recommends avoiding keyword stuffing in alt attributes.
• Leave decorative images without descriptions. If an image is there purely for appearance, use alt=””. This tells screen readers to skip it. Leaving out the alt attribute altogether doesn’t do the same thing.
• Don’t forget images loaded through JavaScript. Some websites display images after the page has loaded. Those images still need the correct alt text, just like images included in the original HTML.
• Check alt text when you change a page. Replacing an image or changing where a button leads can make its old description inaccurate. Reviewing these details should be part of ongoing accessibility compliance.

These rules are also useful for anyone looking for alt tag best practices. Although people often say “alt tags,” the correct HTML term is the alt attribute.

You can use automated compliance checkers to identify missing attributes. Tools such as WAVE and Axe are useful starting points, but they cannot always determine whether a description makes sense.

Alt Text Examples by Image Type

The easiest way to see the difference between useful and unhelpful alt text is to compare examples.

Image type	Poor alt text	Better alt text	Why it works
Product photo	“Shoes product sale”	“Black running shoes with white soles”	Identifies the actual product
Company logo	“Logo image”	“Oyova”	Gives the company’s name
Social media link	“LinkedIn icon”	“Oyova on LinkedIn”	Identifies the destination
Search button	“Magnifying glass”	“Search”	Explains the action
Sales chart	“Sales graph”	“Monthly sales increased from January through June”	Communicates the main finding
Image of text	“Promotional banner”	“Free shipping on orders over $50”	Provides the written message
Decorative divider	“Blue horizontal line”	alt=””	Avoids unnecessary information

 

These examples assume the information isn’t already available nearby or in an existing accessible label.

The right description can also change with the image’s role. A company logo in the footer may need the company’s name, while the same logo linking to the homepage should identify the destination to follow ADA compliance guidelines.

Alt Text for Decorative Images

Decorative images make a page look more appealing without adding essential information. Screen reader users generally don’t need to hear descriptions of these elements.

For a purely decorative image, use an empty alt attribute:

<img src=”divider.png” alt=””>

With alt=””, screen readers can skip over images that don’t add anything to the content.

You might use it for:

• Background designs that add color, shapes, or textures to a page.
• Small illustrations next to headings that already make the subject clear.
• Arrows and other symbols beside links that have text explaining where they lead.

Consider a leaf icon beside a heading reading “Sustainability Efforts.” Since the heading already provides the information, the leaf can use an empty alt attribute.

The same applies to a small arrow beside a “Read More” link if the link already has a meaningful accessible name.

For background patterns and other visual decorations, CSS is often preferable to adding separate image elements.

The same image can need different alt text depending on where it’s used. A skyline photo might be purely decorative on one page but provide useful details in an article about architecture.

Adding keywords to decorative images doesn’t help with accessibility, either. Knowing which images need descriptions is one small part of checking whether your website is ADA compliant.

Alt Text for Informative Images

Some images provide information that isn’t explained in the text around them. A photo might show a specific product feature, demonstrate a safety measure, or give visitors a better idea of what a place looks like.

The description should reflect what the image contributes to the page. Listing every object in the picture isn’t always necessary.

Here are a few situations where the right details make a difference.

• Product and instructional photographs. An image of a bicycle in an article about nighttime safety could use “Black bicycle with front LED headlight switched on.” The headlight matters more than the bicycle’s brand or the color of the pavement.
• Images that show a setting. A bookstore could describe a photo of its reading area as “Armchair beside a window in a bookstore reading corner.” This gives visitors an idea of what the space looks like without going into unnecessary detail.
• Information symbols. A storage symbol on food packaging could use “Keep refrigerated.” There’s no need to start with “Icon” because the information itself is what matters.
• Contact information icons. Small graphics beside contact details may need descriptions such as “Email” or “Address” if those labels aren’t already provided in the surrounding text.
• Illustrations explaining a process. If an image shows how to install a device, describe the step or result being demonstrated rather than simply calling it an installation diagram.

A description can be accurate but still miss the point. “Person standing beside a bicycle” might describe what’s visible, yet it tells a reader very little about the safety equipment being discussed.

The same image may also need different alt text on another page. What matters is the information readers would otherwise miss, without repeating details they’ve already received.

Alt Text for Functional Images (Links, Buttons, and Icons)

Functional images let visitors perform an action. They might open another page, submit a form, download a document, or start a search.

For these images, describe the action rather than the appearance.

A house-shaped icon linking to the homepage should communicate “Home” or “Go to homepage.” Describing it as “House icon” doesn’t explain what selecting it does.

Here are other useful examples:

• Download button with an image-only control uses “Download PDF” or “Download eBook.”
• Social media icon linking to a company profile uses “Oyova on LinkedIn.”
• Submit button represented only by an image uses “Submit form.”
• Search icon functioning as a button uses “Search.”

An icon indicating that a link opens in a new tab may also need an accessible explanation of that behavior. If the surrounding link already provides the destination, avoid repeating its entire label.

Linked logos follow the same principle. A logo linking to Oyova’s homepage can use “Oyova home” rather than simply “Oyova logo.”

If an image sits inside a button that already has a proper accessible label, the image itself may be decorative. What matters is that the control has a clear name.

On forms and payment pages, including accessible checkout buttons, people need to know what each button does. A missing or confusing label can make it harder to submit a form or complete an order.

Keep button labels consistent across your website, too. For example, if a search button says “Search” on one page, use the same label elsewhere instead of switching to “Magnifying glass.”

Alt Text for Complex Images (Charts, Diagrams, and Maps)

Charts and diagrams can communicate information that doesn’t fit into a short description. They may show several data points, relationships, or instructions that visitors need to access.

A good approach is to provide brief alt text followed by a more detailed explanation.

For example, suppose a chart shows that renewable energy use tripled between 2010 and 2020.

The alt text could say: “Renewable energy use tripled between 2010 and 2020.”

The text below the chart could then explain the individual figures, important changes, and other findings.

Other examples include a solar panel wiring diagram that needs written installation steps, or a map showing deforestation that requires descriptions of affected regions and their measurements.

There are several ways to provide additional information:

1. Place a description near the image. Explain the chart’s findings or diagram’s steps in regular page text.
2. Link to a detailed explanation. Provide a clearly labeled link to a separate page or section containing the full information.
3. Use HTML figure and figcaption elements. These can associate an image with a visible caption or a link to further details.
4. Connect descriptions with aria-describedby. Developers can reference an existing text element so assistive technology can associate it with the image.

The description should communicate the information needed to use the content, rather than simply identify the type of graphic.

If a chart provides information essential to a decision, consider including an accessible data table. This gives readers access to exact figures instead of relying entirely on a visual display.

Alt Text for Groups of Images

Sometimes several images communicate one idea. Other times, each image provides information that deserves its own description.

Consider a product rating shown through five star icons. If the product has four filled stars, a single accessible description such as “Rated 4 out of 5 stars” communicates the complete rating.

The other star icons can have empty alt attributes to avoid reading the rating over and over. You could also write “Rated 4 out of 5 stars” next to the images and leave the icons without descriptions.

Photo galleries are a little different because each picture may show something new. For example, a gardening website might have photos showing how a garden changes throughout the year:

• “New plants beginning to grow in early spring”
• “Colorful flowers blooming in the summer garden”
• “Garden trees with yellow leaves in autumn”

Each description helps readers follow the garden’s changes.

Developers can use HTML figure and figcaption elements to associate images with their captions. Where necessary, ARIA attributes can connect groups and labels.

The goal is to provide information without forcing screen reader users to hear repeated descriptions, which can hurt rankings.

Alt Text for Image Maps

An image map is a picture with several clickable sections. For example, a university might use a campus map that allows visitors to select a building and open its information page.

The image needs a description of its overall purpose, but each clickable area also needs to tell visitors where it leads.

A few details are worth checking when adding alt text to an image map.

• Describe the complete image. The main image might use “Interactive university campus map” or “Zoo map showing visitor attractions.” This gives readers some context before they encounter the individual links.
• Identify each clickable area. Every interactive area needs an accessible name that describes where it goes. On a campus map, examples might include “Campus library” and “Student services building.”
• Provide regular text links. A list of destinations beside the map gives visitors another way to reach the same information. This helps people using assistive technology and those who have trouble selecting small areas on a screen.
• Check how the map works on mobile devices. If the image changes size, its clickable regions must stay aligned with the correct locations.

An image map may look simple, but visitors still need to know which areas they can select and what happens when they do.

For more detailed maps, such as those showing building accessibility or transportation routes, include the important information in regular page text as well.

Alt Text for Logos, Images of Text, and SVGs

Some images need a slightly different approach because they contain branding, written information, or graphics created directly in code.

Logos

For a company logo, the business name is usually enough.

A standalone Oyova logo can use alt=”Oyova”. If that logo links to the homepage, alt=”Oyova home” communicates the destination.

When the business name already appears next to the logo as text, the image may be decorative and use an empty alt attribute.

Images of Text

Promotional banners, announcements, and graphics sometimes contain words that aren’t available elsewhere on the page.

If an image contains important text, make sure that wording is included in the alt text. Say you have a promotional banner offering “Free shipping on orders over $50.” The description should mention that offer, unless it’s already written elsewhere on the page.

Whenever possible, use real HTML text instead of placing essential information inside an image. Regular text is easier to resize, translate, and access with assistive technology.

SVGs

Scalable Vector Graphics (SVGs) are commonly used for logos, icons, and illustrations. Unlike standard image files, some SVGs are placed directly in a page’s HTML.

The right way to label them depends on how they’re added to the website.

• SVGs added as regular images. When an SVG is inserted through an HTML img element, it can use the normal alt attribute. For example, a logo might use alt=”Oyova”.
• SVGs written directly into HTML. Inline SVGs can receive an accessible name through a title element connected with aria-labelledby, or an appropriate aria-label and role=”img”.
• Decorative SVGs. A background shape or visual separator doesn’t need to be announced. Developers can use aria-hidden=”true” for decorative inline SVGs.
• SVGs used in buttons or links. Make sure the button or link has a label that explains what it does. For example, a search button should say “Search” instead of “Magnifying glass.”

There’s no need to add a separate label to every decorative element. What matters is whether someone using a screen reader receives the same useful information or can complete the same action.

For interactive SVGs, checking the finished page with a screen reader can reveal missing names that aren’t obvious from looking at the design.

AI-Generated Alt Text

AI tools can help write alt text for images. Some website platforms even have features that generate these descriptions automatically.

These features can be useful for websites with large image libraries. However, generated descriptions aren’t always accurate or appropriate.

An AI tool might identify a person sitting at a computer without recognizing that the image is meant to demonstrate an accessibility testing process.

AI can also miss words in an image, mistake one object for another, or include details that aren’t needed.

Before using AI-generated alt text on your website, check the following:

• Accuracy. Make sure the description matches what’s actually shown in the image.
• Context. Check whether it describes the details that matter for the page where the image appears.
• Relevance. Remove anything that doesn’t help readers understand the image.

For example, AI might describe a photograph as “Person holding a smartphone.” On a product page about protective cases, “Person holding a smartphone in a clear protective case” may be more useful.

Automatic descriptions should also be checked when content changes. An image reused on another page may need different wording.

The same caution applies to accessibility widgets that generate descriptions automatically. Installing one doesn’t guarantee WCAG conformance or ADA compliance.

Automated testing can identify missing alt attributes, but it may not recognize a description that gives visitors the wrong information. Manual review by an experienced developer helps identify problems that automated tools can miss.

How to Add Alt Text in WordPress and Other CMSs

Most website platforms let you add alt text directly through their editors, so you won’t need to change any HTML code. Where you’ll find this option depends on the platform you’re using.

WordPress

In WordPress, you can add alt text while editing a page or through the Media Library.

1. Open the page or post where the image appears.
2. Click the image you want to edit.
3. Find the Alternative Text field in the image settings.
4. Write a short description of what the image shows and why it matters on the page.
5. Save your changes or update the page.

You can also open an image in the Media Library and edit its Alternative Text field.

Keep in mind that the image title, caption, and alt text are separate fields. A caption appears visually on the page, while alt text provides an alternative for the image.

Shopify

In Shopify, open the product or content area containing the image. Select the image and look for its alt text editing option.

Add a description that identifies the product or information shown, then save your changes.

For product images, details such as color, material, and visible features are often more useful than repeating the product name several times.

What Happens If You Don’t Have ADA-Compliant Alt Text

Missing or inaccurate alt text can prevent visitors from accessing information they need. It can also create problems for businesses that are expected to provide accessible digital services.

The possible consequences include:

• Legal concerns. Inaccessible image content can contribute to accessibility complaints and ADA website lawsuits. The legal requirements depend on the organization and its circumstances.
• Lost customers. Someone who cannot identify a product, read an important graphic, or use an image-based button may leave without completing a purchase or submitting a form.
• Missed business opportunities. Accessibility problems can affect partnerships, contracts, and customer confidence, particularly where accessibility requirements are part of an agreement.

Missing alt text can also affect how your images appear in Google search results. Google uses these descriptions to help identify what’s in an image, although meeting accessibility standards isn’t itself a confirmed ranking factor.

Looking at examples of non-compliant websites can also show you other accessibility problems that may need attention.

The broader consequences of non-compliance depend on the website, the barriers involved, and the applicable legal requirements.

Alt text is one part of making a website accessible. Even with proper image descriptions, your site may still have issues that affect ADA compliance, such as forms that are difficult to use, poor color contrast, or features that don’t work with a keyboard.

Work With An ADA Team

Good alt text depends on how you use an image on the page. Following ADA alt text best practices means describing details that matter, giving buttons and links clear labels, and leaving out descriptions for decorative images. It’s also worth checking your alt text whenever you update your website.

The same approach applies whether you’re working with a few images or managing a large website.

At Oyova, our developers check image descriptions during website accessibility audits for missing alt text and descriptions that don’t clearly explain the image. We also help businesses remediate accessibility issues and fix other problems found on their websites.

Contact us to discuss your website’s accessibility needs.

---

Disclaimer: The information provided in this blog is for general informational purposes only and is not intended as legal advice. The contents of this blog may not reflect the most current legal standards or interpretations. For specific legal advice regarding ADA compliance or other legal issues, please consult with a qualified attorney. Oyova does not guarantee the accuracy, completeness, or usefulness of any information on this site and is not responsible for any errors or omissions or for the results obtained from the use of this information.

---