Schlagwort: Content-Erstellung

Alt-Texte sind kurze Textbeschreibungen für Bilder auf einer Website. Sie werden sichtbar, wenn ein Bild nicht geladen werden kann, und unterstützen Menschen, die einen Screenreader verwenden. Gleichzeitig helfen sie dabei, den Inhalt einer Seite klarer zu strukturieren und Bilder in ihrem jeweiligen Kontext verständlich zu machen. Wer Alt-Texte richtig verwenden möchte, sollte deshalb nicht einfach beliebige Bildinformationen eintragen, sondern die Funktion des Bildes und das Ziel der jeweiligen Seite berücksichtigen.

Dieser Ratgeber zeigt, wie gute Alt-Texte formuliert werden, wann ein Bild eine Beschreibung braucht und wann ein leeres Alt-Attribut die bessere Lösung ist. Außerdem geht es um dekorative Bilder, informative Grafiken, Produktfotos, SEO, typische Fehler und praktische Prüfmethoden.

Was ist ein Alt-Text?

Der Alt-Text ist ein alternatives Textattribut eines Bildes im HTML. Er wird meist mit alt angegeben, zum Beispiel:

<img src="beispielbild.jpg" alt="Person liest ein Buch am Fenster">

Der Text erfüllt mehrere Aufgaben. Er vermittelt den wesentlichen Bildinhalt, wenn das Bild nicht angezeigt werden kann. Screenreader können ihn vorlesen und damit den visuellen Inhalt zugänglich machen. Auch Suchmaschinen können den Text als zusätzlichen Kontext nutzen. Der Alt-Text ist jedoch keine Bildunterschrift und keine vollständige Bildbeschreibung für jede denkbare Einzelheit.

Entscheidend ist immer der Zusammenhang. Dasselbe Foto kann auf einer Startseite, in einem Ratgeber oder auf einer Produktseite unterschiedliche Alt-Texte benötigen. Ein Bild mit einer Person am Schreibtisch könnte auf einer Karriere-Seite mit „Mitarbeiterin arbeitet an einem Laptop im Büro“ ausreichend beschrieben sein. In einem Artikel über ergonomisches Arbeiten wäre dagegen vielleicht die Sitzhaltung oder die Position des Bildschirms relevant, sofern diese im Bild tatsächlich erkennbar ist.

Warum gute Alt-Texte wichtig sind

Ein sinnvoller Alt-Text verbessert vor allem die Verständlichkeit einer Seite. Menschen, die Bilder nicht sehen können oder sie bewusst nicht laden, erhalten eine textliche Alternative. Das ist ein wichtiger Bestandteil zugänglicher digitaler Inhalte.

Darüber hinaus helfen Alt-Texte auch in anderen Situationen:

• Fehlende Bilder: Wenn eine Datei nicht geladen wird, bleibt die Bildfunktion durch den Text nachvollziehbar.
• Langsame Verbindungen: Der Inhalt eines Bildes kann verständlich bleiben, bevor die Grafik vollständig geladen ist.
• Klare Inhaltsstruktur: Redakteurinnen und Redakteure prüfen beim Formulieren, welchen Beitrag ein Bild tatsächlich leistet.
• Bildersuche: Suchmaschinen können den Zusammenhang zwischen Bild und Seitenthema besser einordnen, wenn die Beschreibung präzise und natürlich formuliert ist.
• Rechtliche und organisatorische Qualität: Eine durchdachte Bildauszeichnung gehört zu einer sorgfältigen, zugänglichen Website-Pflege.

Ein Alt-Text ist allerdings kein Platz für eine Liste von Suchbegriffen. Auch ersetzt er keine gute Seitenstruktur, keine verständlichen Überschriften und keine technische Barrierefreiheitsprüfung. Er ist ein einzelner, aber wichtiger Baustein.

Die wichtigste Frage: Welche Funktion hat das Bild?

Die Übersicht macht sichtbar, dass nicht jedes Bild auf dieselbe Weise beschrieben wird. Besonders der Unterschied zwischen dekorativen und funktionalen Bildern hilft bei einer schnellen redaktionellen Entscheidung.

Bevor ein Alt-Text geschrieben wird, sollte die Funktion des Bildes geklärt werden. Eine einfache Entscheidungsfrage lautet: Würde der Inhalt oder die Handlung der Seite ohne dieses Bild unverständlich oder weniger nützlich?

Je nach Antwort lassen sich Bilder grob in vier Gruppen einteilen:

Informative Bilder

