Alt-Texte richtig schreiben – Beispiele & Formulierungsregeln

Die digitale Kommunikation stellt heute nahezu jedes Unternehmen, jede Behörde und öffentliche Einrichtung vor die Herausforderung, Inhalte barrierefrei zu gestalten. Bilder und Grafiken sind zentrale Elemente moderner Dokumente und Webseiten, da sie Informationen visuell unterstützen und Emotionen transportieren. Doch für Menschen, die auf Screenreader und andere Assistenztechnologien angewiesen sind, verlieren Bilder ohne Alternativtexte jegliche Aussagekraft. Ein gut geschriebener Alt-Text leistet hier entscheidende Arbeit: Er sorgt dafür, dass alle Inhalte – auch diejenigen, die visuell umgesetzt werden – wahrnehmbar und verständlich sind.

In diesem Leitfaden erfährst du alles, was du zum Thema Alt-Texte wissen musst. Von den Grundlagen über rechtliche Vorgaben bis hin zu konkreten Formulierungsregeln und Beispielen – wir zeigen dir, wie du aussagekräftige, prägnante und SEO-optimierte Alt-Texte erstellst. Dabei werden dir nicht nur die theoretischen Hintergründe vermittelt, sondern auch praktische Handlungsempfehlungen und Checklisten an die Hand gegeben, die du direkt in deinem Arbeitsalltag umsetzen kannst.

Ein besonderer Mehrwert dieses Leitfadens liegt in der Unterstützung durch das IFDB – Institut für digitale Barrierefreiheit. Unsere Experten bieten dir fundierte Beratung, zertifizierte Audits und praxisnahe Schulungen, damit du deine Alt-Texte und damit deine gesamte digitale Kommunikation 100 % gesetzeskonform und nutzerfreundlich gestalten kannst.

2. Grundlagen zu Alt-Texte und ihre Bedeutung

2.1 Was sind Alt-Texte?

Alt-Texte (alternativ Texte, „alternative Texte“) sind kurze, prägnante Textbeschreibungen, die in den HTML-Code von Bildern eingebettet werden. Sie dienen folgenden Zwecken:

• Informationsvermittlung:
  Alt-Texte beschreiben den Inhalt und die Funktion eines Bildes, damit Nutzer, die das Bild nicht sehen können, dessen Information erhalten.

• Barrierefreiheit:
  Menschen mit Sehbehinderungen nutzen Screenreader, um Webseiteninhalte vorgelesen zu bekommen. Ein gut formulierter Alt-Text ermöglicht es dem Screenreader, den Bildinhalt korrekt wiederzugeben.

• SEO-Vorteile:
  Suchmaschinen können den Kontext eines Bildes über den Alt-Text erfassen, was zu einer besseren Indexierung und höheren Rankings beitragen kann.

2.2 Rechtliche Anforderungen und Standards

Die Erstellung von Alt-Texte unterliegt klaren gesetzlichen und normativen Vorgaben, die sich aus verschiedenen Regelwerken ableiten lassen:

• WCAG (Web Content Accessibility Guidelines):
  Diese Richtlinien definieren, was bei der Gestaltung von Webinhalten – einschließlich Bildern – zu beachten ist. Zu den WCAG-Prinzipien gehört unter anderem, dass alle wichtigen Inhalte auch nicht-visuellen Nutzerinnen und Nutzern zugänglich gemacht werden.

• PDF/UA:
  Der PDF/UA-Standard (ISO 14289) legt fest, dass auch PDF-Dokumente barrierefrei sein müssen. Das bedeutet, Bilder und Grafiken in PDFs müssen ebenfalls mit Alternativtexten versehen sein.

• BITV (Barrierefreie Informationstechnik-Verordnung) und BFSG (Barrierefreiheitsstärkungsgesetz):
  Insbesondere öffentliche Einrichtungen und viele Unternehmen müssen ihre digitalen Inhalte gemäß diesen Vorgaben zugänglich machen.

Die Einhaltung dieser Standards ist nicht nur aus rechtlicher Sicht essenziell, sondern verbessert auch die Usability und das Nutzererlebnis für alle Zielgruppen.

2.3 Vorteile aussagekräftiger Alt-Texte

• Erhöhte Zugänglichkeit:
  Nutzer, die auf assistive Technologien angewiesen sind, erhalten alle Informationen, die sonst ausschließlich visuell vermittelt würden.

• Rechtssicherheit:
  Durch die Einhaltung der WCAG, BITV und anderer Vorgaben minimierst du das Risiko rechtlicher Konsequenzen.

• Verbessertes SEO:
  Suchmaschinen können den Inhalt eines Bildes über den Alt-Text erkennen und so besser in Suchergebnissen anzeigen.

