Gute Alt-Texte schreiben: SEO & Barrierefreiheit

Dateiname (Slug): gute-alternativtexte-fuer-bilder-schreiben

Meta Title (54 Zeichen): Gute Alt-Texte schreiben: SEO & Barrierefreiheit

Meta Description (159 Zeichen): Lernen Sie, wie man perfekte Alt-Texte (Alternativtexte) für Bilder schreibt. Verbessern Sie Ihr SEO und die Barrierefreiheit Ihrer Website nach BFSG-Standard.

H1: Bilder & Alt-Texte: Wie Sie gute Alternativtexte für SEO und Barrierefreiheit schreiben

Bilder sind ein zentraler Bestandteil moderner Webseiten. Sie lockern Texte auf, transportieren Emotionen und erklären komplexe Sachverhalte. Doch was passiert, wenn ein Bild nicht geladen werden kann oder ein Nutzer es nicht sehen kann? Hier kommt der Alternativtext, kurz Alt-Text, ins Spiel. Er ist eine der wichtigsten und gleichzeitig am häufigsten vernachlässigten Säulen der digitalen Barrierefreiheit und Suchmaschinenoptimierung (SEO).

Ein guter Alt-Text stellt sicher, dass die in einem Bild enthaltene Information für alle zugänglich ist, insbesondere für Menschen mit Sehbehinderungen, die Screenreader nutzen. Gleichzeitig hilft er Suchmaschinen wie Google, den Inhalt des Bildes zu verstehen und es im richtigen Kontext zu indexieren. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) wird die korrekte Verwendung von Alt-Texten zur rechtlichen Pflicht für viele Online-Angebote. In diesem Leitfaden zeigen wir Ihnen, wie Sie aussagekräftige und effektive Alt-Texte verfassen.

H2: Was ist ein Alt-Text und warum ist er so wichtig?

Der Alt-Text ist ein kurzes, beschreibendes Textattribut im <img>-Tag Ihres HTML-Codes. Er wird in drei Hauptfällen relevant:

Für Screenreader: Assistierende Technologien lesen den Alt-Text vor, sodass blinde und sehbehinderte Nutzer verstehen, was auf dem Bild zu sehen ist.
Bei Ladeproblemen: Wenn ein Bild aufgrund einer langsamen Verbindung oder eines fehlerhaften Links nicht angezeigt wird, erscheint stattdessen der Alt-Text.
Für Suchmaschinen: Google und andere Suchmaschinen können Bilder nicht „sehen“. Der Alt-Text liefert den entscheidenden Kontext, um das Bild zu verstehen und in der Bildersuche zu ranken.

Ein fehlender oder schlecht formulierter Alt-Text schließt Nutzer aus und verschenkt wertvolles SEO-Potenzial.

H2: Die Kunst des Schreibens: Was macht einen guten Alt-Text aus?

Ein effektiver Alt-Text ist präzise, kontextbezogen und beschreibt die Funktion des Bildes. Die wichtigste Regel lautet: Beschreiben Sie das Bild so, als würden Sie es jemandem am Telefon erklären.

Grundlegende Best Practices:

Seien Sie spezifisch und prägnant: Halten Sie den Text kurz, idealerweise unter 125 Zeichen, damit Screenreader ihn vollständig verarbeiten. Beschreiben Sie die wichtigsten Elemente des Bildes.
Vermeiden Sie überflüssige Phrasen: Starten Sie nicht mit „Bild von…“ oder „Grafik von…“. Screenreader kündigen ein Bild bereits als solches an. Gehen Sie direkt zur Beschreibung über.
Integrieren Sie Keywords (sinnvoll!): Wenn es auf natürliche Weise passt, verwenden Sie Ihr Fokus-Keyword. Beispiel: Statt alt="Laptop" schreiben Sie alt="Ein Entwickler testet die Tastaturbedienung einer Website auf einem Laptop". Keyword-Stuffing ist jedoch tabu!
Kontext ist entscheidend: Der Alt-Text sollte den Zweck des Bildes im Kontext der Seite widerspiegeln. Warum ist dieses Bild hier? Welche Information vermittelt es, die für das Verständnis des Textes relevant ist?

