What alt text looks like in HTML

Alt text sits inside the alt attribute of an image tag:

<img src="team.jpg" alt="Three colleagues reviewing a contract at a meeting table">

Visitors who can see the image never notice it. For everyone else, it is the image.

Why alt text matters

  • Accessibility. People using screen readers hear the alt text instead of seeing the image. Without it, they may hear nothing, or the file name read out letter by letter. Text alternatives for images are the very first requirement of the Web Content Accessibility Guidelines (WCAG success criterion 1.1.1).
  • Image search. Google uses alt text, together with the page content and the image itself, to understand what an image shows and when to show it in Google Images.
  • Broken images. If an image fails to load, the browser shows the alt text in its place, so the page still makes sense.

How to write good alt text

  • Describe what the image shows in this context. The same photo of your office may need different alt text on your About page and on a job advert.
  • Keep it short, usually one sentence.
  • Don't start with "image of" or "picture of". Screen readers already announce that it is an image.
  • If the image contains text, such as a chart title or a quote, include that text.
  • If the image is a link, describe where the link goes, not what the picture looks like.
  • Don't stuff keywords. Alt text written for search engines rather than people reads badly aloud and helps nobody.

Good and bad examples

Alt textVerdict
alt="IMG_4032.jpg"Meaningless to a person or a search engine.
alt="plumber London plumbers best plumber London"Keyword stuffing. Unhelpful and a spam signal.
alt="Photo"Says nothing about what the photo shows.
alt="Founder Lay Nadji speaking at a client workshop"Clear, specific and useful.

When alt text should be empty

Purely decorative images, such as background patterns or dividers, should have an empty alt attribute: alt="". This tells screen readers to skip the image. Leaving the attribute out entirely is different, and worse: some screen readers then read the file name instead.

How to check your alt text

Right-click an image and choose "Inspect" to see its alt attribute. For a whole site, any crawler such as Screaming Frog will list images with missing alt text. When we build a website, alt text is a required field in the CMS, so it can't be forgotten.

Frequently asked questions

Is alt text a ranking factor?

Alt text helps Google understand images and can help them appear in Google Images. It is a small signal for the page itself. Its main job is accessibility, and that is reason enough to write it well.

How long should alt text be?

There is no fixed limit, but one clear sentence is usually enough. If an image needs a long explanation, such as a detailed chart, put that explanation in the page text.

What is the difference between alt text and an image caption?

A caption is visible to everyone, under the image. Alt text replaces the image for people who can't see it. An image can have both, and they shouldn't simply repeat each other.

Lay Nadji is the founder of ShiftCode, with over 25 years of experience in IT and 15 years in the web industry, working with small businesses, luxury brands and professional services on SEO, content and websites.