Wie sieht guter Alt-Text aus? Vollständiger Leitfaden zum Verfassen effektiver Alternativtexte

Grundlagen von Alt-Text verstehen

Alt-Text, auch als Alternativtext bekannt, ist beschreibender Text, der die Bedeutung eines Bildes in digitalen Inhalten vermittelt. Er dient als wichtige Brücke zwischen visuellen Inhalten und Nutzern, die auf Hilfstechnologien wie Screenreader angewiesen sind. Wenn eine Person einen Screenreader verwendet, liest die Technologie den Bildschirminhalt per Sprachausgabe vor, und bei Bildern liest sie den Alt-Text, sodass der Nutzer versteht, was das Bild vermitteln soll. Ohne korrekten Alt-Text können Nutzer von Screenreadern die in Bildern enthaltenen Informationen nicht erfassen, weshalb Alt-Text eine Anforderung in Barrierefreiheitsstandards wie Section 508 und den WCAG-Richtlinien ist.

Guter Alt-Text geht über die bloße Beschreibung des Aussehens eines Bildes hinaus—er vermittelt den Zweck und Kontext des Bildes innerhalb Ihrer Inhalte. Der Unterschied zwischen schlechtem und ausgezeichnetem Alt-Text kann sowohl die Barrierefreiheit als auch die Suchmaschinenoptimierung erheblich beeinflussen. Statt zum Beispiel „Bild eines Hundes“ zu schreiben, sollten Sie „Golden Retriever bellt in die Kamera“ oder „Hund bellt“ schreiben, je nach Kontext. Diese Spezifizität hilft Screenreader-Nutzern zu verstehen, was das Bild zeigt und welche Handlung oder welcher Zustand dargestellt wird—oft die wichtigste Information zum Verständnis des Inhalts.

Wichtige Merkmale effektiven Alt-Texts

Wirksamer Alt-Text weist mehrere wesentliche Eigenschaften auf, die ihn für Barrierefreiheit und SEO wirklich wertvoll machen. Zunächst ist guter Alt-Text prägnant und spezifisch und umfasst in der Regel ein bis zwei Sätze. Ziel ist es nicht, einen langen Absatz zu schreiben, der jedes Detail eines Bildes beschreibt, sondern die wesentlichen Informationen zu erfassen, die erklären, warum das Bild in Ihren Inhalt aufgenommen wurde. Das bedeutet, den Kontext des Bildes und die relevantesten Informationen im Zusammenhang mit dem umgebenden Text zu berücksichtigen.

Ein weiteres kritisches Merkmal ist, dass guter Alt-Text Redundanzen vermeidet. Wenn die Bildunterschrift oder der umgebende Text das Bild bereits beschreibt, sollte Ihr Alt-Text diese Informationen nicht wiederholen. Stattdessen sollte er den vorhandenen Inhalt ergänzen, indem er zusätzlichen Kontext bietet, den Screenreader-Nutzer benötigen, um den Zweck des Bildes vollständig zu verstehen. Außerdem sollte guter Alt-Text keine Formulierungen wie „Bild von“ oder „Foto von“ enthalten, da Screenreader automatisch ankündigen, dass ein Bild vorhanden ist. Es ist jedoch sinnvoll, zu spezifizieren, wenn es sich um ein Logo, eine Illustration, ein Gemälde, einen Cartoon oder ein Diagramm handelt, da diese Unterscheidungen wichtigen Kontext liefern.

Best Practices für Alt-Text je nach Bildtyp

Verschiedene Bildtypen erfordern unterschiedliche Ansätze beim Verfassen von Alt-Text. Bei Fotografien sollten Sie auf spezifische Inhalte des Bildes achten, wie Namen, Eigennamen, Orte oder Verben. Überlegen Sie, warum Sie dieses Bild ausgewählt haben und was Sie damit ausdrücken möchten. Statt zum Beispiel „Gruppe von Menschen“ zu schreiben, schreiben Sie „Gruppe junger Studenten lacht und geht auf einer baumbestandenen Allee“. Das vermittelt Screenreader-Nutzern deutlich mehr relevante Informationen.

