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 and ensures that visual information remains accessible even without image display.

Screen readers read the alt text aloud when users cannot see images. Additionally, the alternative text is displayed when an image fails to load.

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

Accessibility: People with visual impairments use screen readers to read and understand text, images, photos and graphics. Alt texts provide a textual description of image content and ensure that visual information remains accessible even without image display.

The alternative text conveys the content, context and purpose of a visual element in text form. This way, users with screen readers receive the same information as sighted people.

Better user experience: When an image fails to load technically, the browser displays the alt text. The text thus replaces the image and keeps the context comprehensible.

SEO & Search Engine Optimization: Search engines like Google can read words and sentences, but cannot see images. They evaluate the alt attribute of an HTML element to understand what content an image represents. By writing meaningful alt texts, you help search engines correctly categorize images in any case and improve visibility in image search results.

Consistent use of text alternatives: When alt texts are used consistently, they improve both accessibility and the discoverability of content in search engines.

Legal requirements: The Accessibility Strengthening Act (BFSG) requires many companies to provide digital content in an accessible manner – this includes properly maintained alt texts for images, graphics and photos.

Alt text (alt attribute): Describes the content or function of an image in HTML code via alt="…". This image description is read aloud by screen readers and is mandatory for accessibility.

Alt tag: Not an official technical term. In practice, this almost always refers to the alt attribute.

Title attribute: Provides optional additional information as a tooltip. It does not serve as alternative text and does not replace alt text.

Not every image is technically integrated in the same way. Depending on format and use case, how an appropriate alternative text must be provided differs. The goal is always that the purpose or information of a visual element is clearly identifiable for screen reader users as well.

Icons as img element: When icons are integrated as regular 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 implementation, they should be provided with aria-label, a title element or the role role="img" so screen readers receive a comprehensible description.

Background images (CSS): Images that are integrated exclusively via CSS as backgrounds are not recognized by screen readers. If such graphics convey information, they must be integrated as a regular img element with alt text. Purely decorative background images do not require alternative texts.

To ensure that alt texts maintain high quality over time, they should be checked regularly, read through and updated as part of content maintenance. The goal is to ensure that each image description correctly represents the actual content, context and purpose of an image, photo or graphic.

Clean maintenance of alternative texts improves both accessibility and accessibility for people and search engine optimization (SEO), as search engines like Google evaluate image content and keywords via the alt attribute.

Browser developer tools: Right-click on an image and select "Inspect element" to view the alt attribute in the HTML element directly. This way you can check whether a meaningful textual description is present.

Screen reader tests: With screen readers like NVDA (Windows) or VoiceOver (macOS), you can have alt texts read aloud and evaluate whether users can read and understand the information comprehensibly.

Accessibility tools: Automated testing tools like WAVE or axe identify missing, duplicate or incorrect alternative texts and support quality assurance.

CMS backend: In content management systems, you can manage alt texts directly on images. Regularly check here whether new images, graphics and photos are correctly described and placed in the appropriate context.