Alternativtexte für die Barrierefreiheit schreiben

Alternativer Text oder Alternativtext ist ein kurzer, beschreibender Text, der Benutzer:innen hilft, den Zweck eines Bildes, Fotos, einer Illustration, eines GIFs oder anderer visueller Inhalte auf einer Webseite zu verstehen. Dieser Text kann von Hilfsgeräten abgerufen werden oder wenn ein Bild nicht geladen wird (z. B. aufgrund einer geringen Bandbreite).

Wenn du Alternativtext in deine Website einfügst, werden Videos, Bilder, GIFs und Symbole für alle zugänglicher, unabhängig davon, ob sie eine Behinderung haben oder nicht.

Zu den Gründen, warum sich jemand auf Alternativtexte verlassen muss, gehören:

• Blindheit oder Sehschwäche

• Helle Beleuchtung

• Beeinträchtigung des Hörvermögens

• Laute Umgebung

• Langsames Internet

So schreibst du einen guten Alternativtext

Deine Bildbeschreibungen sollten hochwertig und für deine Zielgruppe leicht verständlich sein. Befolge beim Verfassen von Alternativtexten diese Best Practices.

1. Er sollte gut geschrieben sein. Bemühe dich, den Alternativtext in Satzform zu schreiben und die Grammatik- und Interpunktionsregeln zu befolgen. 

2. Fass dich kurz. Wir empfehlen, den Alternativtext auf weniger als 250 Zeichen zu beschränken. Konzentriere dich auf die wichtigsten kontextuellen Details, die jemand wissen muss, anstatt einfach das Bild selbst zu beschreiben.

3. Sei aussagekräftig. Gib die erforderlichen Informationen an, damit man die Absicht deines Bildes versteht. Wenn du Text verlinkst, erkläre, worauf du verlinkst: „Lies unseren Bericht“ anstelle von „Klicke hier“.

4. Nimm Rücksicht auf alternative Technologien. Denk darüber nach, wie unterstützende Technologien funktionieren. Hilfsgeräte sagen zum Beispiel „Bild von“, bevor sie den Alternativtext lesen, sodass Nutzer:innen von Screenreadern diesen Textteil in der Beschreibung nicht brauchen. 

5. Übe weiter. Mache es dir zur Gewohnheit, Alternativtext zu allen Bildern hinzuzufügen, die du veröffentlichst. Je mehr du übst, desto schneller und besser wirst du darin, Bildinhalte zu beschreiben.

Schließlich solltest du es vermeiden, KI zu verwenden, um Alternativtexte für dich zu generieren. Zu diesem Zeitpunkt identifizieren KI-Generatoren nicht immer genau, welche Informationen die Leser:innen über ein Bild wissen müssen.

Dekorativer vs. wesentlicher Inhalt

Du musst nicht unbedingt für jedes einzelne Bild einen Alternativtext auf deiner Website schreiben. Um herauszufinden, welche Bilder Alternativtext benötigen, entscheide, welche Bilder dekorativ und welche wesentlich sind.

Dekorative Inhalte sind nicht erforderlich, um die Bedeutung oder Verwendung deiner Webseite zu verstehen. Daher wird auch kein Alternativtext benötigt. Ein Abschnitts-Trennstrich braucht beispielsweise keinen Alternativtext. 

Wesentliche Inhalte sind alles, was zum Verständnis oder zur Nutzung der Seite notwendig ist. Wesentliche Bilder benötigen daher Alternativtext.

Eine einfache Möglichkeit, zwischen den beiden Bildtypen zu unterscheiden, besteht darin, dich zu fragen: „Wenn ich das von der Seite entferne, ändert sich dann die Bedeutung der Seite?“ 

Dateinamen

Verwende die Best Practices zu Bild-Alternativtexten auch für Dateinamen. Ein zugänglicher Dateiname beschreibt das zugehörige Bild und ist nicht vage oder automatisch generiert. Verwende zum Beispiel „PersonIsstTrauben.jpg“ statt „4729IMG.jpg“.

Das hat zwei zusätzliche Vorteile: Bilddateien sind einfacher für dich zu organisieren und besser für die SEO eingerichtet. Das Erscheinen in Bildsuchen ist eine weitere großartige Möglichkeit, Suchmaschinen-Traffic auf deine Website zu lenken.

Beispiele für Bild-Alternativtexte

Hinweis: Diese Anleitung ist als Ressource gedacht, um dir den Einstieg zu erleichtern, sollte aber nicht als Rechtsberatung ausgelegt oder verstanden werden. Squarespace kann dich nicht dabei beraten, wie du dafür sorgen kannst, dass deine Website bestimmten Gesetzen, Bestimmungen oder Standards zur Barrierefreiheit entspricht.

Hier sind zwei Beispiele für effektive Bild-Alternativtexte. Beachte, dass Alternativtext kontextspezifisch ist – er könnte zwar gut zu einem Szenario passen, aber nicht immer für dasselbe Foto geeignet sein, vor allem, wenn es in einem anderen Szenario verwendet wird.

Stell dir vor, dieses Foto ist in einem Artikel erschienen, in der die grundlegenden Kameratypen aufgelistet sind. In diesem Kontext könnte ein guter Alternativtext für dieses Bild folgendermaßen lauten: „Eine DSLR-Kamera und ein Objektiv in einer offenen Tragetasche.“

In diesem Zusammenhang wäre ein Beispiel für Alternativtext, der verbessert werden müsste: „Bild von einer Kamera auf grauem Hintergrund.“ 

In diesem Beispiel wird „Bild von“ verwendet, was Hilfsgeräte bereits sagen, bevor sie den Alternativtext vorlesen. Er enthält auch keine wichtigen Details über die Kamera oder andere Objekte im Bild, die für Personen nützlich wären, die etwas über Kameratypen lesen.

Ein Beispiel für einen guten Alternativtext für dieses Bild könnte sein: „Ein Set von bunten Briefumschlägen“

In einem Kontext, in dem dieses Bild dazu dient, die Seite visuell aufzulockern, ohne notwendige Informationen hinzuzufügen, kannst du darauf verzichten, einen Alternativtext für das Bild zu schreiben.

Weitere Hinweise findest du auf unserer Seite zur Barrierefreiheit

So machst du komplexe Bilder barrierefrei

Alternativtext ist zwar hilfreich und notwendig, aber es kann schwierig sein, alle benötigten Informationen in 250 Zeichen oder weniger unterzubringen. Dies gilt insbesondere für komplexere Bilder wie Diagramme, Grafiken, Infografiken und lange Videos, die möglicherweise viel längere Beschreibungen benötigen, um die wichtigsten Informationen zu vermitteln.

In diesen Fällen kannst du Folgendes tun:

• Beschreibe den Inhalt detailliert in deinem Textkörper. Schreibe eine längere Beschreibung für das Bild, die wichtige Punkte hervorhebt und sie in einen Kontext stellt. Du kannst den Alternativtext verwenden, um eine kurze Beschreibung hinzuzufügen und dann einen Absatz direkt neben oder unter dem Bild mit einer längeren Beschreibung einfügen.

• Verwende eine Bildbeschriftung. Füge deinem Bild eine sichtbare Beschriftung hinzu, die die Details und den Kontext des Bildes erklärt.

Alternativtext und Barrierefreiheit im Internet sind für deine Website unerlässlich und sollten nicht nur ein Nice-to-have sein. Je zugänglicher deine Website ist, desto mehr Besucher:innen können sie nutzen, unabhängig von ihren Umständen. 

Lies unseren vollständigen Leitfaden zur Barrierefreiheit im Internet