Alt-Text-Länge: Wie lang sollte eine Beschreibung sein?

TL;DR: Für Alt-Texte gibt es keine allgemeine 125-Zeichen-Regel. Sie sollten so kurz wie möglich und so lang wie nötig sein, um die Funktion des Bildes im Kontext zu ersetzen. Ein einfaches informatives Bild braucht oft einen knappen Satz. Funktionale Bilder beschreiben die Handlung. Dekorative Bilder benötigen meist ein leeres Alt-Attribut. Komplexe Diagramme brauchen eine kurze Kennzeichnung und Details im nahen Text.

Die Länge von Alt-Texten wird häufig auf eine Zahl reduziert, doch Barrierefreiheit funktioniert nicht so. Eine Beschreibung mit zehn Wörtern kann für ein dekoratives Bild zu lang und für ein Diagramm viel zu kurz sein. Der richtige Text hängt davon ab, warum das Bild erscheint und was eine Person ohne das Bild verpassen würde.

Dieser Leitfaden erklärt Alt-Texte für informative, funktionale, dekorative und komplexe Bilder. Er behandelt auch häufige Fehler wie Keyword-Stuffing, wiederholte Bildunterschriften und Beschreibungen, die sichtbare Details aufzählen, ohne die Funktion zu vermitteln. Ziel ist ein nützlicher Ersatztext, kein perfekter Zeichenwert.

Formulieren Sie die Beschreibung im Kontext und prüfen Sie die Länge mit dem Zeichenzähler. Das Zählen kann einen überladenen Text zeigen, darf aber nie dazu zwingen, Informationen zu löschen, die zum Verständnis der Seite erforderlich sind.

Wie lang sollte ein Alt-Text sein?

Ein Alt-Text sollte so kurz wie möglich und so lang wie nötig sein, um die Funktion des Bildes zu vermitteln. Ein knapper Satz reicht oft für ein einfaches informatives Bild. Ein funktionales Symbol benötigt vielleicht nur wenige Wörter. Ein komplexes Diagramm braucht meist ein kurzes Attribut und eine längere Erklärung an anderer Stelle.

Es gibt keine allgemeine HTML- oder WCAG-Höchstgrenze von 125 Zeichen. Diese Zahl ist eine praktische Empfehlung mancher Teams und älterer Werkzeuge, keine Regel, nach der längerer Text automatisch unzugänglich wäre.

Lesen Sie die Seite ohne Bild und fragen Sie, welche Information fehlt. Schreiben Sie nur diesen Ersatz. Wird die Beschreibung zu einem Absatz, verschieben Sie die Details in sichtbaren Fließtext, damit mehr Menschen sie nutzen können.

Was sollte ein Alt-Text beschreiben?

Beschreiben Sie die Funktion des Bildes und die Information, die es in diesem konkreten Kontext ergänzt. Listen Sie nicht jedes sichtbare Objekt auf, wenn die Details unwichtig sind. Dasselbe Foto kann auf einer Nachrichtenseite, Produktseite oder in einem Profil einen anderen Alt-Text benötigen.

Das W3C verlangt für nicht textliche Inhalte eine Textalternative mit gleichwertigem Zweck, mit Ausnahmen etwa für Dekoration. Sein Entscheidungsbaum für Bildalternativen hilft bei der Wahl zwischen Beschreibung, Funktionsbezeichnung, Erklärung im Umfeld oder leerem Alt-Attribut.

Beginnen Sie nicht immer mit „Bild von“ oder „Foto von“, außer das Medium selbst ist wichtig. Screenreader und das umgebende Markup erkennen den Inhalt meist bereits als Bild.

Informative, funktionale und dekorative Bilder

Ordnen Sie das Bild vor dem Schreiben ein. Die Kategorie entscheidet, ob der Text Inhalt beschreiben, eine Handlung erklären oder leer bleiben soll.

• Informative Bilder: vermitteln Sie die ergänzte Tatsache oder Bedeutung. Beispiel: „Rotes Fahrrad neben dem Bahnhofseingang.“
• Funktionale Bilder: beschreiben Sie Handlung oder Ziel. Eine Lupe als Schaltfläche braucht „Suchen“, nicht „Lupe“.
• Dekorative Bilder: verwenden Sie in HTML ein leeres Alt-Attribut, wenn das Bild keine Information ergänzt und ignoriert werden soll.
• Bild mit Text: geben Sie die wesentlichen Wörter an, falls sie nicht als echter Text in der Nähe vorhanden sind.
• Logo: nennen Sie die Organisation, wenn das Logo diese Information vermittelt. In einem Home-Link kann der Text „Firmenname, Startseite“ lauten.

