Alt Attribute
The alt attribute is the HTML attribute of the <img> tag that contains the alternative text of an image. Screen readers read this text in place of the image, and browsers display it when the image fails to load. Three possible states: absent, empty, or filled — each produces different behavior.
Remove the alt attribute from an image and launch a screen reader. You'll hear something like: "image, IMG_20250114_crop_final_v2.jpg". The filename, read aloud. This is what millions of users experience when the alt is missing.
#Absent, empty, or filled: three distinct behaviors
The confusion between these three states is the source of most errors. Here's what actually happens:
<!-- alt absent: screen reader reads the filename -->
<img src="equipe.jpg">
<!-- alt empty: screen reader ignores the image -->
<img src="bordure-decorative.png" alt="">
<!-- alt filled: screen reader reads the text -->
<img src="graph-ca.png" alt="Revenue up 18% in Q3 2025">alt="" (empty) explicitly signals "this image is decorative, ignore it". Without an alt attribute at all, the browser assumes the image carries information and the screen reader falls back on the only clue available: the filename. The W3C recommends a decision tree to choose between these three cases.
#What audit tools won't tell you
Automated scanners detect a missing alt. They don't verify whether the text is relevant.
"Image" in the alt. Screen readers already announce the "image" role before reading the attribute. Writing alt="image of the product" produces "image, image of the product". Same problem with "photo of…" or "illustration of…". Describe the content, not the format.
The same alt everywhere. Copying alt="logo" on thirty images in a partner carousel doesn't help anyone. Each image has its own context.
The image-link without alt. When an <img> is the only content of an <a> link, the alt serves as the link text. Without it, the link is invisible to assistive technologies.
Keep the alt to roughly 150 characters. Beyond that, the screen reader recites a paragraph without pausing. For complex images (graphs, infographics), prefer a detailed description in the page body.
#What the standard says
WCAG criterion 1.1.1 (level A) requires a text alternative for all non-text content. RGAA dedicates its first nine criteria to it: <img>, <svg>, <object> tags, clickable areas, image buttons. In HTML5, the alt attribute is required on every <img>.
#In summary
No alt attribute: the screen reader reads the filename. alt="": the image is ignored. alt filled: the text is read. Choosing the right state is a ten-second gesture that changes the browsing experience for millions of people.