Alt text is the short written stand-in for an image, set in the alt attribute of an img tag. Screen readers read it aloud and browsers show it when the picture fails to load. Good alt text says what the image means in its place on the page; decorative images get an empty alt.
| Image | Weak alt | Better alt |
|---|---|---|
| Logo linking to home | logo | Smith Roofing home |
| Product photo | IMG_4021.jpg | Brown leather tote bag with brass buckle |
| Search icon button | magnifying glass | Search |
| Divider swirl | decorative swirl | (empty: alt="") |
| Photo of the team | people | Our four roofers outside the workshop van |
| Sales chart | chart | Sales by month, details in the table below |
Updated
The right words depend on why the image is there, not on what it looks like. A magnifying glass inside a button means Search; the same shape as a page decoration means nothing at all. Try the practice questions, then copy the patterns for your own shop or site.
Your logo sits in the header and links to the home page. Your business name is not written anywhere else in the header.
A thin wavy line separates two sections. It adds no information.
The main photo on a product page for a mug that comes in three colours. This is the sage green one.
A button with only a cart icon opens the shopping cart.
A banner image with the words Free delivery this weekend. The same words are not on the page as text.
0 of 5 answered correctly.
Start again
| Where the image is | Example alt text | Why |
|---|---|---|
| Hero photo of a cafe interior | Sunny cafe counter with fresh pastries on display | Sets the scene in a few words |
| Headshot on an About page | Dr. Amira Khan, lead dentist | Name and role, not hair colour |
| Social icon linking to Instagram | Harbour Bakery on Instagram | Describes the link target |
| Map screenshot with your address next to it | (empty: alt="") | The address is already text nearby |
| Before and after photo of a repaired roof | Roof before repair, with missing tiles at the ridge | Says what changes between the photos |
| Certificate badge | Certified by the regional trade council | Says what the badge certifies |
A linked logo, a product photo and a decorative image. Note the decorative one still has the alt attribute, just empty.
<a href="/">
<img src="/logo.svg" alt="Harbour Bakery home" width="160" height="40">
</a>
<img src="/mug-sage.jpg" alt="Sage green stoneware mug with a curved handle">
<img src="/wave.svg" alt="">The alt names the chart and points to the details, which sit in a caption that every visitor can read.
<figure>
<img src="/sales.png" alt="Monthly sales chart, described below">
<figcaption>Sales rose from 120 orders in March to 210 in June.</figcaption>
</figure>First, does the image contain text? If that text also appears nearby as real text, use an empty alt; if not, put the text in the alt. Next, is it inside a link or button? Then describe where the link goes or what the button does.
Does it add meaning? Give simple photos a brief description, and for graphs put the data elsewhere on the page. Is it only decoration? Use an empty alt.
Shoppers who use screen readers rely on product image alt text the way others rely on zooming in. When a product has several photos, make each alt different: front view, back pocket detail, worn by a model who is 170 cm tall.
Alt is short for alternative. Alt text is the alternative text for an image: the words a screen reader speaks, and what the browser shows in place of a picture that cannot load. It lives in the alt attribute of the img element.
Every img should have an alt attribute, but not every one needs words. MDN explains that an empty alt marks an image as not a key part of the content. Leaving alt off entirely is worse: some screen readers then read out the file name.
Short enough to say in one breath for most images. The W3C tree asks for a brief description of simple photos. Charts and diagrams are the exception: give a short label in alt and put the full information in text on the page.
Yes. Google's image guide says it uses alt text along with computer vision and page content to understand images. Its own example prefers Dalmatian puppy playing fetch over a bare puppy, and warns against keyword lists.
If the logo links to your home page, the alt should describe where the link goes, such as your business name plus home. If it is just shown and your name already appears as text beside it, an empty alt is fine.
Related: Image alt text generator, On-page SEO checklist, Social media image sizes, Ecommerce SEO guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.