Alt-Texte: Der geheime Schlüssel zu einer besseren Website

14.10.24

In den letzten Jahren haben Bilder zunehmend an Bedeutung als zentrales Element ansprechender Webseiten gewonnen. Ohne visuelle Reize leidet die Nutzererfahrung, und auch im Content Marketing sind Bilder unumgänglich. Daher ist es wichtig, dass jedes Bild auf Ihrer Webseite sorgfältig ausgewählt wird, um die übrigen Inhalte sinnvoll zu ergänzen. Damit ist die Arbeit jedoch noch nicht getan, denn zu jedem Bild gehört ein Alt-Text, der das jeweilige visuelle Element beschreibt. In der Regel sind die Alt-Texte auf den Webseiten nicht sichtbar. Was um alles in der Welt sollen die dann bringen?

Was sind Alt-Texte?

Alt-Texte (alternative Texte) beschreiben das Aussehen, den Inhalt oder die Funktion eines Bildes auf einer Webseite. Sie werden angezeigt, wenn ein Bild aufgrund technischer Probleme nicht geladen werden kann oder wenn Sie in bestimmten Browsern über das Bild fahren.

Warum sind Alt-Texte wichtig?

Barrierefreiheit und Inklusion: Menschen mit Sehschwäche verwenden Screen-Reader-Apps, die Alt-Texte laut vorlesen. So erfahren sie, was auf dem Bild dargestellt ist, ob es für den Kontext der Inhalte um das Bild herum relevant ist, zusätzliche Informationen bietet oder einfach ein Icon ist, das zu einer anderen Seite verlinkt.

SEO-Vorteile: Alt-Texte helfen Suchmaschinen-Bots, den Inhalt von Bildern auf Webseiten besser zu verstehen. Sie analysieren Bilder und ihre begleitenden Texte, um Gemeinsamkeiten zwischen visuellen Mustern und den dazugehörigen Texten zu erkennen. Gut formulierte Alt-Texte helfen Google und anderen Suchmaschinen dabei, visuelle Inhalte zu indexieren und so bei der Bildsuche relevante Bild-Cluster auszugeben. Auf diese Weise können User also auch über die Bildersuche auf Ihre Seite gelangen.

Gesetzliche Anforderungen: Ab dem 28. Juni 2025 sind Unternehmen und Betreiber von Webseiten gesetzlich verpflichtet, ihre Produkte und Dienstleistungen barrierefrei zu gestalten, gemäß dem Barrierefreiheitsstärkungsgesetz (BFSG). Die Web Content Accessibility Guidelines (WCAG) setzen die technischen Standards, die den Zugang zu Online-Inhalten für Menschen mit Einschränkungen erleichtern. Zu den betroffenen Bereichen zählen unter anderem der Onlinehandel, der Transportsektor sowie Telekommunikationsdienste.

Wie fügt man Alt-Texte zu Bildern hinzu?

Wenn Sie die Pflege Ihrer Webseite selbst übernehmen, bieten viele Content-Management-Systeme die Möglichkeit, Alt-Texte in die vorgesehenen Felder einzufügen und zu speichern. Auch zahlreiche Social-Media-Plattformen ermöglichen es Nutzern, Alt-Texte für ihre Bildinhalte hinzuzufügen, um deren Auffindbarkeit zu verbessern. Dazu gehören unter anderem Instagram, Facebook, Twitter und LinkedIn.

Wie lang sollte ein Alt-Text sein?

Prinzipiell gilt: So kurz wie nötig und so konkret wie möglich. Es gibt zahlreiche Empfehlungen zur optimalen Länge von Alt-Texten, die von 100 bis 140 Zeichen oder einer bestimmten Maximalanzahl an Wörtern reichen. Wichtiger als diese Vorgaben ist jedoch, das Bild präzise und hilfreich zu beschreiben, damit es sowohl für Nutzer als auch für Personen, die auf Screenreader angewiesen sind, informativ ist.

13 Tipps für gute Alt-Texte

1. Inhalt und Funktion beschreiben

Erläutern Sie den Inhalt und, falls relevant, die Funktion des Bildes.
Bei verlinkten Bildern sollte klar sein, wohin der Link führt. Der Kontext kann im umgebenden Text ausgeführt werden.

2. Grammatik und Zeichensetzung

Achten Sie auf korrekte Grammatik und Zeichensetzung, da Screenreader den Text so vorlesen, wie er vorliegt.
Ungenaue Grammatik kann dazu führen, dass der Alt-Text schwer verständlich wird.
Fehlerhafte Zeichensetzung hingegen lässt den Text möglicherweise wie einen endlosen Satz ohne Pausen wirken oder stottern.

3. Textlänge

