The Complete Guide to Alt Text for Images

How to write effective alternative text that makes your images accessible to everyone.

What is Alt Text?

Alt text (alternative text) is a written description of an image that appears in place of the image when it cannot be displayed, and is read aloud by screen readers for users who are blind or have low vision. It's one of the most fundamental accessibility features on the web, required by WCAG Success Criterion 1.1.1 (Non-text Content).

When a screen reader encounters an image, it reads the alt text to describe the image to the user. Without alt text, the screen reader might announce nothing, say "image," or read the file name, leaving the user with no understanding of what the image shows or why it's there.

Alt text is specified using the alt attribute on the HTML <img> element:

Why Alt Text Matters

Alt text is essential for several reasons beyond just screen reader users:

• Blind and low vision users rely entirely on alt text to understand images. Without it, they miss potentially crucial information.
• Users with slow connections may see alt text before images load, helping them understand page content.
• Search engines use alt text to understand image content, improving your SEO and image search rankings.
• Broken images display alt text instead, ensuring users still get the information the image was meant to convey.
• Text browsers and reading modes display alt text in place of images.

Missing alt text is consistently the most common accessibility issue found in website audits. It's also one of the easiest issues to fix: every meaningful image simply needs a description.

How to Write Good Alt Text

Be Concise but Descriptive

Good alt text is brief but complete. Aim for one or two sentences that capture the essential information the image conveys. Don't include unnecessary details, but don't be so brief that important context is lost.

Describe the Purpose, Not Just the Appearance

Consider why the image is on the page. What information is it meant to convey? Your alt text should serve the same purpose as the image itself.

Don't Start with "Image of" or "Picture of"

Screen readers already announce that an element is an image. Starting alt text with "image of" or "picture of" is redundant and wastes the user's time.

Include Text That Appears in Images

If an image contains text, that text should be included in the alt text since screen readers cannot read text within images.

Different Types of Images

Informative Images

These images convey information or concepts. They need alt text that describes what the image shows and why it matters in context.

• Photos should describe the subject and any relevant details
• Illustrations should describe what they depict
• Charts and graphs should describe the data or trends shown
• Screenshots should describe what the screenshot shows

Functional Images

Images used as links or buttons should have alt text that describes the action, not the image appearance.

Decorative Images

Images that are purely decorative and add no information should have empty alt text (alt=""). This tells screen readers to skip the image entirely, which is appropriate when the image serves no informational purpose.

Complex Images

Some images contain too much information for brief alt text. Charts, infographics, and diagrams may need extended descriptions. Options include:

• Provide a brief alt text plus a longer description in surrounding text
• Link to a detailed description on another page
• Use a data table to present the same information in text form
• Use aria-describedby to associate an extended description

Common Alt Text Mistakes

Using File Names as Alt Text

File names like "IMG_2847.jpg" or "header-banner-v2-final.png" are meaningless to users. Always write descriptive alt text, even if it takes a few extra seconds.

Being Too Vague

Alt text like "photo," "image," or "graphic" provides no useful information. Every image needs specific, descriptive alt text that conveys what the image shows.

Keyword Stuffing

Don't use alt text as a place to stuff SEO keywords. Write for users first. Alt text like "best cheap running shoes buy running shoes discount athletic shoes" is spammy and unhelpful.

Omitting Important Details

If an image shows data, statistics, or text, that information needs to be in the alt text. A chart showing "sales doubled" is useless without the actual numbers.

Making Decorative Images Verbose

Decorative images should have empty alt text. Describing every decorative swirl or stock photo creates noise that makes the page harder to navigate for screen reader users.

Alt Text Checklist

Use this checklist when adding or reviewing alt text:

1. Does every <img> element have an alt attribute? Even decorative images need alt=""
2. Does the alt text convey the purpose of the image? Not just what it looks like, but why it's there
3. Is the alt text concise? Usually under 125 characters, but as long as needed to convey the information
4. Does it avoid redundancy? Don't repeat "image of" or information already in surrounding text
5. Are functional images described by action? Links and buttons describe where they go or what they do
6. Is text in images included? Any text shown in the image should be in the alt text
7. Are decorative images marked properly? Use alt="" for purely decorative images
8. Do complex images have extended descriptions? Charts and infographics may need additional text

Testing Your Alt Text

To verify your alt text is working correctly:

• Run an automated scan to find images missing alt attributes
• Disable images in your browser and see if alt text conveys the page content
• Use a screen reader to hear how your alt text sounds in context
• Review alt text manually to ensure it's meaningful, not just present

Remember that automated tools can only check if alt text exists; they cannot evaluate whether it's good alt text. Manual review is essential to ensure quality.