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

In den letzten Jahren sind Bilder immer wichtiger für ansprechende Webseiten geworden. Ohne visuelle Elemente leidet die Nutzererfahrung, und auch im Content-Marketing sind Bilder unverzichtbar. Deshalb ist es entscheidend, dass jedes Bild auf Ihrer Webseite sorgfältig ausgewählt wird, um den Inhalt sinnvoll zu ergänzen. Aber damit ist es nicht getan: Jedes Bild braucht einen Alt-Text, der es beschreibt. Diese Alt-Texte sind normalerweise unsichtbar. Wozu also das Ganze?

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 können sehbehinderten Menschen vorgelesen werden.

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 womöglich missverständlich wirken.

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?

Pancakes mit Himbeeren und Ahornsirup.

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 Barriere­freiheit, die Benutzer­erfahrung und die SEO ist erheblich. Wir empfehlen allen Website-Besitzern, ihre Alternativ­texte zu überprüfen und zu optimieren. Gut formuliert, verbessern sie die Zugänglichkeit für Menschen mit Seh­behinderungen und erhöhen die Sichtbarkeit Ihrer Webseite in Suchmaschinen­ergebnissen.

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

Zurück zur Newsübersicht

Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 1 plus 6.

Was können wir für Sie tun?

07141-68 93 888