DEV Community

Rahil Khan
Rahil Khan

Posted on

Image alt text that actually helps: 4 rules for small-business sites (plus a 1-line audit)

Most small-business sites either skip image alt text or stuff it with keywords ("best plumber city plumber cheap plumber"). Both hurt. Good alt text helps people using screen readers, shows up when an image fails to load, and gives Google real context for image search.

The 4 rules we use

  1. Describe what matters, in one short sentence. Imagine reading the page aloud to someone over the phone.
<!-- Bad -->
<img src="img_0423.jpg" alt="image">
<img src="team.jpg" alt="plumber plumbing best plumber services">

<!-- Good -->
<img src="team.jpg" alt="Three technicians in blue uniforms standing next to a service van">
Enter fullscreen mode Exit fullscreen mode
  1. Decorative images get an empty alt. Background swirls, dividers and icons next to text should be skipped by screen readers:
<img src="divider.svg" alt="">
Enter fullscreen mode Exit fullscreen mode
  1. Linked images describe the destination, not the picture.
<a href="/menu"><img src="menu-thumb.jpg" alt="View our full lunch menu"></a>
Enter fullscreen mode Exit fullscreen mode
  1. Text inside an image goes in the alt. If your banner says "20% off this week", the alt should say it too.

Quick audit: open DevTools and run this in the console to list images missing alt:

document.querySelectorAll('img:not([alt])').forEach(img => console.log(img.src));
Enter fullscreen mode Exit fullscreen mode

Ten minutes of fixes usually clears most accessibility warnings in Lighthouse.

We bake this into every build at NEXCOD. Studio: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Top comments (0)