Add descriptive alt text to your images

Alt text is a short text description attached to an image via the `alt` attribute. It is what screen readers announce to blind users, what shows if the image fails to load, and what Google uses to figure out what your photos depict for Image Search.

Missing alt text leaves Google guessing about your photos, which means your gallery of your fleet never shows up in Image Search, and your accessibility score drops. It also exposes you to ADA-style accessibility lawsuits, which have become routine for small-business sites in the US.

1. 1

   Find images missing alt text

   In your browser console, run the snippet below to list every <img> that lacks an alt attribute.

   document.querySelectorAll('img:not([alt])').forEach((el) => {
     console.log(el.src);
   });

2. 2

   Write a description in <= 125 characters

   Describe what is in the image, plainly. Mention the subject and the relevant context. Do not stuff keywords, Google catches it and screen-reader users hate it. Skip phrases like "image of", screen readers already announce it as an image.

   <!-- BAD: keyword stuffing -->
   <img src="suburban.jpg" alt="car service austin black car cheap" />
   
   <!-- GOOD: describes the subject -->
   <img src="suburban.jpg" alt="Black Chevrolet Suburban at Austin-Bergstrom airport pickup" />

3. 3

   Use empty alt="" for decorative images

   Backgrounds, dividers, and purely decorative graphics should have `alt=""` (empty string, not missing). This tells screen readers to skip them.

   <img src="divider-flourish.svg" alt="" />

4. 4

   For logos, use the brand name

   Logo alt text should be the company name only. Do not include "logo", screen readers already say "image."

   <img src="/logo.svg" alt="Apex Car Service" />

5. 5

   Next.js: alt is required on <Image>

   The next/image component requires the alt prop at the type level. Use `alt=""` for decorative images and a real description otherwise.

   import Image from 'next/image';
   
   <Image
     src="/photos/fleet-suburban.jpg"
     width={800}
     height={600}
     alt="Black Chevrolet Suburban at Austin-Bergstrom airport pickup"
   />

Re-run the DevTools console snippet, it should log zero results. Lighthouse > Accessibility audit > "Image elements have [alt] attributes" should pass. Re-run the Drive Top-Line audit; the image-alt coverage should rise above 80%.

• WebAIM: Alternative text
• Google: Image SEO best practices