• Professionelles Image:
  Eine barrierefreie Website oder ein PDF vermittelt den Eindruck von Verantwortungsbewusstsein und Modernität, was sich positiv auf das Markenimage auswirkt.

• Nutzerzufriedenheit:
  Alle Nutzer – unabhängig von ihren individuellen Einschränkungen – profitieren von einer klar strukturierten und verständlichen Darstellung der Inhalte.

3. Formulierungsregeln für Alt-Texte

3.1 Prinzipien der guten Alt-Texte

Ein guter Alt-Text sollte folgende Eigenschaften aufweisen:

• Aussagekräftig und präzise:
  Beschreibe den wesentlichen Inhalt oder die Funktion des Bildes, ohne unnötige Details.

• Kurz, aber informativ:
  Ideal sind ein bis zwei Sätze, die klar und prägnant das Bild beschreiben.

• Kontextbezogen:
  Der Alt-Text sollte den Kontext berücksichtigen, in dem das Bild verwendet wird. Ein Bild auf einer Produktseite erfordert eine andere Beschreibung als dasselbe Bild in einem Blogartikel.

• Keine Wiederholung von Redundanten Informationen:
  Vermeide, Informationen zu wiederholen, die bereits im umgebenden Text vorhanden sind.

• Keine Phrasen wie „Bild von“ oder „Foto“:
  Diese Informationen sind für den Nutzer meist nicht erforderlich, da der Screenreader ohnehin signalisiert, dass es sich um ein Bild handelt.

3.2 Dos and Don’ts

Dos:

• Do:
  Formuliere den Alt-Text so, dass er den Inhalt und die Funktion des Bildes klar beschreibt.
  Beispiel: Statt „Foto“ lieber „Diagramm, das den jährlichen Umsatzanstieg um 12 % zeigt.“

• Do:
  Achte darauf, dass der Alt-Text in den Kontext passt. Ist das Bild rein dekorativ, setze einen leeren Alt-Text (alt=““).

• Do:
  Verwende aktive Verben und prägnante Sprache.
  Beispiel: „Grafik zeigt den Ablauf eines Bestellvorgangs.“

Don’ts:

• Don’t:
  Wiederhole Informationen, die bereits im Text vorhanden sind.

• Don’t:
  Verwende nicht „Bild von“ oder „Foto von“ – die Art des Elements ist für Screenreader redundant.

• Don’t:
  Vermeide lange, ausschweifende Beschreibungen, die den Nutzer verwirren können.

3.3 Formulierungskriterien im Detail

Bei der Erstellung guter Alt-Texte sind folgende Kriterien zu beachten:

1. Konkret und spezifisch:
   Beschreibe, was auf dem Bild genau zu sehen ist. Statt „Mann“ sollte beispielsweise „junger Mann im Anzug, der an einem Schreibtisch sitzt“ stehen, falls dies für den Kontext relevant ist.

2. Funktionalität berücksichtigen:
   Wenn das Bild eine bestimmte Funktion hat (z. B. als Link oder als Teil eines interaktiven Elements), sollte dies im Alt-Text erwähnt werden.
   Beispiel: „Button zum Absenden des Formulars“ statt nur „Button“.

3. Kontextuelle Relevanz:
   Der Alt-Text soll den Inhalt des Bildes in Bezug auf den umgebenden Text widerspiegeln.
   Beispiel: Für ein Diagramm in einem Artikel über Umsatzwachstum: „Diagramm zeigt einen kontinuierlichen Umsatzanstieg von 2018 bis 2022.“

4. Keine überflüssigen Details:
   Achte darauf, dass der Alt-Text nicht unnötig in die Tiefe geht. Der Fokus sollte auf den relevanten Informationen liegen.
   Beispiel: Statt „Auf dem Bild ist ein blauer Wagen mit vier Rädern, der auf einer Straße fährt“ genügt: „Blauer Wagen auf einer vielbefahrenen Straße“.

5. Eindeutige Sprache:
   Vermeide Fachjargon, wenn er für den Kontext nicht notwendig ist, und halte die Formulierungen verständlich.

4. Beispiele – Gute versus schlechte Alt-Texte

4.1 Beispiel 1: Produktfoto

• Schlecht:
  „Bild“

• Besser:
  „Produktfoto des neuen Smartwatches-Modells X – silberfarbenes Gehäuse mit schwarzen Armband“

• Optimal:
  „Smartwatch X im eleganten Silberdesign, die durch ihr klares Display und modernes Armband überzeugt und für den Alltag konzipiert ist.“

4.2 Beispiel 2: Diagramm

• Schlecht:
  „Diagramm zeigt Umsatz“

• Besser:
  „Diagramm, das den jährlichen Umsatzanstieg um 12 % anzeigt.“

• Optimal:
  „Liniendiagramm, das den Umsatzanstieg des Unternehmens von 2018 bis 2022 mit einem durchschnittlichen Wachstum von 12 % veranschaulicht.“