Ein informatives Bild vermittelt eine relevante Tatsache, zeigt einen Gegenstand oder veranschaulicht einen Inhalt. Dazu gehören beispielsweise ein Foto einer Sehenswürdigkeit, ein Bild eines Werkzeugs oder eine Darstellung eines typischen Arbeitsschritts. Der Alt-Text nennt die entscheidende Information möglichst direkt.

Beispiel: alt="Handwerkerin schleift eine Holzfläche mit einem Exzenterschleifer"

Dekorative Bilder

Dekorative Bilder verbessern die Gestaltung, tragen aber keine eigene Information bei. Dazu können abstrakte Farbflächen, rein visuelle Muster oder ein stimmungsvolles Hintergrundmotiv gehören, dessen Inhalt für die Aussage der Seite nicht benötigt wird. Solche Bilder sollten für Screenreader verborgen werden. Im HTML wird dafür ein leeres Alt-Attribut verwendet:

<img src="muster.png" alt="">

Wichtig ist der Unterschied zwischen einem leeren Alt-Attribut und einem fehlenden Alt-Attribut. Das leere Attribut signalisiert ausdrücklich, dass das Bild dekorativ ist. Fehlt die Angabe vollständig, kann ein assistives Hilfsmittel versuchen, den Dateinamen oder andere Informationen auszugeben.

Funktionale Bilder

Ein Bild kann auch eine Bedienfunktion haben, etwa als Icon in einem Link oder als grafische Schaltfläche. Dann sollte der Alt-Text nicht das Aussehen beschreiben, sondern die Aktion oder das Ziel. Bei einem Lupen-Symbol ist „Suche öffnen“ meist hilfreicher als „Lupe“. Bei einem Logo, das auf die Startseite verlinkt, kann „Startseite“ sinnvoller sein als eine ausführliche Beschreibung des Logos.

Komplexe Bilder

Diagramme, Karten, Ablaufgrafiken und Infografiken enthalten häufig mehr Informationen, als in einen kurzen Alt-Text passen. Der Alt-Text sollte dann das Thema und die zentrale Aussage knapp zusammenfassen. Die ausführlichen Daten gehören in den umgebenden Text, in eine Tabelle oder in eine separate zugängliche Erläuterung.

Beispiel: alt="Balkendiagramm zum monatlichen Stromverbrauch; der höchste Verbrauch fällt im Januar an"

Alt-Texte richtig formulieren: Eine praktische Methode

Eine gute Beschreibung muss nicht jedes Detail nennen. Sie sollte die Information liefern, die eine sehende Person aus dem Bild im jeweiligen Seitenkontext entnehmen soll. Die folgenden Schritte helfen dabei.

1. Den Zweck des Bildes bestimmen

Fragen Sie zuerst, warum das Bild auf der Seite steht. Soll es einen Gegenstand zeigen, einen Vorgang erklären, eine Stimmung vermitteln, zu einer Handlung auffordern oder nur den Text auflockern? Diese Entscheidung legt fest, welche Informationen in den Alt-Text gehören.

2. Das Wesentliche auswählen

Beschreiben Sie die Merkmale, die für die Aussage relevant sind. Bei einer Produktabbildung können Produkttyp, Modellmerkmal und sichtbare Variante wichtig sein. Bei einem Foto für einen Reiseartikel können Ort, Landschaft oder Aktivität im Vordergrund stehen. Nebensächliche Details sollten entfallen.

3. Natürlich und konkret schreiben

Ein guter Alt-Text klingt wie ein normaler kurzer Satz oder eine knappe Wortgruppe. Vermeiden Sie unklare Formulierungen wie „schönes Bild“ oder „interessante Grafik“. Nennen Sie stattdessen, was erkennbar ist. „Roter Rucksack liegt neben einer Wanderkarte“ ist konkreter als „Ausrüstung für eine Wanderung“.

4. Den Kontext einbeziehen

Ein Alt-Text muss nicht wiederholen, was die Überschrift oder der Fließtext bereits eindeutig sagen. Umgekehrt sollte er eine wichtige Bildinformation nicht auslassen, nur weil das Bild für sich betrachtet verständlich wirkt. Prüfen Sie, was beim Vorlesen der Seite tatsächlich gebraucht wird.

5. Auf unnötige Einleitungen verzichten

In den meisten Fällen muss der Text nicht mit „Bild von“ oder „Foto von“ beginnen. Screenreader kündigen Bilder häufig bereits als solche an. Eine Ausnahme kann sinnvoll sein, wenn die Bildart selbst relevant ist, etwa bei einem „Diagramm“ oder einer „Karte“. Die technische Ausgabe hängt jedoch vom verwendeten Hilfsmittel und der Website ab.

6. Nach dem Schreiben kürzen

