Mit Alternativtexten oder Alt-Texten werden Online-Bilder und Grafiken in kurze Texte übersetzt – zum Beispiel, um deren visuelle Inhalte oder auch Funktionen, die sie auf eurer Website ausführen, zu beschreiben. Gut eingesetzte Alt-Texte machen damit die Inhalte einer Website für mehr Menschen leichter zugänglich und verbessern die Barrierefreiheit.
Wann setze ich Alt-Texte ein – Faustregel:
- Alt-Texte beschreiben Bilder, Grafiken und Icons auf Websites. Sie tragen so zu mehr Barrierefreiheit bei und können darüber hinaus für die Suchmaschinenoptimierung hilfreich sein.
- Alt-Texte sind keine Bildunterschriften. Sie werden erst mit der Nutzung von Screenreadern oder bei langen Ladezeiten auf einer Website sichtbar beziehungsweise hörbar.
- Alt-Texte braucht es nicht für reine Deko-Bilder – sondern nur, wenn mit dem Bild oder der Grafik etwas ausgesagt werden soll.
- Alt-Texte sollten kurz und prägnant den Inhalt oder die Funktion von Bildern auf den Punkt bringen.
- Alt-Texte können im Backend der Website bei dem jeweiligen Bild ergänzt werden.
Was ist barrierefreies Internet?
Von Barrierefreiheit spricht man grundsätzlich, wenn unsere alltägliche Umwelt so gestaltet ist, dass sie für alle ohne fremde Hilfe zugänglich ist.
Für den digitalen Raum bedeutet das, dass sämtliche Informationen und Funktionen so ausgelegt werden, dass möglichst alle Nutzer:innen darauf zugreifen können. Digitale Hürden müssen also vermieden werden – diese können zum Beispiel folgendermaßen aussehen:
- Menschen mit Sehschwäche können Texte mit wenig Kontrast schlecht lesen.
- Gehörlose und schwerhörige Menschen können Videos nicht verstehen, wenn es keine Untertitel oder eine Version mit Gebärdensprache gibt.
- Menschen mit Konzentrationsschwäche oder auf dem neurodivergenten Spektrum sind schnell gestresst, wenn das Design einer Website sehr komplex oder viel animiert ist.
- Nicht-Muttersprachler:innen und Menschen mit geringer Lesekompetenz können komplizierte Texte mit verschachtelten Sätzen nur schwer verstehen.
Mehr zum Thema Barrierefreiheit findet ihr in unserem Blogartikel 4 Gründe für barrierefreie Websites.
Was sind Alternativtexte & warum machen sie Webinhalte barrierefreier?
Ein Alt-Text beziehungsweise ein Alternativtext ist ein Text, der ein Bild beschreibt. Damit verbessert ihr die Zugänglichkeit für Personen, die Bilder auf Webseiten nicht sehen können. Also zum Beispiel Screenreader-Nutzer:innen oder auch Menschen mit Internetverbindungen mit geringer Bandbreite, bei denen Bilder gar nicht oder nur sehr langsam laden.
Geht eine Person mit Screenreader auf einen Beitrag, bei dem die Bilder keinen Alt-Text haben, wird das Bild entweder komplett ignoriert oder der Dateiname des Bildes vorgelesen – beispielsweise so etwas wie „/1602-01-cat-500.jpg“. Das sagt nun wenig über den Inhalt des Bildes aus, oder?
Statt dem Zahlenbrei könnte der Screenreader mit einem Alt-Text dann etwas vorlesen wie: „Eine rote Katze, die in die Ferne schaut.“ Besser, oder?
Definition Alternativtext oder kurz: Alt-Text
Alt-Texte werden als Beschreibungen von Bildern oder Grafiken auf Websites hinterlegt. Sie erklären das Dargestellte oder ordnen ein Bild thematisch ein. Der Alternativtext befindet sich quasi im Hintergrund – er wird beispielsweise vorgelesen, wenn Nutzer:innen einen Screenreader benutzen oder angezeigt, falls ein Bild nicht geladen werden kann.
Was ihr beim Schreiben von Alt-Texten beachten solltet
Beschreibt das Bild kurz und knapp
Alt-Texte können und sollten immer möglichst kurz gehalten werden. Prägnante Formulierungen sind meistens sinnvoller als ausufernde Beschreibungen über mehrere Sätze. Ein guter Richtwert ist, bis zu 155 Zeichen für einen Alt-Text zu verwenden. Besonders kurz kann die Bildbeschreibung ausfallen, wenn im Text darüber oder darunter der Inhalt des Bildes bereits ausführlich diskutiert wird.
Schreibt so, wie ihr es hören möchtet
Screenreader lesen Alternativtexte stets in einem Stück vor und machen Pausen bei einem Punkt oder Komma. Schreibt also besser ganze Sätze und verwendet Satzzeichen. Es macht wenig Sinn, einzelne Wörter einfach lose aneinander zu reihen – beim Vorlesen kann das eher nervig und störend sein. Vermeidet es auch, Texte in Großbuchstaben zu schreiben. Manche Screenreader lesen dann jeden Buchstaben einzeln vor.
Benennt bei anklickbaren Bildern deren Verlinkung oder Funktion
Oft werden Bilder und Grafiken für Verlinkungen oder Funktionen eingesetzt. Bei verlinkten Bildern ist die wichtigste Information, wohin dieser Link führt – beziehungsweise was passiert, wenn man auf den Link klickt. Daraus ergeben sich verschiedene Szenarien für Alt-Texte:
- Beim Anklicken des Bildes öffnet sich eine größere Ansicht oder eine Lightbox: Es handelt sich also um eine Bilddarstellung, bei der die restlichen Inhalte der Website in den Hintergrund gestellt werden. Der Alt-Text sollte hier neben der Beschreibung auch die Information „öffnet größere Ansicht“ enthalten.
- Beim Anklicken des Bildes startet der Download eines PDFs: Im Alt-Text kann das beispielsweise mit „Startet Download des Flyers XY“ oder „Lade den Flyer XY herunter” beschrieben werden.
- Beim Anklicken des Bildes öffnet sich eine neue Unterseite oder eine andere Website: Hier könnt ihr direkt den Link in Worte fassen, beispielsweise „Führt zum Artikel XY“. Schreibt auch immer dazu, wenn der Link zu einer anderen Website als eurer führt.
Bei Bildern oder Grafiken, die eine Funktion auslösen, ist es wichtig zu beschreiben, was diese Funktion macht. Habt ihr beispielsweise einen Pfeil am Ende der Seite, der nach oben zeigt, ist die relevante, ausgelöste Funktion „zum Seitenanfang springen“ und nicht „Pfeil, der nach oben zeigt“. Eine weitere Beschreibung des Aussehens ist nicht nötig.
Welche Informationen ihr in Alt-Texten weglassen könnt
Ob es sich um ein Bild, eine Grafik oder ein Icon handelt, müsst ihr nicht mit in den Text schreiben. Bei langsam ladenden Seiten wird das durch den Weißraum – der Platzhalter für das Bild – bereits suggeriert. Screenreader wiederum geben zum Beispiel bei Grafiken erst die Information „Grafik“ aus und darauf folgend dann den Alternativtext.
Daten zum Bildrecht oder Ähnliches gehören ebenfalls nicht in den Alt-Text. Sie sind an dieser Stelle schlicht nicht relevant.
Das Einpflegen von Alt-Texten bei WordPress und Co
Alt-Texte werden im Backend der Website eingetragen. Je nach Content Management System gibt es meist direkt dort, wo das Bild gespeichert ist, ein separates Feld, um den Alternativtext hinzuzufügen.
In WordPress können Nutzer:innen den Alt-Text in der Mediathek eintragen. Dort wird der globale Alt-Text für das Bild erstellt: Wenn das Bild mehrfach auf der Website auftaucht, wird dieser At-Text automatisch mit hinterlegt. Globale Alt-Texte können aber auch für einzelne Abbildungen individuell je Seite oder Beitrag angepasst werden, wenn ihr dort eine abweichende Beschreibung einfügen wollt. Dieser individuelle Alt-Text wird dann nur an der jeweiligen Stelle angezeigt und überschreibt den globalen Alt-Text nicht.
Wann braucht ihr keine Alt-Texte?
Alt-Texte sollen Visuelles für Menschen übersetzen, die jene Information textlich brauchen. Da nicht alle Bilder Informationen übermitteln, braucht es manchmal keine Alt-Texte. Ist beispielsweise ein Text auf dem Bild zu sehen, welcher aber auch direkt darunter steht, würde der Screenreader diesen Text doppelt vorlesen. Auch bei rein dekorativen Bildern lasst ihr Alt-Text lieber weg. Dieser lenkt dann nur vom wichtigen Seiteninhalt ab.
Bei folgenden Bildern benötigt ihr keinen Alt-Text
- darstellende Bilder zum Text, die aber selbst keine Information bieten („Eye-Candy“) – schätzt bei diesen Bildern immer selbst ein, ob eine Beschreibung im Alt-Text wirklichen Mehrwert bringen kann
- Bilder, die bereits im Text beschrieben werden
- Farbflächen oder -blöcke, die Text auflockern sollen
Kurz gesagt: Prüft immer, ob ein Bild oder eine Grafik für das Verständnis wichtig ist und wie sinnvoll ein Alt-Text für eine Person sein kann, die das Bild nicht sieht.
Wie wirken sich Alt-Texte auf die Suchmaschinenoptimierung aus?
Alt-Texte verbessern nicht nur die Barrierefreiheit von Websites, sondern können auch hilfreich für die Suchmaschinenoptimierung sein. Der Algorithmus einer Suchmaschine kann mit dem reinen Bild wenig anfangen und versteht (noch) nicht, was auf dem Bild gezeigt wird. Es braucht daher zusätzliche Informationen – wie den Alt-Text oder Dateinamen des Bildes –, die ausgelesen werden können, um das Thema und den Inhalt des Bildes zu verstehen und es besser einordnen zu können.
Wenn ihr die Alt-Texte eurer Bilder suchmaschinenoptimiert, indem ihr auch hier zentrale Keywords einbaut, können sie den relevanten Suchanfragen besser zugeordnet werden.
Wichtig ist dabei jedoch, nicht einfach wahllos Keywords zu integrieren, sondern wirklich nur dann, wenn sie für die Bildbeschreibung sinnvoll sind. Der Alt-Text kann ansonsten schnell verwirrend sein, wenn er sich gar nicht konkret auf die Bildinhalte bezieht.
Wann ihr auf Bilder-SEO verzichten könnt
Die Suchmaschinenoptimierung bei Bildern ist nicht immer unbedingt notwendig: Die entscheidende Frage ist, ob eure Zielgruppe zu eurem Thema die Google-Bildersuche überhaupt nutzt (oder die Bildersuche einer anderen Suchmaschine). Das kann zum Beispiel in den Bereichen Mode, Kunst sowie generell bei Produkten der Fall sein. Bei anderen Bereichen wie Dienstleistungen, Einrichtungen oder Themenseiten ist die Bildersuche für User meist nebensächlich.
Beispiel: Sucht eine Person nach einem Zahnarzt wird sie selten die Google-Bildersuche bemühen – sucht sie nach einem Schuh von einer bestimmten Marke, dann schon eher. Die tolle Maike von Satzgestalt hat zu dem Thema auch einen hilfreichen Instagram-Post gemacht.
Linksammlung zu Alt-Texten & barrierefreien Websites
Infos zu Alternativtexten
- Alternativtexte für Bilder sind wichtig für Barrierefreiheit und SEO
- Leitfaden zum Schreiben guter Alternativtexte
- BIK für alle: Alternativtexte für Grafiken
- Englischer Artikel darüber, wann Alt-Texte sinnvoll sind: An alt Decision Tree
Infos zu barrierefreien Websites und PDFs
- Ihr wollt herausbekommen, ob ihr gesetzlich zu einer barrierefreien Website verpflichtet seid? Wir haben dazu einen Artikel geschrieben: 4 Gründe für barrierefreie Websites & wer dazu verpflichtet ist
- Nachschlagewerk, um barrierefreie und PDF/UA konforme Dokumente zu erstellen
- Checkliste: barrierefreie PDF-Dokumente
Alt-Texte mit KI
- Dieses Tool generiert automatisch Alternativtexte (Alt-Texte) für Bilder. Es ist in vielen Sprachen verfügbar, darunter auch Deutsch.
Ihr wollt eure Website barrierefreier machen?
Wir unterstützen euch gern dabei, eure Website auf digitale Hürden zu durchleuchten und sie für möglichst alle barrierefrei zugänglich zu machen.
