Alt Text Best Practices: A Guide to Accessibility and SEO

Alt text (alternative text) is the invisible description attached to an image on a web page. You never see it under normal browsing — but screen-reader users hear it, search engines read it, and broken images show it. It's a small piece of HTML that carries real weight for both accessibility and SEO. This guide explains what makes alt text good, with examples you can copy.

What alt text is and why it exists

In HTML, an image looks like this:

<img src="sunset-over-ocean.jpg" alt="Orange sunset over the Pacific, viewed from a beach">

The alt attribute is the alternative to the image itself. It exists so that people who can't see the image — visually impaired users with screen readers, search engine crawlers, or anyone on a slow connection where the image fails — still get the information the image was supposed to convey.

That's the core test for good alt text: would the page make sense to someone who can't see the image?

Why it matters for accessibility

For a user with a screen reader, an image without alt text is often read as its file name ("IMG_2042 dot jpg") or, worse, as nothing at all. Imagine navigating a shopping site where every product image is a blank announcement: you literally can't shop. Descriptive alt text turns that experience into "Stainless steel 12-inch frying pan with glass lid."

Accessibility is also the law in many places. The Web Content Accessibility Guidelines (WCAG) require meaningful images to have a text alternative, and equal-access regulations in the EU and parts of the US make it a legal requirement for many businesses. Writing good alt text isn't an extra — it's the baseline.

Why it matters for SEO

Search engines can't see images. They read the alt text as the image's description, which connects the image to the page topic and helps it rank in image search. Well-written alt text also reinforces the page's keywords naturally — not stuffed, just descriptive.

The pragmatic view: alt text is one of the few SEO elements that's also a genuine accessibility win. There's no conflict between writing for humans and writing for engines here.

Good vs bad alt text

The difference between good and bad alt text is usually length and specificity:

Image	Poor alt text	Why it's poor	Good alt text
Product photo	image1	Says nothing	Blue ceramic espresso cup with a white interior
Chart of sales	chart	No data conveyed	Bar chart showing Q2 sales up 18% over Q1
Team photo	team	Who/what/where?	The SlimImg engineering team at the 2026 conference
Logo (meaningful)	logo	Generic	SlimImg logo, a rounded image icon in blue

The pattern: be specific, include what matters (object, context, action, or data), and keep it to a sentence or two. If the image contains text (an infographic, a screenshot), include the key text.

When to use empty alt text

Here's the part most people get wrong: not every image needs a description. Decorative images — background textures, bullet icons, purely visual flourishes — should have empty alt text: alt="".

Empty alt tells the screen reader "skip this image entirely," which is far better than forcing it to read a description of something irrelevant. A decorative divider described as "orange line" adds noise to every page the user visits. Reserve alt text for images that actually carry information.

A formula for writing it

When you're stuck, use this fill-in-the-blank:

A [type of image] of [the main subject], showing [the most important detail], in [context/location].

Examples:

• "A photograph of a golden retriever puppy, showing the dog mid-run in a park"
• "A screenshot of the pricing page, showing the $9 monthly plan highlighted"
• "A product shot of the stainless steel travel mug, with the lid off"

For screenshots and infographics, the most important rule is: the text in the image must appear in the alt text — otherwise screen-reader users miss the entire content.

Common mistakes to avoid

• Keyword stuffing — "running shoes, cheap running shoes, buy running shoes" reads as spam to humans and engines alike
• Repeating the caption — if the visible caption already says it, don't duplicate it in alt
• "Image of...", "photo of..." — the word "image" is redundant; screen readers already announce it's an image
• Writing a paragraph — a sentence or two is plenty; save essays for the surrounding text
• Empty alt on meaningful images — a product photo with alt="" leaves the page blank for screen-reader users
• Ignoring text in screenshots — the worst case: an infographic whose content is only visible in the picture

The full checklist

• Every meaningful image has a unique, specific alt description
• Decorative images use alt=""
• Text inside screenshots and infographics appears in the alt text
• No keyword stuffing, no "image of" filler
• Alt text makes sense out of context (someone landing mid-page should follow it)
• Logos and icons that link somewhere describe their destination or function

Test your alt text by reading it aloud

The fastest way to catch bad alt text: read it aloud. A screen reader effectively narrates the page in order, so if a sequence of alt texts sounds like nonsense or repeats "image of, image of, image of," you've found the problem. Reading descriptions aloud — or pasting them into a text-only view of the page — surfaces the exact gaps your users experience.

Frequently asked questions

How long should alt text be?

One or two sentences. The goal is a useful description, not a paragraph. If the full context belongs on the page, put it in the visible text instead.

Should I put keywords in alt text?

Use the same keywords you'd naturally use to describe the image. Don't stuff them in — descriptive language for a real audience already contains the relevant terms.

What if my image is on a page for a short time?

Alt text still matters. Every image you control should be described, whether it lives for a day or a decade.

Do I need alt text on images uploaded to social media?

You can't add alt text to every social image, but the platforms that support it (Instagram, X) let you write image descriptions — and it's worth doing for the same accessibility reasons.

How does alt text interact with image SEO?

Alt text helps search engines index the image and connect it to the page topic. Combined with descriptive file names and a fast, optimized image (see the SEO optimization guide), it's a meaningful but modest signal — good content still ranks first.

Where does a color picker fit in?

When you're building accessible UI, color is part of the story: contrast ratios determine whether text is readable. The Color Picker extracts exact colors from any image, which is handy for auditing whether your buttons and text actually meet contrast requirements.

The bottom line

Alt text is a sentence that makes your site usable by more people and understood by search engines. Describe meaningfully, empty out decorative images, and keep it specific — the formula above plus the checklist covers 95% of cases.