Alternative text (Alt-Text)

Alt text (alternative text) is a short image description that is programmatically assigned to an image or other non-text content. Technically, this is done on the web via the alt attribute of an HTML element.

This alternative text describes the content and purpose of an image in text form. It is an elementary component of good content and ensures that visual information remains accessible to everyone even without the image being displayed.

Screen readers read alt texts aloud when users cannot see images. Another good example of their usefulness: The alternative text becomes visible in the browser if a graphic cannot be technically loaded.

Alt texts are thus a central part of digital accessibility and are mandatorily anchored in the international guidelines of the WCAG.

More about the WCAG guidelines →

Digital Inclusion: Special reading programs (screen readers) used by the visually impaired rely on the text to make images, photos, and graphics comprehensible. Alt texts provide an exact textual description of the image content.

The alternative text conveys the context and purpose of a visual element. This ensures all users receive the same information as sighted people.

Better User Experience: Another important reason for alt texts: If an image fails to load, the browser displays the text as a placeholder. This preserves the contextual connection of the page in any case.

SEO and Search Engine Optimization: Search engines like Google can read words, but cannot visually understand images. They evaluate the alt attribute to grasp what an image represents. When you write meaningful alt texts and sensibly integrate the relevant keyword, you help search engines classify images correctly.

Links: If an image acts as a link, the alt text serves both the search engine and the screen reader as anchor text to explain the destination of the link.

Legal Requirements: The Accessibility Strengthening Act (BFSG) obliges many companies to provide digital content for everyone – this imperatively includes correctly maintained text alternatives for images and graphics.

Icons as img elements: If icons are embedded as normal images, they need an alt text that describes their function – not their appearance. Example: alt="Print page" instead of alt="Printer icon".

SVG graphics: SVGs often contain more complex content. Depending on the implementation, they should be provided with an aria-label, a title element, or the role role="img" so that reading programs receive an understandable description.

Background images (CSS): Images that are exclusively embedded via CSS as a background are not recognized by screen readers. If such graphics convey contextual information, they must be embedded as a normal img element with a text alternative.