Lesen Sie den Alt-Text einmal ohne das Bild. Bleibt die entscheidende Information erhalten? Gibt es Wörter, die nur wiederholen, was unmittelbar davor steht? Eine kürzere, präzise Beschreibung ist oft hilfreicher als eine überladene Aufzählung.

Beispiele für gute und schlechte Alt-Texte

Die folgenden Beispiele zeigen, wie sich Funktion und Kontext auf die Formulierung auswirken.

Situation	Weniger hilfreich	Passender Alt-Text
Foto eines Fahrrads	Fahrrad Bild Fahrrad kaufen	Blaues Trekkingrad mit Gepäckträger vor einer Hauswand
Rezeptfoto	Leckeres Essen	Schale mit cremiger Kürbissuppe, darüber geröstete Kerne
Suchsymbol als Link	Lupe	Suche öffnen
Dekoratives Muster	Modernes abstraktes Muster	Leeres Alt-Attribut
Infografik	Infografik Daten	Infografik zeigt drei Schritte vom Entwurf bis zur Veröffentlichung eines Artikels

Die Beispiele sind keine starren Vorlagen. Ein Fahrradfoto auf einer Produktseite benötigt unter Umständen die genaue Modellbezeichnung. Auf einer Seite über Fahrradsicherheit könnte dagegen ein sichtbares Merkmal wie eine eingeschaltete Beleuchtung wichtiger sein. Der Alt-Text wird also nicht isoliert, sondern für eine konkrete Kommunikationsaufgabe geschrieben.

Alt-Texte für verschiedene Bildarten

Produktfotos

Bei Produktfotos sollten die Informationen genannt werden, die eine Auswahl oder Identifikation unterstützen. Dazu können Produktart, Farbe, Ausführung und ein wesentliches sichtbares Merkmal gehören. Eine lange Marketingbeschreibung gehört normalerweise nicht in den Alt-Text. Technische Daten sollten dort stehen, wo sie auch für andere Besucherinnen und Besucher zugänglich sind.

Beispiel: alt="Schwarze Trinkflasche aus Edelstahl mit silbernem Drehverschluss"

Porträts und Personenfotos

Beschreiben Sie nur personenbezogene Merkmale, die für den Kontext relevant sind und aus dem Bild zuverlässig hervorgehen. Bei einem Porträt kann der Name im Alt-Text stehen, wenn die Person im Seiteninhalt eindeutig identifiziert wird und diese Information erforderlich ist. Vermeiden Sie spekulative Aussagen über Alter, Gefühle, Herkunft oder andere Eigenschaften.

Logos

Ein Logo sollte den Namen der Organisation oder Marke wiedergeben, sofern dieser Inhalt relevant ist. Wenn das Logo als Link zur Startseite dient, kann das Linkziel die entscheidende Information sein. Eine doppelte Ausgabe von Markenname und „Startseite“ sollte vermieden werden, wenn der umgebende Linktext diese Informationen bereits enthält.

Diagramme und Datenvisualisierungen

Bei einem Diagramm sollte der Alt-Text die zentrale Aussage zusammenfassen. Wer die Daten vollständig benötigt, sollte sie zusätzlich als HTML-Tabelle oder als gut zugänglichen Fließtext erhalten. Eine Grafik allein sollte nicht die einzige Stelle sein, an der wichtige Zahlen oder Vergleiche stehen.

Schaltflächen und Icons

Bei funktionalen Bildern zählt die Aufgabe. Ein Papierkorb-Icon kann „Eintrag löschen“ bedeuten, ein Pfeil „Nächster Schritt“ und ein Drucker „Seite drucken“. Die Formulierung sollte zur tatsächlichen Funktion passen. Wenn neben dem Icon bereits ein sichtbarer Text steht, kann das Bild dekorativ sein und ein leeres Alt-Attribut erhalten.

SEO und Alt-Texte: Was sinnvoll ist

Alt-Texte können Suchmaschinen zusätzlichen Kontext zu einem Bild geben. Das bedeutet jedoch nicht, dass jedes Bild mit dem Hauptkeyword versehen werden sollte. Suchmaschinenoptimierung ist dann sinnvoll, wenn sie mit einer zutreffenden Beschreibung übereinstimmt.

Wenn der Artikel das Thema „Alt-Texte richtig verwenden“ behandelt, kann ein passender Alt-Text beispielsweise ein Bild von „Redakteurin ergänzt den Alt-Text eines Website-Bildes im Content-Management-System“ beschreiben. Ein beliebiges Foto mit dem Keyword „Alt-Texte richtig verwenden“ zu versehen, wäre dagegen irreführend.

