How to write alt text: a practical guide

Accessibility, without the guesswork

Understand where your website stands and what to improve.

Most websites have at least a handful of images with missing or unhelpful alt text. It’s one of the most common accessibility issues found during a site audit, and it affects both the people using your site and how search engines read it. This guide covers what alt text is, when you need it, and exactly how to write it well, with real examples you can use straight away.

What is alt text?

Alt text (short for alternative text) is a written description attached to an image in HTML. When a screen reader encounters an image, it reads the alt text aloud to the user. When a search engine crawls your page, it reads the alt text to understand what the image shows.

In the HTML, it looks like this:

<img src="team-photo.jpg" alt="Three colleagues reviewing a website on a laptop">

If that attribute is missing or empty on an image that carries meaning, screen reader users get nothing. The image just doesn’t exist for them.

Why alt text matters

Accessibility

Screen reader users, including people with visual impairments and people using assistive technology for other reasons, rely on alt text to understand what images communicate. WCAG 1.1.1 requires all non-decorative images to have a text alternative. Without it, your site is harder to use for a significant portion of your audience, and it falls short of the accessibility standard that WCAG compliance requires.

SEO

Search engines cannot see images. They read the alt text to understand what an image shows and how it relates to the surrounding content. Missing alt text means Google is working with less information about your page, which is a missed ranking signal, especially for image search results.

When to use alt text (and when not to)

Not every image needs a written description. Knowing the difference is just as important as knowing how to write good alt text.

Image type	What to do
Informative image (product photo, diagram, screenshot)	Write descriptive alt text
Functional image (clickable button, linked image)	Describe the function, not the appearance
Decorative image (background texture, purely visual flourish)	Use an empty alt attribute: `alt=""`
Complex image (chart, graph, infographic)	Write a short alt text summary and provide a longer description in the body or as a linked alternative

The empty alt attribute is worth understanding clearly. It is not the same as leaving the attribute out entirely. An image with no alt attribute at all is flagged as an accessibility error. An image with alt="" tells the screen reader to skip it, which is what you want for decorative images.

How to write good alt text, with examples

The core rule: describe what the image shows and why it is on the page. Context matters. A photo of a coffee cup on a coffee shop homepage serves a different purpose than the same photo on a blog post about caffeine and productivity. The alt text should reflect that difference.

Product images

Describe the product clearly enough that someone who cannot see the image knows exactly what they are looking at.

Bad: alt="shoe"
Better: alt="Running shoe"
Good: alt="Women's trail running shoe in navy blue, side view"

Include colour, style, orientation, or any detail a buyer would care about. Think of it as writing for someone shopping without being able to see the screen.

Team and people photos

Avoid filenames or vague placeholders. Describe what is actually happening in the image.

Bad: alt="IMG_4823.jpg"
Better: alt="Team photo"
Good: alt="Three colleagues reviewing a website accessibility report on a laptop in a bright office"

You do not need to name every person in a group photo unless their identity is the point of the image. Focus on what is happening, not just who is there.

Icons and logos

Icons are a common source of confusion. A standalone icon that communicates something, like a search icon or a download button, needs alt text describing what it does.

Icon with function: alt="Search"
Logo: alt="Scanluma logo"
Icon used purely as decoration next to labelled text: alt=""

If an icon sits next to a text label that already describes it, treat it as decorative and use the empty alt attribute. Screen readers would otherwise read the icon description and the label text back to back, which is redundant and confusing.

Charts and data visualisations

A chart communicates a specific insight. The alt text should capture that insight, not attempt to transcribe every data point.

Good: alt="Bar chart showing a 40% increase in accessibility-related complaints between 2020 and 2024"

If the chart contains data the reader needs in full, include a text summary below the image or link to a table. The alt text covers the headline finding; the body text carries the detail. For more on this, making charts and graphs accessible covers the full approach.

Common alt text mistakes to avoid

A few patterns come up repeatedly in accessibility audits.

Starting with “Image of…” or “Picture of…” Screen readers already announce that the element is an image before reading the alt text, so the prefix is redundant.
Leaving the alt attribute blank on informative images. alt="" is correct for decorative images, but applying it to an image that carries meaning hides that content from screen reader users entirely.
Using the filename as alt text. DSC_0042.jpg or banner-final-v3.png tells a screen reader user nothing useful.
Keyword stuffing. Alt text is for people, not search engines. Packing it with keywords makes the screen reader experience worse and can look manipulative.
Writing the same alt text for every image. If every image on a page has alt="product image", that is filler, not alt text.

Missing alt text is one of the most common accessibility issues found across websites of all sizes. Getting the basics right puts you ahead of a lot of sites.

A note on length

There is no strict character limit for alt text, but shorter is usually better. Aim for one clear sentence. If you find yourself writing more than 20 words, check whether the image is doing too much work and whether a caption or body text could carry some of it instead.

Screen readers read alt text without punctuation pauses in the same way they read everything else, so a wall of alt text becomes genuinely uncomfortable to listen to.

How to check your site’s alt text at scale

Going through images one by one is manageable on a small site. On a site with dozens of pages and hundreds of images, it becomes a real task. A free accessibility checker can scan an entire page and flag every image that is missing alt text or has an empty attribute where one is needed.

Scanluma identifies missing alt text as part of a full WCAG scan, showing you the exact location of each image and the HTML to address it. For agencies managing multiple client sites, that kind of automated scan makes accessibility auditing something you can actually deliver consistently. You can read more about ARIA labels and other HTML accessibility attributes to see how alt text fits into the broader picture of accessible markup.

Good alt text is brief, specific, and written for the person who cannot see the image. It does not need to be a perfect literary description. It needs to be useful. A few minutes per image adds up, and the cumulative difference, for your users and for search engines, is real.

Want to know which images on your site are missing alt text right now? Run a free scan and get a full report, with the exact code to address each issue.

Start your free scan at app.scanluma.com/register