Wiederholen Sie die Bildunterschrift nicht Wort für Wort. Wiederholung verlängert die Ausgabe ohne neue Bedeutung. Verwenden Sie den Textvergleich, um Bildunterschrift und Alt-Text auf Duplikate zu prüfen.

Wie schreiben Sie Alt-Text für Diagramme und komplexe Bilder?

Nutzen Sie ein kurzes Attribut zur Bezeichnung des Diagramms und seiner Kernaussage. Stellen Sie wichtige Daten, Beziehungen oder Abläufe im nahen Text bereit. Komplexe Informationen passen selten gut in ein einziges langes Attribut. Sichtbare Beschreibungen helfen auch Menschen mit Sehschwäche oder kognitiven Einschränkungen.

Bei einem Liniendiagramm nennen Sie Thema und Haupttrend: „Die monatlichen Supportanfragen stiegen von 120 im Januar auf 210 im Juni.“ Ergänzen Sie eine Datentabelle oder einen Absatz, wenn genaue Monatswerte wichtig sind.

Beschreiben Sie bei Diagrammen die Abfolge oder Beziehung, auf die sich die Seite stützt. Nennen Sie nicht jede Form, Pfeilfarbe oder Position, wenn sie die Bedeutung nicht verändert. Die Lesbarkeitsanalyse hilft, eine lange sichtbare Beschreibung zu vereinfachen, ohne wichtige Schritte zu löschen.

Häufige Fehler bei Alt-Texten

Schlechter Alt-Text ist oft nicht zu lang oder zu kurz. Er ist irrelevant, wiederholt sich oder wurde für Suchmaschinen statt für Menschen geschrieben.

• Dateinamen wie „IMG_2048.jpg“ verwenden.
• Jede Beschreibung mit „Bild von“ beginnen.
• Bildunterschrift, Überschrift oder nahen Absatz wiederholen.
• Produkt-Keywords einfügen, die das Bild nicht vermittelt.
• Farbe oder Position ohne Bedeutung beschreiben.
• Dekorativen Bildern eine gesprochene Beschreibung geben.
• Leeren Alt-Text nutzen, wenn das Bild die einzige Bezeichnung eines Links oder Buttons ist.

Bereinigen Sie kopierte Beschreibungen mit dem Leerzeichen-Entferner, damit unerwünschte Zeilenumbrüche und unsichtbare Formatierung nicht in das CMS-Feld gelangen.

Wie prüfen Sie Alt-Text vor der Veröffentlichung?

Bewerten Sie das Bild im wirklichen Seitenkontext. Bestimmen Sie seine Funktion, entfernen Sie wiederholte Information, testen Sie die Seite ohne Bild und bestätigen Sie, dass der Ersatz dieselbe Aufgabe unterstützt. Prüfen Sie danach HTML oder CMS-Ausgabe, damit das Attribut vorhanden und bei Dekoration korrekt leer ist.

1. Bildtyp bestimmen: informativ, funktional, dekorativ, textbasiert oder komplex.
2. Umgebenden Inhalt lesen: bereits vorhandene Information nicht wiederholen.
3. Ersatz schreiben: auf Funktion und nützliche Information konzentrieren.
4. Länge prüfen: nur bei Wiederholung oder Überladung kürzen.
5. Visuelle Barrierefreiheit prüfen: den Kontrast-Simulator nutzen, wenn Text oder wichtige Grafik im Bild liegt.
6. Ausgabe testen: bestätigen, dass leerer Alt-Text als leeres Attribut geschrieben und nicht weggelassen wird.

Automatische Prüfungen finden fehlende Attribute, können aber nicht beurteilen, ob die Wörter nützlich sind. Menschliche Kontrolle ist nötig, weil die richtige Beschreibung vom Kontext abhängt.

Die Länge von Alt-Text ist eine Qualitätsentscheidung, kein festes SEO-Ziel. Einfache Bilder brauchen knappen Ersatztext, funktionale Bilder eine klare Handlung, dekorative Bilder sollen still bleiben und komplexe Grafiken benötigen Details außerhalb des Attributs.

Schreiben Sie die Beschreibung neben dem Bild und nutzen Sie den Zeichenzähler, um unnötige Länge zu erkennen. Behalten Sie jedes Wort, das beim Verstehen oder Nutzen der Seite hilft, und entfernen Sie nur Details ohne Bezug zur Funktion.