Alt Text: The Complete Guide

What Is Alt Text and Why Does It Matter?

Alternative text — commonly called alt text — is a fundamental building block of web accessibility. It is a text description added to an image's HTML code using the alt attribute, and it serves as a replacement for the image when the visual content cannot be perceived.

Alt text matters for several critical reasons. Screen reader users — people who are blind or have low vision — rely on alt text to understand what an image conveys. When a screen reader encounters an image, it reads the alt text aloud. Without alt text, the screen reader may skip the image entirely or, worse, read the file name, producing meaningless announcements like "IMG underscore 4837 dot jpg."

Beyond screen readers, alt text serves users on slow connections where images fail to load, users who have disabled images to conserve bandwidth, search engine crawlers that cannot interpret visual content, and anyone using a text-only browser or reading mode.

Missing alt text is the single most commonly cited accessibility violation in ADA website lawsuits and the most frequently detected issue in automated accessibility scans. The WebAIM Million report, which analyzes the accessibility of the top one million websites, consistently finds that missing alt text affects over 50 percent of homepages tested.

The good news is that writing good alt text is a skill that anyone can learn. It requires no technical expertise — just an understanding of the image's purpose and a clear, concise writing style.

The WCAG Requirement

Alt text is required by WCAG 2.2 Success Criterion 1.1.1: Non-text Content (Level A — the minimum conformance level). This criterion states that all non-text content presented to the user must have a text alternative that serves the equivalent purpose. There are specific exceptions for decorative images, CAPTCHAs, and purely sensory content, but the default requirement is clear: if an image conveys information, it needs a text alternative.

When to Use Descriptive Alt Text

Most images on a website need descriptive alt text. The key question to ask is: if this image were removed, would the user miss any information or context? If the answer is yes, the image needs descriptive alt text.

Informative Images

Informative images supplement or illustrate the surrounding text content. These are the most common type of image on the web, and they require alt text that describes the relevant information the image conveys.

For example, a photograph of a flooded street in a news article about severe weather should have alt text like: alt="Floodwater covers a residential street in Austin, Texas, with water reaching above car tires". The alt text conveys the meaningful visual information that supports the article's content.

Functional Images

Functional images are used as links, buttons, or other interactive controls. For these images, the alt text should describe the function of the control, not the appearance of the image.

A magnifying glass icon used as a search button should have alt="Search", not alt="magnifying glass icon". A company logo that links to the homepage should have alt="Acme Corporation home page", not alt="Acme logo". The user needs to know what will happen when they activate the control, not what the icon looks like.

Images of Text

Images that contain text should have alt text that reproduces the text shown in the image. A banner image reading "Summer Sale — 30% Off All Items" should have that exact text as its alt text. However, WCAG Success Criterion 1.4.5 (Level AA) generally discourages using images of text when the same visual presentation can be achieved with styled HTML text.

Complex Images

Charts, graphs, diagrams, infographics, and maps convey complex information that cannot be adequately described in a brief alt text. For these images, provide a concise alt text that identifies what the image is (for example, alt="Bar chart showing quarterly revenue growth from 2023 to 2025") and then provide a detailed description elsewhere — either in the surrounding page content, in a longdesc link, or in an expandable details section.

Grouped Images

When multiple images together convey a single piece of information — such as a star rating displayed as five star images — apply meaningful alt text to one image (for example, alt="Rating: 4 out of 5 stars") and use empty alt text on the remaining images.

When to Use Empty Alt Text

Empty alt text (alt="") is not the same as missing alt text (no alt attribute at all). Empty alt text is a deliberate signal to screen readers that the image is decorative and should be skipped. Missing alt text is an accessibility failure.

Purely Decorative Images

Images that exist solely for visual decoration — background patterns, decorative borders, aesthetic flourishes — should have empty alt text. These images do not convey information, and announcing them to screen reader users adds noise without value.

Redundant Images

If an image appears next to text that already conveys the same information, the image is redundant and should have empty alt text. A common example is a phone icon next to the text "Call us at 555-0123." The icon adds visual appeal but no new information; describing it as "phone icon" would be redundant.

CSS Background Images

Images applied through CSS background-image are not exposed to assistive technology by default and do not have an alt attribute. If a CSS background image is purely decorative, no action is needed. However, if a CSS background image conveys meaningful information, you need to provide that information through other means — visible text, an ARIA label, or a visually hidden text element.

Spacer and Layout Images

Legacy websites sometimes use transparent spacer images for layout purposes. These should always have empty alt text. Better yet, replace them with CSS-based layouts.

How to Write Good Alt Text

Writing effective alt text is more art than science, but several principles consistently produce good results.

Be Concise and Specific

Aim for one to two sentences that capture the essential information. Avoid vague descriptions. Instead of alt="people", write alt="Three medical professionals reviewing a patient chart in a hospital corridor". Specificity helps users form an accurate mental picture.

Convey the Purpose, Not Just the Appearance

Consider why the image is on the page, not just what it looks like. A photograph of a smiling customer holding a product on a testimonial page serves a different purpose than the same photograph on a product listing page. On the testimonial page, relevant alt text might be alt="Sarah M., a satisfied customer, holding the XR-7 wireless headphones". On the product page, alt="XR-7 wireless headphones in midnight blue" focuses on the product itself.

