Alt Text Best Practices

Writing concise, meaningful image descriptions that convey purpose to screen reader users.

stellae.design

Accessibility

Alt text (alternative text) is a written description added to images via the HTML alt attribute, providing a text equivalent for users who cannot see them. Required by WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A), it is one of the most fundamental accessibility requirements. Screen readers announce alt text when encountering images, making visual content accessible to blind and low-vision users. Alt text also appears when images fail to load, benefits SEO, and aids cognitive understanding. Without it, screen reader users hear only 'image' or the file name — useless information that creates barriers.

Why It Matters

Alt text is the textual alternative that conveys the meaning, function, or content of an image to users who cannot see it — including screen reader users, users on slow connections where images fail to load, and search engine crawlers that index content for discoverability — making it one of the most impactful accessibility practices because images without adequate alt text create information gaps that exclude blind and low-vision users from understanding page content. Writing effective alt text is a WCAG 1.1.1 Level A requirement, the most fundamental compliance level, yet it remains one of the most frequently failed success criteria in accessibility audits because teams treat it as a metadata afterthought rather than a content authoring discipline that requires the same editorial judgment as writing headlines or body copy. The difference between poor and excellent alt text is the difference between a blind user understanding that a chart shows declining revenue requiring board action versus knowing only that an "image" exists on the page.

Real-World Examples

E-commerce product page with context-appropriate alt text

An online clothing retailer writes alt text for product images that describes what a potential buyer needs to know — "Navy blue slim-fit cotton Oxford shirt, button-down collar, worn by model showing front view with sleeves rolled to elbow" — rather than generic text like "product image" or overly technical text like "SKU-4429-NVY-M.jpg" that communicates nothing about the garment's appearance. Thumbnail images in the color selector use alt text like "Navy blue" and "Forest green" to identify the color variant rather than repeating the full product description for each swatch, keeping the screen reader experience efficient and scannable. The approach means that a blind user shopping for a gift can understand exactly what the garment looks like and make an informed purchasing decision with the same confidence as a sighted user.

News article using editorial alt text that conveys photojournalistic meaning

A news website writes alt text for article photographs that conveys the journalistic content rather than just the literal visual description — instead of "people standing outside a building," the alt text reads "Displaced residents waiting outside a temporary shelter in Valencia after flooding destroyed their homes, many carrying personal belongings in plastic bags" — because the editorial purpose of the image is to convey the human impact of the disaster, not merely to document that people and a building exist. The publication maintains an alt text style guide that trains editors to ask "what does this image communicate to the story?" rather than "what objects are in this image," ensuring that screen reader users receive the same narrative experience as sighted readers. Photo captions and alt text serve complementary rather than duplicative roles: the caption provides attribution and additional context visible to all users, while the alt text describes the visual content for those who cannot see it.

Counter-example

Corporate website using automated filename-based alt text for all images

A corporate website auto-generates alt text from image filenames, producing results like "IMG_2847_final_v3_cropped" for a team photo, "hero-banner-2024-q3" for a marketing illustration, and "graph" for a quarterly revenue chart showing a critical 40% year-over-year decline — rendering every image on the site meaningless to screen reader users while technically populating the alt attribute to pass automated accessibility scans that only check for attribute presence. The revenue chart is the most damaging example because sighted executives see alarming data that drives board-level decisions while screen reader users hear only the word "graph," creating an information equity gap that excludes blind stakeholders from the same business intelligence. This demonstrates why automated alt text generation from filenames or AI-only descriptions without human editorial review fails to meet the actual purpose of WCAG 1.1.1, which requires that alt text convey equivalent information, not merely exist as a non-empty string.

Role-Specific Guidance

Common Mistakes

• The most widespread mistake is writing alt text that describes what an image looks like rather than what it communicates — a bar chart showing declining user engagement needs alt text that conveys the data trend and its significance, not a description of colored rectangles of varying heights, because the purpose of the image is informational rather than decorative. Another common error is prefixing alt text with "Image of" or "Picture of," which is redundant because screen readers already announce the element as an image before reading the alt text, wasting the user's time with information they already have. Teams also frequently apply the same alt text strategy to every image regardless of context — the same photograph might need detailed descriptive alt text in a photo gallery, brief contextual alt text in a news article, and an empty alt attribute when used as a decorative background element, because alt text quality depends entirely on the image's purpose within its specific context.