• Beschreiben Sie das Bild wahrheitsgemäß.
• Verwenden Sie das Hauptkeyword nur, wenn es zum Bild und Kontext passt.
• Nutzen Sie Synonyme und natürliche Formulierungen, statt dieselbe Phrase zu wiederholen.
• Füllen Sie keine dekorativen Bilder mit Suchbegriffen.
• Verwechseln Sie Alt-Texte nicht mit Dateinamen, Bildunterschriften oder Metadaten.

Ein guter Alt-Text kann die Auffindbarkeit eines Bildes unterstützen, sein primärer Zweck bleibt aber die verständliche Informationsvermittlung. Nutzerfreundlichkeit und sachliche Genauigkeit haben Vorrang vor einer möglichst hohen Keyword-Dichte.

Typische Fehler und wie sie sich vermeiden lassen

Keyword-Stuffing

Eine Kette aus Suchbegriffen wirkt unnatürlich und beschreibt das Bild häufig nicht. Schreiben Sie stattdessen einen Satz, den Sie einer Person beim Vorlesen tatsächlich zumuten würden.

Zu allgemeine Aussagen

„Bild“, „Foto“ oder „Grafik“ liefern kaum hilfreiche Informationen. Besser ist eine konkrete Beschreibung des relevanten Inhalts.

Zu viele Details

Eine vollständige visuelle Inventarliste kann den eigentlichen Inhalt verdecken. Fragen Sie sich, welche Information die Seite ohne das Bild verlieren würde.

Der Dateiname als Alt-Text

Dateinamen wie „IMG_4821.jpg“ oder „produkt-neu-final2.png“ sind keine sinnvollen Beschreibungen. Sie können zwar organisatorisch nützlich sein, helfen beim Verstehen des Bildes aber nicht.

Doppelte Informationen

Wenn eine Bildunterschrift direkt neben dem Bild bereits exakt beschreibt, was zu sehen ist, kann ein identischer Alt-Text zu einer unnötigen Wiederholung führen. Prüfen Sie, ob der Alt-Text einen zusätzlichen, relevanten Beitrag leistet.

Dekorative Bilder werden nicht erkannt

Ein Bild ohne sichtbare Informationsfunktion sollte nicht mit einer künstlichen Beschreibung versehen werden. Das leere Alt-Attribut verhindert, dass dekorative Elemente den Lesefluss mit unnötigen Ansagen unterbrechen.

Wichtige Inhalte stehen nur im Bild

Wenn ein Bild Text, Anweisungen oder zentrale Daten enthält, reicht ein kurzer Alt-Text möglicherweise nicht aus. Der Inhalt sollte zusätzlich als normaler, zugänglicher Text bereitgestellt werden. Das ist auch für Menschen hilfreich, die das Bild zwar sehen, aber den Text darauf schlecht lesen können.

Alt-Texte im Redaktionsprozess organisieren

Alt-Texte sollten nicht erst am Ende eines Projekts nebenbei ergänzt werden. Sinnvoller ist ein fester Ablauf bei der Bildauswahl und Veröffentlichung.

1. Bildziel festlegen: Notieren Sie, welche Information oder Funktion das Bild auf der Seite erfüllt.
2. Bild auswählen: Prüfen Sie, ob das Motiv die gewünschte Aussage tatsächlich unterstützt.
3. Alt-Text formulieren: Schreiben Sie eine sachliche Beschreibung passend zum Seitenkontext.
4. Bildunterschrift trennen: Entscheiden Sie, ob zusätzliche Erläuterungen sichtbar unter dem Bild benötigt werden.
5. Darstellung prüfen: Kontrollieren Sie die Ausgabe auf Desktop und mobilen Geräten sowie bei deaktivierten Bildern.
6. Mit Screenreader oder Fachprüfung testen: Bei wichtigen Angeboten sollte zusätzlich eine qualifizierte Barrierefreiheitsprüfung erfolgen.

Für Teams kann eine kurze redaktionelle Leitlinie helfen. Sie sollte unter anderem festhalten, wie dekorative Bilder ausgezeichnet werden, welche Produktinformationen erforderlich sind und wer komplexe Grafiken prüft. Die Regeln sollten nicht nur technisch, sondern anhand echter Seitentypen erklärt werden.

Eine kompakte Checkliste

Mit diesen Fragen lässt sich ein Alt-Text schnell prüfen:

• Welche Funktion hat das Bild auf dieser konkreten Seite?
• Welche Information ist für das Verständnis wirklich relevant?
• Ist die Beschreibung sachlich, konkret und leicht verständlich?
• Vermeidet der Text unnötige Einleitungen, Wiederholungen und Werbung?
• Wird das Hauptkeyword nur verwendet, wenn es natürlich zum Bild passt?
• Ist ein leeres Alt-Attribut sinnvoll, weil das Bild rein dekorativ ist?
• Stehen wichtige Daten oder Texte aus dem Bild zusätzlich im HTML oder Fließtext?
• Passt der Alt-Text zur Bildunterschrift, zum Linkziel und zur umgebenden Überschrift?

Eine solche Checkliste ersetzt keine umfassende Prüfung der Website. Sie hilft aber, häufige redaktionelle Fehler im Alltag zu vermeiden und die Qualität von Bildinhalten gleichmäßiger zu gestalten.

FAQ

Wie lang sollte ein Alt-Text sein?

Er sollte so kurz wie möglich und so ausführlich wie nötig sein. Für ein einfaches Foto genügt oft eine knappe Wortgruppe. Bei einer komplexeren Darstellung ist eine kurze Kernaussage sinnvoll; weiterführende Informationen gehören in den umgebenden Text oder eine zugängliche Datendarstellung. Eine starre Zeichenlänge ist weniger wichtig als Relevanz und Verständlichkeit.

Muss jedes Bild einen Alt-Text haben?

Jedes Bild sollte technisch korrekt ausgezeichnet sein. Für informative oder funktionale Bilder ist eine passende Beschreibung erforderlich. Rein dekorative Bilder erhalten in der Regel ein leeres Alt-Attribut, damit sie von Screenreadern übersprungen werden können.

Sollte der Alt-Text mit „Bild von“ beginnen?

Meistens ist das nicht notwendig. Assistive Technologien geben häufig bereits aus, dass ein Bild folgt. Eine Ausnahme kann vorliegen, wenn die Bildart selbst wichtig ist, zum Beispiel bei einer Karte, einem Diagramm oder einer Illustration.

Wie werden Logos beschrieben?

In der Regel wird der relevante Name des Unternehmens, Vereins oder Projekts genannt. Ist das Logo zugleich ein Link, sollte die Beschreibung oder der Linktext das Ziel verständlich machen. Steht der Name bereits als sichtbarer Linktext daneben, kann das Logo dekorativ behandelt werden.

Kann der Alt-Text für SEO mit Keywords gefüllt werden?

Nein. Ein Alt-Text sollte zuerst das Bild korrekt beschreiben. Ein Keyword ist nur dann sinnvoll, wenn es die Bildbeschreibung natürlich ergänzt. Wiederholungen oder Suchbegriff-Listen verschlechtern die Verständlichkeit und können irreführend sein.

Was ist bei Bildern mit Text zu beachten?

Der wesentliche Text sollte nicht ausschließlich im Bild stehen. Geben Sie ihn zusätzlich als HTML-Text aus, wenn er für das Verständnis oder eine Handlung wichtig ist. Der Alt-Text kann die Kernaussage zusammenfassen, ersetzt aber nicht automatisch den vollständigen Inhalt.

Wie beschreibt man eine komplexe Infografik?

Beginnen Sie mit Thema und zentraler Aussage. Ergänzen Sie die vollständigen Werte, Beziehungen oder Handlungsschritte in einer zugänglichen Tabelle oder Textbeschreibung. So bleibt die Information auch dann nutzbar, wenn ein kurzer Alt-Text nicht alle Details aufnehmen kann.

Wer sollte Alt-Texte prüfen?

Die erste Prüfung kann durch die redaktionell verantwortliche Person erfolgen. Bei wichtigen, komplexen oder viel genutzten Websites ist zusätzlich eine qualifizierte Barrierefreiheitsprüfung sinnvoll. Besonders hilfreich ist eine Prüfung mit realen Nutzungssituationen und assistiven Technologien.

Fazit: Alt-Texte als Teil guter Inhaltsqualität

Alt-Texte richtig zu verwenden bedeutet nicht, jedes Bild möglichst ausführlich zu beschreiben. Entscheidend sind Bildfunktion, Seitenkontext und die Information, die ohne visuelle Wahrnehmung erhalten bleiben soll. Informative Bilder brauchen eine präzise Beschreibung, funktionale Bilder eine klare Angabe ihrer Aktion und dekorative Bilder meist ein leeres Alt-Attribut.

Wer Alt-Texte sachlich formuliert, wichtige Bildinhalte zusätzlich als Text bereitstellt und die Ergebnisse regelmäßig prüft, schafft verständlichere und zugänglichere Websites. SEO kann dabei unterstützend wirken, sollte aber nie auf Kosten der Genauigkeit oder der Nutzerfreundlichkeit gehen.