Do Not Repeat Surrounding Text

If the caption or surrounding paragraph already describes the image, the alt text should add information rather than repeat it. Redundant alt text wastes screen reader users' time and patience.

Skip "Image of" and "Photo of"

Screen readers already announce the element as an image. Starting alt text with "image of" creates a redundant announcement: "Image, image of a sunset." Simply describe the content directly. The exception is when the medium is meaningful — "Oil painting of a harbor at dusk" is appropriate in an art gallery context where the medium matters.

Consider Context

The same image may require different alt text depending on where it appears. A photo of the Eiffel Tower on a travel blog might need alt="Eiffel Tower illuminated at night, viewed from the Trocadéro". The same photo on an architecture website might need alt="Wrought iron lattice structure of the Eiffel Tower, showing the distinctive arched base design by Gustave Eiffel". Context determines what information is relevant.

Alt Text for E-Commerce

Product images on e-commerce sites are a frequent source of accessibility complaints and ADA lawsuits. Effective product image alt text should include the product name, key visual attributes such as color and size, distinguishing features visible in the image, and the viewing angle or context if the product is shown in use.

For example: alt="Nike Air Max 270 running shoe in black and white, side profile view". For a product shown in context: alt="Woman wearing the Riverton waterproof hiking jacket in forest green, walking on a mountain trail in rain".

Multiple product images should each describe what is unique about that view. The first might describe the product overall; subsequent images might focus on close-up details, different angles, or the product in use.

Alt Text for Social Media and Content Images

Blog posts, articles, and social media content frequently include images that support or enhance the written content. For these images, ask what the image adds to the story. If a blog post about remote work includes a photo of someone working from a coffee shop, appropriate alt text might be alt="Young professional working on a laptop at a small table in a busy coffee shop". This reinforces the article's theme and gives screen reader users the same contextual experience that sighted readers receive.

Common Alt Text Mistakes

Understanding common mistakes helps you avoid them in your own content.

Mistake: Missing Alt Attribute Entirely

The most common and most serious error is omitting the alt attribute entirely. This causes screen readers to announce the file name or URL, which is almost never useful. Every <img> element must have an alt attribute — either descriptive or empty.

Mistake: Using File Names as Alt Text

Alt text like "DSC_0042.jpg" or "hero-banner-v3-final.png" provides no useful information. This often happens when content management systems auto-populate the alt field with the file name and authors do not update it.

Mistake: Keyword Stuffing

Writing alt text purely for SEO — "best affordable comfortable ergonomic office chair buy now free shipping" — violates both accessibility principles and modern SEO best practices. Search engines penalize keyword-stuffed alt text, and screen reader users find it confusing and frustrating.

Mistake: Overly Long Descriptions

Alt text that runs for multiple paragraphs creates a poor screen reader experience. Users cannot pause, skip, or scan alt text the way they can scan visible text. Keep alt text concise and use alternative methods for complex descriptions.

Mistake: Describing Irrelevant Details

Alt text should describe what matters, not everything visible. A photo of a CEO at a conference does not need to describe the color of the carpet, the brand of the microphone, or the pattern on the curtains. Focus on the meaningful content: the person, the setting, and the action.

Mistake: Using "Image of" or "Photo of" Unnecessarily

As discussed above, this creates redundant screen reader announcements. Drop the prefix and describe the content directly.

Alt Text Decision Tree

When you encounter an image and need to determine the right approach, follow this decision process.

First, ask whether the image conveys any information that is not available in the surrounding text. If no, use empty alt text (alt=""). If yes, proceed.

Next, ask whether the image is used as a link or button. If yes, the alt text should describe the destination or action, not the image appearance. If no, proceed.

Then, ask whether the image contains text. If yes, include that text in the alt attribute. If no, proceed.

Finally, ask whether the image is simple or complex. If simple, write a concise alt text of one to two sentences. If complex — a chart, diagram, or infographic — write a brief identifying alt text and provide a detailed description elsewhere on the page.

Testing Your Alt Text

The best way to evaluate your alt text is to test it with real assistive technology. Turn on VoiceOver on a Mac or iPhone, activate NVDA or Narrator on Windows, or enable TalkBack on Android. Navigate to your images and listen to how they are announced. Ask yourself whether a user who cannot see the image would understand its content and purpose from the alt text alone.

You can also use browser developer tools to inspect alt attributes directly or run automated scanning tools like axe or WAVE to catch missing or empty alt text across your site. Remember that automated tools can detect the presence or absence of alt text but cannot evaluate its quality — that requires human judgment.

Making Alt Text Part of Your Workflow

The most effective strategy for maintaining good alt text is to integrate it into your content creation workflow from the start. Add alt text fields to your content management system's image upload process. Include alt text requirements in your content style guide. Train content creators on alt text best practices. Review alt text during content editing and quality assurance. Audit existing images periodically and update alt text as needed.

When alt text is treated as a required part of every image — just like a caption or credit — it becomes second nature rather than an afterthought.