Alt Text Best Practices: The Complete Guide

Good alt text does three jobs at once: it describes images for people who cannot see them, gives search engines the context to rank them, and steps in when images fail to load. This guide collects the practices that consistently deliver all three — with e-commerce examples you can copy the pattern from, and the mistakes that quietly undo the effort.

What alt text actually is

Alt text (the alt attribute of an HTML image) is a text alternative that replaces an image when the image itself cannot be perceived. Screen readers read it aloud to blind and low-vision users. Search engines read it to understand what a picture shows. Browsers display it when an image fails to load. One short sentence, three audiences. That is why the single most important rule comes before any character counts or keywords: describe what the image shows, in plain language, as if reading it aloud to someone who cannot see it. Everything else in this guide is refinement of that rule.

The 125-character rule (and when to break it)

The widely cited guideline — keep alt text under roughly 125 characters — comes from screen reader behavior: some readers historically truncated longer descriptions or read them in an awkward, run-on way. Modern screen readers handle longer text fine, so 125 is a guideline, not a technical limit. It survives because it is good editing discipline: one clear sentence usually captures what an image needs to communicate.

Practical version: aim for one descriptive sentence of up to ~125 characters. If a chart or diagram genuinely needs more detail, write a concise alt text for the big picture and put the full explanation in visible page content right next to the image — that way every reader benefits, not just screen reader users. Length is a smell test: if you cannot describe the image in a sentence, the description probably belongs on the page instead.

Alt text and SEO: keywords without stuffing

Alt text is a ranking factor for Google Images and a supporting signal for regular search: it helps Google connect an image to the queries it should appear for. The practice that works is also the honest one — describe the image naturally, and if your target keyword accurately names what is in the picture, include it once.

• Do: “women’s merino wool hiking socks in forest green, shown folded” — descriptive first, keyword included because it is literally what the photo shows.
• Don’t: “hiking socks, wool socks, best hiking socks 2026, buy socks online” — a keyword list that describes nothing and gets treated as spam.

Context matters too: Google weighs the image together with its surrounding text, the page topic, and the filename. Alt text that matches an on-topic page reinforces both; alt text that contradicts the page helps nothing. And descriptive alt text earns clicks — an image result with a clear, specific description stands out in a grid of vague ones.

The accessibility case: WCAG, ADA, and real users

For screen reader users, alt text is not an optimization — it is the image. WCAG 2.1 (criterion 1.1.1, Non-text Content) requires a text alternative for every meaningful image, and WCAG is the standard referenced in ADA accessibility lawsuits, which hit e-commerce sites especially often. Missing alt text is consistently among the most common failures found in automated accessibility audits of the web's top pages.

Two refinements make your alt text genuinely useful rather than technically present:

• Describe function and purpose, not just appearance. A “Buy now” button styled as an image needs alt text “Buy now,” not “orange rounded rectangle.” A chart’s alt text should convey the takeaway — “sales doubled in Q4” — not “bar chart with blue bars.”
• Use empty alt for decoration. Purely decorative graphics — background patterns, spacer dividers — should have an empty alt="" so screen readers skip them entirely. Empty alt is a deliberate choice for decoration, never an excuse to skip meaningful images.

Common alt text mistakes (and their fixes)

E-commerce examples: bad vs. good

Product pages concentrate every alt text decision — here is the same set of images done both ways. The pattern generalizes to any site.

Main product photo

Detail or variant shot

Lifestyle photo

Size chart or infographic

Notice what the good versions have in common: they are specific, they read naturally aloud, and they would still make sense if the image never loaded.

A quick checklist for every image

• Describes what is actually in the image — specific, not generic
• One clear sentence, roughly 125 characters or fewer
• No “image of…”, no filename dumps, no keyword lists
• Keyword included only when it genuinely names the subject
• Decorative images marked with empty alt, meaningful images never left empty
• Unique per image — no copy-paste across a product line