H2: Verschiedene Bildtypen, verschiedene Alt-Texte

Nicht jedes Bild hat denselben Zweck. Ein guter Alt-Text passt sich der Funktion des Bildes an.

1. Informative Bilder

Diese Bilder vermitteln eine wichtige Information oder einen bestimmten Inhalt. Der Alt-Text sollte diese Information exakt wiedergeben.

Beispiel: Ein Foto von Marie Curie im Labor.
- Schlecht: alt="Frau im Labor"
- Gut: alt="Marie Curie arbeitet konzentriert an einem Experiment in ihrem Pariser Labor um 1900."

2. Dekorative Bilder

Diese Bilder dienen rein ästhetischen Zwecken, z.B. als Trennlinien, Hintergrundmuster oder abstrakte Grafiken. Sie tragen keine inhaltliche Information. Hier ist der Alt-Text leer zu lassen.

Beispiel: Eine geschwungene Linie als Design-Element.
- Korrekt: alt=""
- Falsch: alt="Blaue Linie" Ein leerer Alt-Text (alt="") signalisiert dem Screenreader, das Bild zu ignorieren. Ein fehlendes alt-Attribut ist hingegen ein Fehler.

3. Funktionale Bilder (Links und Buttons)

Wenn ein Bild als Link oder Button fungiert, muss der Alt-Text die Funktion oder das Ziel beschreiben, nicht das Bild selbst.

Beispiel: Ein Lupen-Icon für die Suche.
- Schlecht: alt="Lupe"
- Gut: alt="Suche starten"
Beispiel: Ein Firmenlogo in der Kopfzeile, das zur Startseite verlinkt.
- Gut: alt="BFSG Check - Zurück zur Startseite"

4. Komplexe Bilder (Diagramme und Infografiken)

Diagramme, Karten oder Infografiken enthalten oft zu viele Informationen für einen kurzen Alt-Text.

Lösung: Geben Sie im Alt-Text eine kurze Zusammenfassung und verweisen Sie auf eine ausführliche Beschreibung direkt im Text unterhalb des Bildes oder auf einer separaten Seite.
- Beispiel: Ein Balkendiagramm zum Umsatzwachstum.
- Alt-Text: alt="Balkendiagramm zeigt Umsatzwachstum von 2020 bis 2023. Details folgen im nächsten Absatz."
- Im Fließtext: „Das Diagramm veranschaulicht das stetige Umsatzwachstum: 2 Mio. € in 2020, 3 Mio. € in 2021...“

H2: Fazit: Alt-Texte sind eine kleine Mühe mit großer Wirkung

Die sorgfältige Erstellung von Alternativtexten ist ein entscheidender Schritt zu einer inklusiven und erfolgreichen Website. Sie erfüllen nicht nur die gesetzlichen Anforderungen des BFSG, sondern senden auch ein starkes Signal an alle Nutzer, dass Sie deren Bedürfnisse ernst nehmen. Zudem belohnen Suchmaschinen diese Sorgfalt mit besserer Sichtbarkeit. Nehmen Sie sich die Zeit – es lohnt sich.

Prüfen Sie jetzt, ob Ihre Website bereits die wichtigsten Standards der Barrierefreiheit erfüllt, einschließlich der korrekten Verwendung von Bild-Attributen.

BFSG Check starten

Hinweis: Dieser Artikel stellt keine Rechtsberatung dar, sondern dient der allgemeinen Information.

Quellen:

W3C WAI - An Alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
Google Search Central - Image SEO best practices: https://developers.google.com/search/docs/crawling-indexing/image-seo-best-practices
MDN Web Docs - Alt text: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
Smashing Magazine - Accessible Images For When They Matter Most: https://www.smashingmagazine.com/2021/05/accessible-images-matter/