Alt-Text Helper

When to use Alt-Text Helper

• Writing alt text for product images: Product images need alt text that describes the product's visual characteristics relevant to the purchase decision - colour, material, configuration - not marketing copy.
• Describing data visualisations and charts: Charts require alt text that communicates the key insight or trend, not just "chart" or "graph". Use the surrounding caption for full data and the alt text for the primary takeaway.
• Handling icon and logo images: A logo used as a home link needs alt text of the site name (e.g. alt="uiuxtools.dev home"). A purely decorative divider icon should have alt="" to suppress screen reader announcement.
• Auditing a CMS for missing alt text: Content editors frequently upload images without completing the alt text field. Use the pattern library to train editors on what constitutes adequate alt text for different image types.

How alt text works and what WCAG requires

The Alt Text Helper provides a structured pattern library and decision framework for writing effective image alternative text. Alt text serves two distinct purposes: it is read aloud by screen readers (JAWS, NVDA, VoiceOver, TalkBack) when a user encounters an image, and it is indexed by search engines as a signal for image relevance and page content. The requirements for each purpose are closely aligned but not identical.

WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) is a Level A requirement - the most critical conformance level - and mandates that all non-decorative images have a text alternative that serves the equivalent purpose. The text alternative must convey the same information that a sighted user gains from the image. A chart showing revenue growth over five years needs alt text that communicates the key data points, not merely "bar chart". A product photo needs alt text describing the visual appearance relevant to a purchase decision, not just the product name.

The decision framework in the tool guides you through four questions: Is the image decorative? (If yes, use alt="" to hide it from screen readers.) Is the image a functional image such as a button or link? (If yes, describe the function, not the appearance.) Is the image informational? (If yes, describe the content concisely.) Is the image complex - a chart, diagram, or map? (If yes, provide a short alt text and a longer description in the surrounding text or a linked figure description.) Decorative images must explicitly have empty alt attributes - omitting the alt attribute entirely causes most screen readers to read the image filename instead.