Dev.to WebDev ๐Ÿ›  Dev ๐Ÿ‘ 0 ๐Ÿ“– 1 min read

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

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">
  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="">
  1. Linked images describe the destination, not the picture.
<a href="/menu"><img src="menu-thumb.jpg" alt="View our full lunch menu"></a>
  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));

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

๐Ÿ“ฐ Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes โ€” full credit and traffic to the original publisher.