What makes good alt texts

How it works

Every image gets a text in its alt attribute that replaces it:

<img src="team.jpg" alt="Our team outside the office in Leeds">

A screen reader reads this text instead of the image. Without the attribute it reads the file name, such as “IMG 4711 dot JPG”, or skips the image. The text is also shown when an image fails to load. Search engines use it to understand what an image shows; Google uses it for image search and, on linked images, like link text.

WCAG 2.2 requires in success criterion 1.1.1 a text alternative for all non-text content that serves the same purpose.

What matters

• Describe the purpose, not the pixels. What is the image meant to convey here? A product photo needs product and variant, a chart its key message.
• Decorative images get an empty alt. Images that only decorate get alt="", and the screen reader skips them. Leaving alt out altogether is not the same.
• No filler words. “Image”, “photo”, “graphic” or a file name say nothing. Starting with “Picture of …” is redundant too; the screen reader says that itself.
• Images as links or buttons describe the target or the action: a logo that leads to the home page reads “Example Ltd home page”, not “logo”.
• Text in the image goes into the alt. A banner saying “20 % off everything” needs exactly that text.
• Graphics and SVG count too. An <svg role="img"> gets a <title> or aria-label, an <input type="image"> an alt, and so do the regions of an image map (area).
• No keyword stuffing. Search engines want the same as people: one accurate sentence, not a list of search terms.

How to set it up

You maintain alt texts in your CMS: in WordPress in the media library for each image, or in the Image block under “Alternative text”. A text in the media library is the default for new placements, but the same text doesn't fit everywhere. Images from the theme, such as logo and icons, are changed by whoever maintains the theme. Decorative icons next to text get alt="" there, or aria-hidden="true" for SVG.