What Is the Alt Attribute?

Alt is an attribute of the <img> element in HTML, present since the earliest versions of the spec. Its job is to offer a text alternative to visual content: where the image can't be perceived, the alt text takes its place. Along with the src attribute, it's one of the few attributes accessible markup can't do without.

In modern frameworks and content management systems, the attribute often gets auto-filled from the file name when nobody sets it by hand, which rarely produces a useful description. It's often confused with two other elements that look similar but serve different purposes. The title attribute shows a tooltip on mouse hover, meant for mouse users, not for screen readers, which don't announce it by default. The figcaption element is a visible caption inside a figure, meant for every visitor, not only for someone who can't see the image.

The requirement to provide a text alternative isn't a loose recommendation: it's Success Criterion 1.1.1 ("Non-text Content") of the W3C's WCAG guidelines, the basis for most web accessibility regulations.

The costliest mistake in practice is using title as a stand-in for alt: since most screen readers ignore it, an image with only a title and no alt stays invisible to anyone who depends on that text.

When a screen reader reaches an image, it reads the content of the alt attribute out loud. If the attribute is present but empty (alt=""), the screen reader skips the image without announcing it, the correct behavior for purely decorative elements. If the attribute is missing entirely, which is different from being empty, some screen readers fall back to the file name instead, and announcing "IMG_047382 dot jpg" is worse than saying nothing.

<!-- Informative image: descriptive alt text -->
<img src="/images/glosario-json-ld-diagram.webp" alt="Structure of a JSON-LD block with @context and @type">

<!-- Error: alt attribute omitted entirely -->
<img src="/images/glosario-json-ld-diagram.webp">

<!-- Decorative image: deliberately empty alt text -->
<img src="/images/decorative-divider.webp" alt="">

Google uses the alt text together with its own computer vision algorithms and the page's content to understand what an image is about. That text carries the most weight in Google Images results, not as a general ranking factor for the page. If the image also functions as a link, the alt text acts as anchor text for that link, with the same weight a regular text link would carry.

What goes into it depends on the type of image. For an informative image, the text describes what it contributes to the page's context, not every visual detail. For a functional image, like a search icon inside a button, the text describes the action, not the artwork. For a decorative image, the alt is left empty on purpose, never missing.

The main reason is accessibility: without a proper alt, someone using a screen reader has no other way to find out what an image shows. That's what decides whether the page is usable for them at all. In several sectors, public bodies and larger companies among them, accessible markup is now a legal requirement rather than a nice-to-have.

There's also a ranking reason, more limited than often assumed. Alt text helps Google place an image in the right context and decide whether it surfaces in image search, but stuffing it with keywords has the opposite effect: Google treats that as a spam signal, and the page loses trust rather than gaining visibility.

And there's a trust risk built into the text itself: a badly written alt is noticed by exactly the people who rely on it. Someone who hears a file name read aloud instead of a description knows immediately the page wasn't built with them in mind, and that shapes how they see the brand behind it.

• Describe what the image contributes to that specific page's context, not a list of everything visible in it.
• Leave alt="" empty but present on purely decorative images; never omit the attribute entirely.
• If the image is a link or a button, describe the destination or the action, not the icon's appearance.
• Keep the text concise, roughly 80 to 140 characters, enough to be useful without tiring someone hearing it through a screen reader.
• Don't repeat the same keyword across several different images on the same page.
• Don't duplicate what a visible caption next to the image already says; the two texts serve different purposes.

• Omitting the alt attribute entirely instead of leaving it empty on purpose for decorative images.
• Filling the alt with a list of keywords instead of a sentence that makes sense.
• Starting the text with "image of" or "photo of": the screen reader already announces that it's an image.
• Using the title attribute as a substitute for alt, without knowing most screen readers don't read it.
• Copying the same generic alt across dozens of product images that are actually different from each other.