How to write alt text for images: product, team, chart, logo and decorative examples
Alt text is the words a screen reader speaks instead of an image, so it should carry whatever the image adds to the page. That depends on the kind of image: a product photo needs the details a shopper would look for, a logo needs the name, a linked icon needs the action, a chart needs its conclusion, and decoration needs nothing at all.
Identify the image type first
Before writing, ask what the image is for on this page. Most images on a small business site fall into one of six types, and each has its own pattern. The examples below show the words that go inside alt="…".
Products
Shoppers who can't see the photo still need what it shows: colour, material, the angle and any detail the description doesn't mention. Give each photo of the same product different text, because each one shows something different.
- Front:
Olive waxed-cotton tote bag with brown leather handles - Detail:
Close-up of the tote's brass rivets and double stitching - Scale:
The tote on a shoulder, reaching just above the hip
People and places
Name people when the page is about them, and say what they're doing if it matters. Don't guess at things you can't see, such as feelings, and only mention appearance where it's relevant to the page.
- Team page:
Priya Shah, head physiotherapist, demonstrating a shoulder stretch - Venue:
The studio's main room, with wooden floor and floor-to-ceiling windows - Atmosphere photo on a home page:
Customers at the counter on a busy Saturday morning
Charts and diagrams
A chart's alt text should give the point, not every data point. The W3C's complex images tutorial recommends a short alt that identifies the image, plus a longer description of the essential information elsewhere: a caption, the paragraph next to it, or a linked table. Showing that description to everyone helps sighted readers too.
- Alt:
Bar chart of monthly bookings for 2026; details in the table below - Nearby text: the actual figures, or the trend in one sentence, such as "Bookings doubled between March and June."
Logos, icons and images of text
When an image is a link or a button, its alt text should say what it does. The W3C's functional images tutorial gives the examples of a linked logo described by where it goes and a printer icon described as "Print this page". An unlinked logo just needs the organisation's name; the images of text tutorial notes there's no need to add that it's a logo.
- Linked logo in the header
Harbour Bags home- Logo in a list of clients
Leeds City Council- Magnifying-glass search button
Search- Image of a sign or a price list
- The exact words in the image, or, better, real text instead of the image
Decorative images
Background textures, flourishes, dividers and photos that only repeat what the text beside them already says should have an empty alt, alt="", so screen readers skip them. Leaving the attribute out entirely is different and worse: some screen readers then read the file name aloud.
Mistakes screen-reader users notice
- "Image of" or "photo of" at the start. Screen readers already announce it's an image.
- File names: hearing "IMG underscore 4471 dot jpeg" is the clearest sign nobody checked.
- The same alt on every product photo, which makes a gallery sound like one image repeated.
- Keyword lists: alt text stuffed with search terms is tiring to hear and doesn't help search either.
- Paragraph-length alt on a simple photo. Aim for a sentence; put longer explanations in visible text.
Check it yourself
- Turn on a screen reader: VoiceOver on a Mac or iPhone, TalkBack on Android, or NVDA on Windows.
- Move through the page image by image and listen. Does each one add something, and does anything that should be skipped get read?
- Look at the page with images turned off in your browser's settings, or on a slow connection, where alt text shows in place of images.
- Fix the worst first: linked images and product photos, then people and places.
Alt text on an Anticode site
Anticode's design gate blocks publishing pages whose images lack alt text, and Sentinel's security checks include images too. Photos from the curated library on design-engine pages come with written alt text. Neither check can know whether the words are right for your page: a photo described as a generic shop interior when it shows your actual counter still passes. Read the alt text of every image after a build, especially your own photos, and change it to match its job on that page. Using your own photos covers naming files so the first draft is closer, and accessibility problems in AI-generated websites covers the other common failures.
Questions people ask
What is alt text?
A text alternative written in an image's alt attribute. Screen readers read it aloud, browsers show it if the image fails, and search engines use it to understand the image.
How long should alt text be?
Usually one short sentence. If an image needs more, describe it in visible text near the image and keep the alt brief.
Do decorative images need alt text?
They need an empty alt attribute, alt="", so assistive technology skips them. Don't leave the attribute out.
Sources
- W3C WAI: Complex images tutorial, checked
- W3C WAI: Functional images tutorial, checked
- W3C WAI: Images of text tutorial, checked