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
- Does the image carry information or a function (a link or button)? Then it needs alt text.
- Is it purely decorative (a texture, a divider, a stock photo that repeats the heading)? Then use empty alt:
alt="". - 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 getsalt="". - 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
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.