4.3 Beispiel 3: Infografik

• Schlecht:
  „Infografik“

• Besser:
  „Infografik zur digitalen Barrierefreiheit, die die wichtigsten Maßnahmen darstellt.“

• Optimal:
  „Infografik, die in übersichtlicher Form die fünf Schlüsselmaßnahmen zur Erhöhung der digitalen Barrierefreiheit darstellt: Dokumentstruktur, Alternativtexte, Formularoptimierung, Navigation und fortlaufendes Monitoring.“

4.4 Beispiel 4: Navigations-Button

• Schlecht:
  „Hier klicken“

• Besser:
  „Zum Registrierungsformular“

• Optimal:
  „Registrierungsformular öffnen – Jetzt anmelden“

5. Tools und Methoden zur Überprüfung von Alt-Texte

5.1 Automatisierte Tools

• WAVE:
  Ein kostenloses Online-Tool, das Webseiten analysiert und Mängel bei Alternativtexten aufzeigt.

• axe DevTools:
  Ein Browser-Plugin, das detaillierte Berichte zu fehlenden oder fehlerhaften Alt-Texte liefert.

• Google Lighthouse:
  Prüft neben anderen Aspekten auch die Barrierefreiheit von Bildern in deinem Code.

• Adobe Acrobat Pro:
  Nutze die Barrierefreiheitsprüfung, um Alt-Texte in PDFs zu überprüfen und zu korrigieren.

5.2 Manuelle Tests und Nutzertests

• Screenreader-Tests:
  Lasse dein Dokument mit Screenreadern wie NVDA, JAWS, VoiceOver oder TalkBack vorlesen, um zu prüfen, ob die Alt-Texte den gewünschten Effekt erzielen.

• Feedback von Nutzern:
  Frage Personen, die auf assistive Technologien angewiesen sind, nach ihrem Feedback zu deinen Alt-Texte.

• Interne Checklisten:
  Entwickle eigene Checklisten, um sicherzustellen, dass alle relevanten Bilder und Grafiken einen passenden Alt-Text enthalten.

6. Checklisten und Best Practices

6.1 Kompakte Checkliste für Alt-Texte

• Sind alle Bilder, Grafiken und Diagramme in deinem Dokument vorhanden?

• Enthalten alle relevanten Bilder einen aussagekräftigen Alt-Text?

• Wird der Alt-Text im Kontext des umgebenden Textes formuliert?

• Wurden redundante Formulierungen vermieden (z. B. „Bild von“)?

• Sind interaktive Elemente wie Buttons und Links mit funktionalen Beschreibungen versehen?

• Wurde das Dokument mit einem Screenreader getestet?

• Wurde auf die Einhaltung der WCAG-Kriterien geachtet?

6.2 Best-Practice-Beispiele aus der Praxis

• Beispiel aus der E-Commerce-Branche:
  Ein Online-Shop optimiert seine Produktfotos durch prägnante Alt-Texte, die nicht nur das Design, sondern auch den Nutzen und die Besonderheiten des Produkts beschreiben. Durch kontinuierliche Tests und Nutzerfeedback konnten sie den Registrierungsprozess vereinfachen, sodass auch blinde Kunden den Bestellvorgang problemlos abschließen können.

• Beispiel aus der Öffentlichkeitsarbeit:
  Eine Behörde erstellt Informationsbroschüren, bei denen jedes Bild, jede Infografik und jedes Diagramm mit durchdachten Alt-Texte versehen wird. Ein externer Audit durch das IFDB – Institut für digitale Barrierefreiheit bestätigt, dass alle Alt-Texte den gesetzlichen Vorgaben entsprechen und die Inhalte klar verständlich vermittelt werden.

6.3 Tipps und Tricks für den laufenden Betrieb

• Richte eine Vorlagenbibliothek ein, in der standardisierte Alt-Texte für häufig verwendete Bilder hinterlegt sind.

• Setze regelmäßige interne Reviews an, um Alt-Texte zu überprüfen und zu aktualisieren.

• Integriere Alt-Text-Checklisten in deinen CI/CD-Prozess für Dokumente und Webinhalte.

• Nutze Schulungen und Workshops (anbieten durch das IFDB – Institut für digitale Barrierefreiheit), um dein Team kontinuierlich weiterzubilden.

7. Die Rolle von das IFDB – Institut für digitale Barrierefreiheit

Das IFDB – Institut für digitale Barrierefreiheit ist dein zuverlässiger Partner, wenn es darum geht, digitale Inhalte gesetzeskonform und inklusiv zu gestalten. Hier einige der Hauptvorteile:

1. Umfassende Beratung:
   Wir bieten dir detaillierte Aufklärung über alle relevanten Standards wie PDF/UA, WCAG, BITV und BFSG, sodass du immer auf dem aktuellsten Stand bist.

