Alt text

Write alt text to describe what the image shows to someone who cannot see it. Screen readers read it. If the image fails to load, the browser shows it. When an image is a link, the alt text acts as the anchor text. Google Images and the crawler also read it, along with the surrounding text and the file name.

Google treats alt text as one hint about the image. It does not replace the page copy. The words around the image help search understand context. The file name helps too: pricing-comparison.png is clearer than IMG_1234.png. Do not stuff keywords. It reads as spam and does not help.

If an image links to a page, the alt text is the anchor text of that link. For a logo that links to the homepage, use alt="YourProduct home" rather than alt="" if it is the only label for the link.

1. 1

   Describe what is essential

   Say what matters in context. On /pricing, alt="Plan tiers table highlighting Pro" beats "table".

2. 2

   Be specific, be brief

   Aim for a short phrase or a simple sentence. Avoid “image of” or “photo of” unless it changes meaning.

3. 3

   Match the page task

   On /guides/getting-started, alt="Connecting Stripe in Settings" helps. On /blog/launch, alt="Team at laptops" is enough if the image is illustrative.

4. 4

   Name linked purpose

   If the image is a link, describe the destination or action: alt="Download PDF setup guide".

5. 5

   Use helpful file names

   Rename product-shot-blue-mug.jpg instead of IMG_4550.jpg. Keep hyphens, keep it short.

A fixed page reads cleanly with a screen reader and the images help the story. Example on /features: alt="Dashboard showing weekly active users chart" next to copy about product usage.

If an image adds no information, give it an empty alt: alt="". This tells screen readers to skip it. Common cases: background flourishes, spacer graphics, generic dividers.

Do not use empty alt on informative graphics. Charts, diagrams, UI screenshots and product photos need alt that conveys their point on the page.

• Run a Lighthouse accessibility audit. It flags images without alt.
• Spot check key pages. Right click, Inspect, select the image, and read the alt attribute.
• Preview with a screen reader workflow you know, or use the browser’s reader features to sanity check flow.
• List images in your codebase or CMS and add missing alt before you ship new pages.