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

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.