How to write alt text: 20 examples for small-business sites

Alt text is the short description a screen reader reads in place of an image. It also shows if the image fails to load. Good alt text tells a visitor what they would miss if they couldn't see the picture.

Three questions to ask

1. Does the image carry information or a function (a link or button)? Then it needs alt text.
2. Is it purely decorative (a texture, a divider, a stock photo that repeats the heading)? Then use empty alt: alt="".
3. Is the same information already in nearby text? Then keep the alt short or empty.

Examples

• Logo linking home: bad “logo.png”; good “Riverside Bakery – home”.
• Product photo: bad “shirt”; good “Olive linen shirt, short sleeves, front view”.
• Team photo: good “Dr Ana Ruiz smiling in the clinic reception”.
• Map screenshot: good “Map showing our shop on Elm Street next to the library” plus a text address on the page.
• Chart: good “Bookings rose from 40 in January to 95 in June”, with the full data in a table.
• Icon button (search): the button needs a name, e.g. aria-label="Search", and the icon itself gets alt="".
• Hero photo behind a headline: usually decorative, so alt="".
• Menu photo of a dish: “Margherita pizza with fresh basil on a wooden board”.

Common mistakes

• Starting with “image of” (screen readers already say “image”).
• Keyword stuffing for SEO.
• Pasting the file name.
• Writing a paragraph. Aim for about one sentence.

Related guides

• Colour contrast for websites: ratios, tools and quick fixes
• How to make your contact form accessible
• How to test your website with only a keyboard (5-minute check)
• Accessibility overlay widgets vs. fixing your site's code

All guides

Check your own site

Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.