Halten Sie den Alt-Text kurz und prägnant.
Platzieren Sie die wesentlichen Informationen gleich zu Beginn des Alt-Texts. Ein Screenreader liest den Text entweder vollständig oder gar nicht vor, wodurch der Nutzer keine Möglichkeit hat, mitten im Alt-Text zu pausieren oder zurückzuspulen.

4. Kontext beachten

Verlinken Sie relevante Infografiken auf eine separate Seite mit Fließtext oder weisen Sie im Alt-Text auf vollständige Informationen im Untertitel oder umgebenden Text hin.
Fügen Sie Kontext hinzu, der sich direkt auf das Thema Ihrer Webseite bezieht, insbesondere bei generischen Bildern.
Gestalten Sie den Alternativtext spezifisch und kombinieren Sie ihn mit den Elementen des umgebenden Inhalts.

5. Detailgrad in Grenzen halten

Der User muss den Zweck des Bildes verstehen, ohne eine ausführliche Bildinterpretation lesen zu müssen.

6. Relevante Texte im Bild in den Alt-Text integrieren

Graues T-Shirt mit weißer Aufschrift Make something awesome

Am Beispiel von diesem Bild wäre der Alternativtext: Graues T-Shirt mit weißer Aufschrift Make something awesome.

7. SEO niemals über die Nutzer stellen

Geben Sie niemals einen Alt-Text auf, um bei SEO zu punkten. Alt-Texte sollten in erster Linie für den Nutzer und nicht für Suchmaschinen erstellt werden.
Übermäßige Optimierung für SEO kann der Sichtbarkeit der Webseite schaden.
Irreführende Keywords oder in Alt-Texten können dazu führen, dass Google Ihre Webseite als Spam markiert.

8. Überflüssige Formulierungen vermeiden

Lassen Sie Formulierungen wie „Foto von“ oder „Ein Bild von“ weg, es sei denn, sie sind relevant.
Beim nachstehenden Beispiel ist es gegebenenfalls wichtig zu erwähnen, dass es sich um ein KI-generiertes Ölbild einer Himbeere handelt.

KI-generierte Himbeere im Stil eines Ölgemäldes.

9. Textwiederholung vermeiden

Verwenden Sie nicht die gleichen Texte für Alt-Text, Bildunterschrift oder Bildtitel.

10. Verlinkte Bilder

Der Alt-Text sollte immer die Funktion oder das Ziel des Links enthalten.
Beispiel: Wenn Sie auf Ihrer Webseite über ein Bild einen Datei-Download anbieten, könnte der Alt-Text so aussehen: „Link: Das Lied 'Himbeerfest' als MP3 herunterladen.“

11. Fokus-Keywords verwenden

Fügen Sie relevante Keywords in den Alt-Text ein, aber übertreiben Sie es nicht.

12. Automatische Prüfwerkzeuge

Nutzen Sie automatische Prüfwerkzeuge für Barrierefreiheit im Netz als ersten Anhaltspunkt, verlassen Sie sich jedoch nicht ausschließlich darauf.
Lassen Sie die Alt-Texte auch von Kollegen oder einer Werbeagentur überprüfen.

13. Dekorative Bilder

Verwenden Sie keinen Alt-Text für rein dekorative Bilder.
Fügen Sie „null“ in die Alternativtextfelder ein, damit Screenreader diese überspringen.

Praktisches Beispiel für einen Alt-Text

Schauen Sie sich kurz dieses Bild an. Welcher Alternativtext wäre dafür treffend?

Gut: „Pancakes mit Himbeeren und Ahornsirup."
Dieser Alt-Text beschreibt das Bild präzise, ohne übertrieben zu sein.

Okay: "Himbeerdessert"
Der Alt-Text ist zu allgemein gehalten. Es besteht die Möglichkeit, das Bild präziser zu beschreiben.

Nicht empfohlen ist gar kein Alt-Text oder „Keyword Stuffing“, was in etwa so aussehen kann: „himbeere, himbeeren, himbeerfrucht, frische himbeeren, beerenobst, himbeerdessert, himbeerrezept, beste himbeeren, himbeerkuchen, himbeermarmelade, himbeersmoothie, himbeersorbet"

Die Verwendung von „Keyword Stuffing“ zeugt von mangelhafter Qualität und kann dazu führen, dass Ihre Seite von Google als Spam gelistet wird.

Fazit

Die Bedeutung von Alt-Texten für die Barrierefreiheit, die Benutzererfahrung und die SEO ist erheblich. Wir empfehlen allen Website-Besitzern, ihre Alternativtexte zu überprüfen und zu optimieren. Gut formuliert, verbessern sie die Zugänglichkeit für Menschen mit Sehbehinderungen und erhöhen die Sichtbarkeit Ihrer Webseite in Suchmaschinenergebnissen.

Wenn Sie keine Zeit haben, sich selbst um die Erstellung Ihrer Alt-Texte zu kümmern, stehen wir Ihnen gerne zur Seite!