Für Icons und Logos ist der Ansatz ein anderer. Logos sind nie dekorativ und benötigen immer Alt-Text. Sie sollten bedeutende Symbole oder Grafiken beschreiben und im Logo enthaltene Texte wortwörtlich wiedergeben. Bei Aktionsicons sollte der Alt-Text die beabsichtigte Aktion beschreiben, etwa „Syllabus-PDF herunterladen“ oder „Suche“. Wird das Icon als Link verwendet, sollte der Alt-Text beschreiben, was beim Klicken passiert, z. B. „Instagram der Harvard-Bibliothek besuchen“.

Illustrationen und kreative Grafiken erfordern einen Fokus auf die beabsichtigte Aussage des Bildes und weniger auf Details. Falls Text in der Illustration enthalten ist, etwa in einem Cartoon oder Screenshot einer Anwendung, sollten sowohl relevante visuelle Inhalte als auch der relevante Text beschrieben werden. Ein Cartoon könnte zum Beispiel folgenden Alt-Text bekommen: „Cartoon eines Geschäftsmanns hinter einem Schreibtisch, der einen Kandidaten im Anzug mit zerzaustem Haar und langem weißen Bart interviewt. Text darunter: ‘Mr. Crusoe, ich mache mir Sorgen wegen dieser 20-jährigen Lücke in Ihrem Lebenslauf.’“

Diagramme, Charts und Grafiken erfordern besondere Aufmerksamkeit, da sie oft komplexe Daten enthalten. Beginnen Sie den Alt-Text mit Begriffen wie „Kreisdiagramm“ oder „Balkendiagramm“, um die Art der Visualisierung zu benennen. Beschreiben Sie dann wichtige Daten-Trends, Zusammenhänge und andere hervorgehobene Bildbestandteile. Ist das Bild sehr detailreich und erfordert eine längere Beschreibung, geben Sie im Alt-Text eine Kurzbeschreibung an und stellen Sie unter dem Bild einen Link zur Datentabelle oder einer ausführlicheren Beschreibung bereit. Zum Beispiel: „Balkendiagramm der Veranstaltungserlöse von Montag bis Freitag mit leichtem Rückgang von Montag bis Mittwoch und starkem Anstieg zu einem Höhepunkt am Freitag.“

Häufige Fehler, die es zu vermeiden gilt

Viele Content-Ersteller machen vorhersehbare Fehler beim Schreiben von Alt-Texten, die dessen Wirksamkeit erheblich beeinträchtigen. Einer der häufigsten Fehler ist, zu kurzen und nicht relevanten Alt-Text zu schreiben. Zwar ist Kürze wichtig, aber der Alt-Text muss dennoch die wesentlichen Informationen vermitteln, die das Bild im Kontext bedeutsam machen. Ein weiterer häufiger Fehler ist, zu langen Alt-Text zu schreiben, der unnötige Details enthält, etwa die Kleidung oder das Aussehen von Personen, sofern diese nicht direkt relevant für den Inhalt sind.

Ein gravierender Fehler ist, den Alt-Text nur visuell zu beschreiben, ohne den relevanten Inhalt zu vermitteln. Wenn Sie zum Beispiel ein Bild einer Rampe für Rollstuhlfahrer haben, sollten Sie nicht „Eine Metallrampe mit einem Rollstuhlfahrer im Hintergrund“ schreiben. Besser ist: „Rollstuhlfahrer fährt eine Metallrampe für Barrierefreiheit hinauf.“ Hier steht der Zweck und die Bedeutung im Vordergrund, nicht bloß das Aussehen. Viele Autoren machen außerdem den Fehler, Informationen aus dem Haupttext im Alt-Text zu wiederholen, was Screenreader-Nutzern keinen Mehrwert bietet.