2. Zertifizierte Audits:
   Mit unseren unabhängigen Audits erhältst du ein Zertifikat, das den hohen Standard deiner Alt-Texte und Dokumente bestätigt – ideal auch für Kunden, Behörden und Partner.

3. Praxisnahe Schulungen:
   Durch Workshops und Trainingseinheiten vermittelst du deinem Team das nötige Know-how, um Alt-Texte und andere Barrierefreiheitsmaßnahmen effizient und korrekt umzusetzen.

4. Langfristiger Support:
   Unser Service endet nicht mit der Beratung – wir begleiten dich fortlaufend durch regelmäßige Updates, Audits und Weiterbildungsangebote, damit deine Prozesse stets 100 % gesetzeskonform bleiben.

5. Effizienzsteigerung:
   Durch standardisierte Prozesse und Checklisten, die wir gemeinsam mit dir entwickeln, sparst du Zeit und Geld und kannst dich voll auf die inhaltliche Arbeit konzentrieren.

8. Zusammenfassung und abschließende Empfehlungen

Alt-Texte sind ein zentraler Baustein der digitalen Barrierefreiheit – sie gewährleisten, dass visuelle Inhalte auch für Nutzer, die auf Screenreader angewiesen sind, zugänglich und verständlich bleiben. Mit guten Alt-Texte schaffst du nicht nur 100 % gesetzeskonforme Inhalte, sondern auch ein nutzerfreundliches und professionelles Erscheinungsbild, das dein Markenimage stärkt und rechtliche Risiken minimiert.

Wichtige Punkte im Überblick:

• Struktur und Präzision:
  Verwende klare, konkrete Formulierungen, die den Inhalt und die Funktion des Bildes erfassen, ohne überflüssige Informationen.

• Kontext beachten:
  Passe den Alt-Text an den Kontext an – was auf einer Produktseite relevant ist, muss auf einer Informationsseite anders formuliert sein.

• Prüfen und optimieren:
  Setze sowohl automatisierte Tools als auch manuelle Screenreader-Tests ein, um sicherzustellen, dass deine Alt-Texte den gewünschten Effekt erzielen.

• Schulungen und kontinuierliches Monitoring:
  Bilde dein Team regelmäßig weiter und integriere Alt-Text-Checks in deinen ständigen Verbesserungsprozess.

Durch die konsequente Umsetzung dieser Prinzipien erhöhst du nicht nur die Zugänglichkeit deiner digitalen Inhalte, sondern verbesserst auch das Suchmaschinenranking, stärkst dein Image als inklusives Unternehmen und stellst die gesetzeskonforme Bereitstellung sicher.

9. Ausblick: Die Zukunft der Alt-Texte

Mit fortschreitender Digitalisierung und neuen Technologien wird die Bedeutung von Alt-Texte weiter zunehmen. Zukünftige Entwicklungen wie künstliche Intelligenz können zwar die Erstellung erleichtern, ersetzen aber niemals den Wert eines gut durchdachten, manuellen Alt-Texts. Unternehmen, die hier proaktiv handeln, sichern sich einen Wettbewerbsvorteil und genießen ein positives Image als moderne, verantwortungsbewusste Organisation.

Eine kontinuierliche Überprüfung und Anpassung der Alt-Texte wird in Zukunft ebenso wichtig bleiben wie heute – und das gilt für Webseiten, PDFs und alle digitalen Medienformate. Durch den Einsatz von standardisierten Prüfprozessen und durch regelmäßige Schulungen bleibt dein Unternehmen immer am Puls der Zeit.

10. Abschließende Worte

Dieser Leitfaden hat dir gezeigt, wie du Alt-Texte richtig schreibst – mit klaren Formulierungsregeln, anschaulichen Beispielen und praktischen Tipps. Durch die systematische Herangehensweise wird sichergestellt, dass alle visuellen Inhalte auch für Menschen mit Einschränkungen zugänglich werden. Nutze die vorgestellten Regeln, Checklisten und Best-Practice-Beispiele als Grundlage, um deine digitale Barrierefreiheit stetig zu optimieren.

Das IFDB – Institut für digitale Barrierefreiheit steht dir dabei als kompetenter Partner zur Seite – durch umfassende Beratung, zertifizierte Audits, praxisnahe Schulungen und kontinuierlichen Support. Mit der richtigen Strategie und dem nötigen Know-how bist du optimal aufgestellt, um sowohl die gesetzlichen Vorgaben als auch die Erwartungen deiner Zielgruppen zu erfüllen.

Viel Erfolg bei der Umsetzung deiner Alt-Texte – und erinnere dich daran: Gut geschriebene Alt-Texte sind ein Zeichen von Weitblick, Qualität und Verantwortung in der digitalen Welt!