Skip to content
Alt Text Best Practices: How to Write Accessible Image Descriptions

Alt Text Best Practices: How to Write Accessible Image Descriptions

4 min read

What Is Alt Text and Why Does It Matter?

Alt text (alternative text) is a short written description added to an image’s HTML alt attribute. When a screen reader encounters an image, it reads the alt text aloud so that people who are blind or have low vision understand what the image conveys. Alt text also appears when an image fails to load and helps search engines understand your visual content.

Writing good alt text is one of the simplest accessibility improvements you can make, yet it is one of the most frequently done poorly. Studies consistently show that missing or unhelpful alt text is among the top accessibility issues on the web. WCAG Success Criterion 1.1.1 (Non-text Content) requires that all meaningful images have a text alternative, making alt text best practices essential knowledge for every developer, designer, and content creator.

The Golden Rules of Alt Text

Do: Describe the Content and Function

The most important rule is to convey the same information or purpose the image provides visually. Ask yourself: if this image disappeared, what would the reader miss? That answer is your alt text.

Do: Keep It Concise

Aim for one to two sentences at most. Screen reader users listen to alt text linearly, so a 200-word description disrupts the reading flow. Most alt text should be under 125 characters, though complex images can be longer when necessary.

Do: Skip “Image of” or “Picture of”

Screen readers already announce that the element is an image. Starting with “image of” or “photo of” is redundant. Jump straight into the description.

Don’t: Leave Alt Text Empty on Meaningful Images

An empty alt="" tells assistive technology to skip the image entirely. This is correct for decorative images but harmful when the image carries meaning.

Don’t: Stuff Keywords

Alt text exists for accessibility, not SEO manipulation. Write for humans first. Search engines are sophisticated enough to penalize keyword-stuffed alt attributes.

Don’t: Use File Names as Alt Text

“IMG_4392.jpg” or “hero-banner-final-v3.png” tells the user nothing. Always write a human-readable description.

Alt Text Examples by Image Type

Informative Photographs

These are photos that convey content relevant to the surrounding text.

  • Poor: alt="team"
  • Better: alt="Five team members collaborating around a whiteboard during a product design sprint"

Describe who or what is in the image, what they are doing, and any relevant context.

Product Images

For e-commerce, alt text should include the product name, key visual details, and distinguishing features.

  • Poor: alt="shoe"
  • Better: alt="Nike Air Max 90 in white and university red, side profile view"

Charts and Graphs

Data visualizations need alt text that summarizes the key takeaway, not every data point. Provide a detailed data table elsewhere on the page for full access.

  • Poor: alt="chart"
  • Better: alt="Bar chart showing website traffic increased 45% from January to June 2026"

Icons with Meaning

Icons used as interactive elements (like a magnifying glass for search) need alt text that describes their function, not their appearance.

  • Poor: alt="magnifying glass"
  • Better: alt="Search"

Decorative Images

Images that are purely visual decoration and add no informational value should have an empty alt attribute: alt="". This tells screen readers to skip the image entirely. Examples include background textures, ornamental dividers, and stock photos used solely for visual appeal.

Logos

For logos, the alt text should typically be the company or brand name, optionally followed by “logo” if the context benefits from it.

  • Example: alt="wcagkit" or alt="wcagkit logo"

Screenshots

Screenshots of interfaces or code should describe what the screenshot shows and the key information visible in it.

  • Poor: alt="screenshot"
  • Better: alt="Browser DevTools showing three color contrast warnings in the Accessibility panel"

Complex Images: When Alt Text Is Not Enough

Some images, such as detailed infographics, complex diagrams, or dense data visualizations, cannot be adequately described in a brief alt attribute. For these, use a combination approach:

  1. Short alt text summarizing the image at a high level.
  2. A longer description provided on the page itself, in a <figcaption>, or via an aria-describedby reference to a hidden text block.
  3. A data table for charts and graphs so users can access the underlying numbers.

WCAG refers to this as providing both a short and a long text alternative.

Alt Text for Content Management Systems

Most CMS platforms like WordPress, Shopify, and Squarespace have dedicated alt text fields in their media upload dialogs. Make adding alt text part of your content workflow:

  • WordPress: Fill in the “Alternative Text” field every time you insert an image.
  • Markdown: Use the syntax ![Alt text here](image-url.jpg).
  • HTML: Always include the alt attribute: <img src="photo.jpg" alt="Description here">.

Create an editorial checklist that requires alt text review before any page is published. This prevents accessibility debt from accumulating.

Testing Your Alt Text

Writing alt text is only half the job. You also need to verify it works in practice:

  1. Use a screen reader — Turn on VoiceOver (macOS), NVDA (Windows), or TalkBack (Android) and listen to how your images are announced. Does the description make sense without seeing the image?
  2. Run an automated checker — Use the wcagkit alt text checker to scan your pages for missing, empty, or suspicious alt attributes. Automated tools catch the most common errors quickly.
  3. Peer review — Have someone who did not create the content listen to the alt text and confirm it conveys the right information.

Common Mistakes to Avoid

  • Using the same alt text for every image — Each image is unique and deserves a unique description.
  • Describing irrelevant details — Focus on what matters in context. A headshot on a team page needs the person’s name, not the color of the wall behind them.
  • Forgetting linked images — When an image is wrapped in a link, the alt text should describe the link destination or action, not just the image appearance.
  • Ignoring CSS background images — Images inserted via CSS have no alt attribute. If they convey meaning, use role="img" and aria-label on the element, or restructure to use an <img> tag.

Conclusion

Alt text best practices come down to empathy: describe what matters, be concise, and consider how the information will be received by someone who cannot see the image. It takes only seconds per image but makes your site usable for millions of people who rely on assistive technology.

Start by auditing your existing images with the wcagkit alt text checker to find gaps, then work through them systematically. Pair that with the contrast checker and heading analyzer for a well-rounded accessibility review.