Ein weiterer wesentlicher Fehler ist die ungeprüfte Nutzung von computer- oder KI-generiertem Alt-Text. Solche automatisierten Beschreibungen vermitteln oft nicht den tatsächlichen Zweck des Bildes. Beispielsweise könnte eine KI einen Screenshot eines Formulars mit „Screenshot eines Handybildschirms“ beschreiben, was wenig hilfreich ist. Schließlich versäumen es manche Autoren, Alt-Text bei Übersetzungen anzupassen oder verwenden Dateinamen oder Pfade anstelle einer Beschreibung, was keinerlei Mehrwert für Nutzer bedeutet.

Kontext ist entscheidend: Alt-Text an die Verwendung anpassen

Das gleiche Bild kann je nach Verwendung völlig unterschiedlichen Alt-Text benötigen. Dieses Prinzip des kontextbezogenen Alt-Texts ist entscheidend für wirklich barrierefreie Inhalte. Nehmen Sie ein Bild von Hollis Hall an der Harvard University. Wird dieses Bild in einem Artikel mit dem Titel „Jetzt ist Frühling!“ verwendet, der das schöne Wetter und die Rückkehr der Luxembourg-Stühle nach Harvard Yard thematisiert, sollte der Alt-Text lauten: „Studierende entspannen und arbeiten in bunten Luxembourg-Stühlen auf dem Harvard Yard.“ Wird das identische Bild dagegen in einem Artikel mit dem Titel „Berühmte Bewohner von Hollis Hall“ verwendet, der auf die Lage von Hollis Hall eingeht, passt: „Hollis Hall, ein rotes Backsteingebäude, liegt direkt neben der offenen Grünfläche des Harvard Yard.“

Das zeigt: Wirksames Verfassen von Alt-Text erfordert Verständnis für den umgebenden Inhalt und den spezifischen Zweck des Bildes im jeweiligen Kontext. Fragen Sie sich beim Schreiben von Alt-Text immer: „Welche Information liefert dieses Bild, die für den Artikel oder die Seite relevant ist?“ Die Antwort darauf sollte Ihren Alt-Text bestimmen, nicht eine generische Beschreibung des Bildes. Dieser kontextbezogene Ansatz stellt sicher, dass Ihr Alt-Text Screenreader-Nutzern maximalen Mehrwert bietet und gleichzeitig die Relevanz für Suchmaschinen erhöht.

Weitere Vorteile über die Barrierefreiheit hinaus

Alt-Text ist zwar in erster Linie dafür gedacht, visuelle Inhalte für Menschen mit Sehbehinderung zugänglich zu machen, bietet aber zahlreiche weitere Vorteile für alle Nutzer und die Gesamtperformance Ihrer Website. Alt-Text wird von Suchmaschinen indexiert und kann die Online-Präsenz und Suchmaschinenoptimierung Ihrer Seite deutlich verbessern. Suchmaschinen nutzen Alt-Text, um Inhalt und Kontext von Bildern zu verstehen, was die Indexierung Ihrer Seiten erleichtert und Ihre Rankings für relevante Suchanfragen steigern kann.

Alt-Text wird angezeigt, wenn das Bild nicht geladen werden kann, etwa bei langsamen Internetverbindungen oder wenn Bilder durch Browsereinstellungen blockiert sind. In solchen Situationen sorgt der Alt-Text dafür, dass Nutzer dennoch die beabsichtigte Information erhalten. Zudem macht Alt-Text Inhalte für Nutzer zugänglich, denen es schwerfällt, den Sinn visueller Inhalte zu erfassen, und stellt Inhalte für technische Anwendungen wie digitale Assistenten und künstliche Intelligenz bereit. Im Jahr 2025, da KI und maschinelles Lernen weiter voranschreiten, wird präzise verfasster Alt-Text noch wichtiger, damit diese Systeme Ihre Inhalte korrekt verstehen und verarbeiten können.