Accessibility & alt text

alt = alternative, not a virtue signal

The alt attribute is not a checkbox you tick to make a linter happy. Its full name is alternative text: it is a complete textual replacement for the image. When the image is unavailable — whether because the browser cannot fetch it, the user has images disabled, or an assistive technology is reading the page aloud — the alt text is all the user gets.

The HTML specification makes it mandatory on every <img> that is a content image. Omitting it entirely is not the same as writing an empty string:

• alt="Company logo" — correct for an informative image: describes what the image shows.
• alt="" — correct for a decorative image: explicitly tells assistive technology to skip it (see next section).
• Missing alt attribute — incorrect: the browser may fall back to announcing the file name ("logo-v3-final-2-FINAL.png"), which is useless and disruptive.

Decorative vs informative

Not all images carry information. A faint watermark behind a pull-quote, a decorative divider illustration, a background texture — these add visual atmosphere but contain no content a screen reader should announce.

The rule is simple: if removing the image would cause a user to lose information they need, it is informative — write descriptive alt text. If removing it would not change the content of the page, it is decorative — use alt="". The empty string is a deliberate signal to assistive technology: "skip this element entirely."

For decorative images that can live in CSS, see 10: Presentational images — a CSS background-image is not part of the accessibility tree at all, which is even cleaner.

Writing good alt text

The difference between weak and strong alt text is specificity. Weak alt text names the subject in the most generic terms possible. Strong alt text describes the subject, its context, and any details that matter for the user's understanding of the content at that point in the page.

Rules of thumb

• Do not start with "image of" or "photo of." Screen readers already announce the element type. Starting with "image of" is redundant and delays the actual information.
• Match the detail level to the context. A portrait used as an author byline headshot needs less detail than the same portrait used as the main subject of a photography tutorial.
• Include text that appears in the image. If a graphic contains words — a logo, a chart label, a CTA button rendered as an image — those words must appear in the alt text verbatim.
• Be concise but complete. There is no strict length limit, but alt text that runs on for multiple sentences is usually a sign that the image needs a long description instead (see the next section).

Weak vs strong: portrait photo

The portrait below shows a young woman photographed in close-up against a dark, slightly textured grey background. Her light brown wavy hair is loose around her face; she has pale skin, pale grey eyes, and bright red lips. The mood is atmospheric and slightly melancholy — soft studio lighting with the background deliberately out of focus.

Complex images & long descriptions

Some images — bar charts, network diagrams, architectural drawings, infographics — encode far more information than a one-sentence alt can convey. A bar chart showing five years of revenue data might have a short alt of "Revenue by year, 2020–2024" but the underlying data deserves a full table or paragraph.

Two approaches work well together:

• <figure> + <figcaption> — put a full visible description in the caption. All readers benefit; no markup duplication. The alt becomes a short headline; the caption provides the detail.
• aria-describedby — connects the <img> to any element in the document by its id. Screen readers read the short alt first, then offer the linked description as additional context. Useful when the long description is already on the page as a separate paragraph or table.

Because aria-describedby points at the visible <figcaption>, sighted readers and screen reader users both receive the same detail — there is no hidden or duplicated content. The alt acts as a brief headline; the description provides depth.

Why alt text pays off

Accessibility work is sometimes framed purely as compliance. That framing undersells it. Good alt text is valuable to three separate constituencies — and in each case the argument stands independently.

Engineering: images fail

Networks time out. CDNs have outages. Users browse with images disabled to save data. Corporate firewalls block certain image hosts. When an image cannot load, the alt text is the fallback content — the browser renders it exactly where the image would have been. A page with good alt text degrades gracefully under all of these conditions; a page without alt text shows broken image icons or, worse, nothing at all.

This is an engineering reliability argument, not an accessibility argument. Alt text is a form of defensive programming applied to content.

AI: machines read alt text

Search engine crawlers cannot see images. They index the alt attribute to understand what an image depicts, which affects how the page ranks for image searches and how the image appears in Google Image Search results. Large language models used in AI-powered tools — Bing Chat, Google Search Generative Experience, and others — also consume alt text when they process and summarise web pages.

Writing accurate, descriptive alt text is simultaneously writing accurate, descriptive machine-readable metadata. The image's SEO value depends entirely on what you put there.

The closed-caption analogy

Closed captions on video are mandated for accessibility — but surveys consistently show that a large fraction of people who use captions are not deaf or hard of hearing. They use captions in noisy environments, when learning a second language, when they want to skim quickly, or simply as a reading habit.

Alt text is the closed caption for images. People who benefit from it include screen reader users, yes — but also people on low-bandwidth connections where images are slow to load, people reading in environments where images are blocked, voice assistant users asking questions about a page's content, and developers debugging layout in a headless browser. Write alt text for all of them.