Alt Text
Definition
Alt text is whatever sits in the alt attribute of an img element. It is not a caption, and it is not a description of the file — it is the text you would put in that spot if the picture could not be shown at all. WCAG covers it under success criterion 1.1.1 Non-text Content at Level A, the lowest bar the standard has. Length is a judgement call: a sentence usually does it, and listeners lose the thread somewhere past fifteen or twenty words. Three cases cover nearly everything. An image that carries meaning gets that meaning in words; an image that is purely decorative gets an empty alt, written as two quote marks with nothing between them; and an image that is the whole content of a link gets text describing where the link goes, not what the graphic looks like.
Why It Matters
Missing alt text is the second most common failure in WebAIM's yearly survey of a million home pages, found on more than half of them. The difference between an empty alt and no alt is the part people get wrong: an empty alt tells assistive software to skip the image, which is exactly right for a divider or a background flourish. No alt attribute at all leaves screen readers guessing, and many fall back to reading the file name, so the listener hears 'I M G underscore 4 0 2 1 dot J P G' in the middle of a sentence. Twenty of those on a page and the page is unusable. Alt text also carries weight in image SEO, because it is one of the few pieces of text a search engine can attach to a picture.
How It Works
When the browser builds the accessibility tree it computes an accessible name for each image, and it does so in a fixed order: aria-labelledby first, then aria-label, then the alt attribute, then the title attribute. If the alt attribute is present but empty, the image is treated as presentational and removed from the tree entirely, the same effect as role of presentation. If no name can be computed at all, the image is left unnamed and the fallback behaviour is up to the screen reader. Note what has no alt attribute to begin with: a CSS background image, an icon drawn with a font glyph, or text baked into a PNG. Those need an accessible name supplied another way, or repeating in real text nearby.
Real-World Example
A charity uploads a campaign page to winter-appeal.99helpers.site with three images. The header logo sits inside a link to the home page, so its alt reads 'Northfield Trust — home'. The photograph of volunteers unloading a van carries the point of the page, so its alt reads 'Volunteers unloading crates of tinned food from a van'. The decorative wave graphic behind the heading gets an empty alt and vanishes from the screen reader's output. All three files are served straight from 99helpers as static assets — the alt text lives in the HTML, not in the image, so it can be edited and republished without touching the pictures.
Common Mistakes
- ✕Omitting the alt attribute on decorative images instead of writing an empty one — a missing alt is not the same instruction as an empty alt, and the screen reader often reads the file name instead
- ✕Starting with 'image of' or 'photo of' — the role is already announced as graphic, so the listener hears the word twice
- ✕Packing keywords into alt for rankings — it reads as nonsense aloud, and search engines have treated it as spam for well over a decade
- ✕Describing what the picture shows when the picture is a link or a button — the alt has to say where the control goes or what it does
Related Terms
Text Alternative
A text alternative is text that serves the same purpose as non-text content — an image, an icon, a chart, a map, an audio clip, a video. It is the principle that alt text, captions and transcripts each implement.
Accessible Name
The accessible name is the short string that identifies an element to assistive technology — the words a screen reader speaks when focus lands on a link, button or field. Browsers work it out from several possible sources in a fixed order.
Screen Reader
A screen reader is software that turns what is on screen into speech or braille and gives the user a keyboard interface for moving through it. JAWS, NVDA, VoiceOver, Narrator and TalkBack are the ones in common use.
Image SEO
Image SEO is the set of choices that make pictures on a page findable and cheap to load: descriptive file names, useful alt text, the right format and size, and markup that explains what the image shows.
Image Hosting
Storing image files somewhere on the web and serving them at addresses that can be dropped straight into an img tag, an email or a marketplace listing. The useful output is the address, not the upload.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →