Schließen Sie Ihre Augen. Stellen Sie sich vor, jemand liest eine Website für Sie laut vor. Stellen Sie sich nun vor, dass einige dieser Sätze keinen Sinn ergeben, weil sie zu vage formuliert oder ganze Wörter weggelassen wurden.

Das Durchsuchen einer Website mit Hilfe von Hilfstechnologien, wie z.B. Screenreader, basiert auf exakten Überschriften, Beschriftungen und Tags, um Inhalte richtig wiederzugeben und ein vollständiges Bild zu vermitteln. Alt-Texte (oder Alt-Tags) sind dabei ein Bestandteil, um digitale Barrierefreiheit auf Ihre Website zu integrieren.

Ein Alt-Text beschreibt ein Bild. Diese Texte sollten dementsprechend deskriptiv, informativ und präzise sein. Gut formulierte Alt-Text sollten ein Bild genau und anschaulich beschreiben.

In der Regel sollte jedes Bild auf Ihrer Website einen Alt-Text besitzen – außer das Bild erfüllt rein dekorative Zwecke. Dazu werden wir im folgenden Abschnitt noch weitere Details bereitstellen. Wenn Sie erst seit Kurzem mit Alt-Texten arbeiten und sich zunächst mit den Grundlagen bekannt machen möchten, könne Sie gerne unser Siteimprove Help Center besuchen – dort erhalten Sie wichtige Tipps und Hilfestellungen.

Wenn Sie bereits fortgeschrittener sind, haben wir in diesem Blogpost weitere spezifische Tipps, um Alt-Texte noch besser und professioneller zu gestalten.

Überlegen Sie welchen Zweck ein Bild erfüllt

Bilder sind dazu da, Geschichten zu erzählen, Inhalte zu veranschaulichen oder Informationen dazustellen. Überlegen Sie welchen Zweck Ihr Bild erfüllen soll. Erweitert Ihr Bild den Inhalt eines Artikels? Wenn ja, überlegen Sie, wie eine solche Ergänzung in Wort fassen könnten.

Wenn ein Bild Informationen vermittelt, die Sie ohne Anschauen des Bildes nicht erhalten würden, dann muss der Alt-Text diese Inhalte wiedergeben. Denken Sie daran, dass Alt-Text als direkter, schriftlicher Ersatz für ein Bild dienen.

Betrachten wir als Beispiel die Website einer Universität. Die Seite "Studentenleben" enthält ein Foto von Studenten, die eine Gruppenarbeit bearbeiten. Ohne das Bild zu sehen, beschreibt der Alt-Text: " Studenten mit Notebooks". Diese Angabe gibt den Zweck des Bildes nicht vollständig wieder.

Genauer wäre die Beschreibung: Das aktuelle Bild zeigt drei Studenten, die an einem Picknicktisch sitzen und gemeinsam an einer Hausaufgabe arbeiten. In diesem Fall könnte eine bessere Beschreibung lauten: "drei Studenten bearbeiten gemeinsam eine Hausaufgabe im Freien". Der Zweck dieses Bildes ist es, ein Bild vom Campusleben und einer entspannten Studienatmosphäre dazustellen, weshalb eine extreme Vereinfachung des Bildes in der Beschreibung des Alt-Textes den eigentlichen Zweck verfehlt.

Three students collaborating outsideThree students collaborating outside

Beschreiben Sie, wer, wo und was das Bild veranschaulicht

Beantworten Sie die Frage: „Wer tut was wo?“. Wenn es eine relevante Farbe im Bild vorkommt, erwähnen Sie diese. Der Alt-Text, der zum Beispiel beschreibt, dass "eine feine Dame trägt eine rote Designer Handtasche" trägt, ist genauer und präziser als eine Beschreibung wie: "Frau mit Tasche".

Machen Sie Ihre Formulierungen präzise und informativ. Vermeiden Sie es, "Bild von" oder "Darstellung von" zu schreiben, denn Screenreader melden ein Bild automatisch als Bild. Ein alternativer Text, der als "Bild eines Apfels" formuliert ist, wird deshalb von einem Bildschirmleser als "Bild, Bild eines Apfels" vorgelesen. Wenn es sich bei dem Bild um eine Illustration oder eine technische Zeichnung mit wichtigen Informationen handelt, ist es in Ordnung, dies anzugeben. Generell sollten Alt-Texte nicht verwendet werden, um irrelevante Details zu beschreiben.

Technical drawing of male and female formsTechnical drawing of male and female forms

Stellen Sie das Bild in den jeweiligen Kontext

Verdeutlichen Sie sich den Kontext, in dem ein Bild steht. Eine Website mit Inhalten zu Social Media-Tipps kann zum Beispiel Abbildungen eines Veröffentlichungsplans enthalten. Schreiben Sie den Alt-Text so, dass die Beziehung des Bildes zum Kontext verdeutlicht wird. Die Erstellung von Alt-Texten zum Lesen von "Kalender" ist weniger wertvoll als die Beschreibung des Bildes als "Social Media Kalender".

Social media calendar

Verwenden Sie Keywords — sofern diese sinnvoll sind

Beziehen Sie nur wichtige Keywords mit ein, wenn diese im Bezug auf den Kontext sinnvoll sind. Suchmaschinen durchsuchen Inhalte Ihrer Seiten nach Keywords - einschließlich Ihrer Alt-Texte. Das bedeutet, dass es Sinn macht ein Ziel-Keyword hinzuzufügen, sofern dieses korrekt und relevant ist. Siteimprove SEO hilft Ihnen, die richtigen Keywords auszuwählen. Optimieren Sie also diese Alt-Tags, um ihr SEO Ranking zu verbessern.

Optimieren Sie diese Alt-Tags, wenn es sinnvoll ist, einen Schub in Ihren Suchmaschinenrankings zu erhalten.

Gestalten Sie beschreibende Ziel-Links

Sollte das Bild als Link dienen, beschreiben Sie, wohin dieser Link führt. In diesem Fall sollte Ihr Alt-Text den Zweck und das Ziel des Bildes und nicht das Bild selbst beschreiben.

Lassen Sie Beschreibungen für dekorative Bilder weg

Wenn ein Bild einen rein dekorativen Zweck erfüllt, geben Sie am besten keine Beschreibung an. Lassen Sie jedoch ein leeres Alt-Textfeld (alt=""). Screenreader ignorieren diese Tags und springen zum nächsten relevanten Inhalt.

Bleiben Sie präzise

Lange Alt-Texte können zu einer schlechten User Experience für Nutzer von Screenreader führen. Halten Sie deshalb Beschreibungen so präzise wie möglich - aber liefern Sie dennoch ein vollständiges Bild.

Wir hoffen, dass wir Ihnen einen guten Überblick über mögliche Strategien für die Erstellung von guten Alt-Text geben konnten. Vergessen Sie dabei nicht, einige Fragen immer im Hinterkopf zu behalten: Beschreibt und vermittelt mein Text genau das, was das Bild darstellt? Ist der Inhalt kurz und auf den Punkt gebracht? Wenn Sie die Augen schließen, während der Text laut vorgelesen wird, würden Sie dann ein gutes Verständnis dafür bekommen, was es darstellt?

Bilder sind aus einer Vielzahl von Gründen wertvoll: erfolgreichere SEO (Keywords), umfangreichere User Experience, genauere Informationen und verbesserte Barrierefreiheit.

Wenn Sie Zeit damit verbringen, Ihre Bilder sorgfältig zu erstellen oder zu gestalten, um Besucher anzusprechen, warum sollten Sie diese Bilder für 20% der Besucher Ihrer Website "unsichtbar" machen? Stellen Sie deshalb sicher, dass alle Besucher den gesamten Inhalt Ihrer Website erhalten können und schreiben Sie gute und erfolgreiche Alt-Texte.