Optimierung von Alt-Attributen für SEO und Barrierefreiheit

Alt-Attribute spielen eine zentrale Rolle in der Suchmaschinenoptimierung (SEO) und der digitalen Barrierefreiheit. Sie helfen Suchmaschinen, den Inhalt von Bildern zu interpretieren, und ermöglichen es Screenreadern, sehbehinderten Nutzern eine Beschreibung der Bilder vorzulesen. Die richtige Optimierung von Alt-Texten sorgt nicht nur für eine bessere Nutzererfahrung, sondern auch für eine verbesserte Onpage-Optimierung.

Was sind Alt-Attribute?

Alt-Attribute (auch Alt-Tags oder Alt-Texte genannt) sind HTML-Beschreibungen, die den Inhalt und die Funktion eines Bildes auf einer Webseite erklären. Sie werden im img src-Tag als alt="..." hinterlegt und dienen zwei Hauptzwecken: Barrierefreiheit und Suchmaschinenoptimierung (SEO). Screenreader nutzen Alt-Texte, um Menschen mit Sehbehinderungen den Inhalt von Bildern und Grafiken vorzulesen. Gleichzeitig helfen Alt-Attribute Suchmaschinen, Bilder besser zu indexieren, wodurch sie in der Google-Bildersuche gefunden werden können.

Warum sind Alt-Attribute wichtig?

Barrierefreiheit durch Alternativtexte

Menschen mit Sehbehinderungen nutzen Screenreader, die den Inhalt einer Webseite vorlesen. Ohne Alt-Texte bleiben Bilder und Grafiken für sie unverständlich. Alternative Texte ermöglichen es diesen Nutzern, die Bildinhalte zu erfassen und barrierefrei auf Webseiten zu navigieren.

Bessere Suchmaschinenoptimierung (SEO)

Suchmaschinen wie Google können Bilder nicht „sehen“, sondern verlassen sich auf Alt-Tags, um den Inhalt von Bildern und Grafiken zu verstehen. Eine gute Alt-Tag-SEO-Optimierung verbessert die Sichtbarkeit in der Google-Bildersuche und sorgt für mehr Traffic.

Barrierefreie Benutzererfahrung verbessern

Falls ein Bild nicht geladen werden kann, zeigt der Browser den Alt-Text an. So bleibt der Kontext erhalten, und der Nutzer versteht trotzdem, was auf dem Bild zu sehen sein sollte.

Technische Anleitung zur Implementierung von Alt-Texten für Bilder

Grundlagen von Alt-Texten

Der alt-Attributwert beschreibt den Inhalt und die Funktion eines Bildes.
Alt-Texte sollten präzise und relevant sein.
Falls ein Bild nur dekorativ ist, sollte das alt-Attribut leer (alt="") bleiben.
Beispiel:<img src="beispiel.jpg" alt="Ein Hund spielt im Park mit einem Ball.">

Beispiel für einen guten Alt-Text:

Alt-Texte für verschiedene Bildtypen

Nicht alle Bilder haben die gleiche Funktion, daher gibt es unterschiedliche Ansätze für die Alt-Text-Optimierung:

Dekorative Bilder:

Falls das Bild keine inhaltliche Bedeutung hat, bleibt das Alt-Attribut leer:<img src="trennlinie.png" alt="">
Oder das Bild wird über CSS eingebunden, damit es für Screenreader unsichtbar bleibt:.decoratives-bild {background-image: url("trennlinie.png");}

Inhaltlich relevante Bilder:

Falls das Bild eine wichtige Information enthält, sollte es klar beschrieben werden:

Bilder als Links:

Falls das Bild als Link dient, sollte der Alt-Text den Zweck des Links erklären:

Alt-Texte in CSS-Hintergrundbildern

CSS-Hintergrundbilder haben kein Alt-Attribut. Wenn sie inhaltlich relevant sind, sollte stattdessen das -Tag genutzt werden. Falls dies nicht möglich ist, kann ein Alternativtext mit aria-label hinzugefügt werden:

Alt-Texte in CMS (z. B. WordPress, Joomla, Drupal) implementieren

Die Implementierung von Alt-Texten in Content-Management-Systemen (CMS) wie WordPress, Joomla und Drupal ist essenziell, um Bilder barrierefrei und suchmaschinenfreundlich zu gestalten. Hier finden Sie eine kurze Anleitung für die gängigsten CMS.

WordPress

Beim Hochladen eines Bildes unter Medien → Bilddetails das Feld „Alternativer Text“ ausfüllen.
Bereits hochgeladene Bilder können über die Medienbibliothek bearbeitet werden.

Joomla

Bild einfügen über den Medienmanager → Bild auswählen → Alternativer Text.

Drupal

Beim Hochladen eines Bildes unter Inhalt hinzufügen → Bild hochladen → Alternativer Text eingeben.

Automatische Prüfung und Optimierung von Alt-Attributen

Um zu überprüfen, ob alle Alt-Tags korrekt gesetzt sind, gibt es hilfreiche Tools:

WAVE Web Accessibility Evaluation Tool
Axe DevTools
Google Lighthouse (unter Chrome DevTools)
UserWay Accessibility Checker

Diese Tools helfen dabei, fehlende oder fehlerhafte Alt-Attribute zu identifizieren und zu optimieren.

Best Practices für barrierefreie Alt-Texte

Um sicherzustellen, dass Alt-Texte sowohl für Screenreader-Nutzer als auch für andere Besucher hilfreich sind, sollten sie nach folgenden Prinzipien formuliert werden:

Klar und präzise: Beschreiben Sie den Bildinhalt so, dass der Zweck und die Bedeutung des Bildes verständlich werden.
Funktion berücksichtigen: Falls das Bild als Link oder interaktives Element dient, sollte der Alt-Text den Zweck angeben, nicht nur die visuelle Darstellung.
Dekorative Bilder ausschließen: Falls ein Bild rein dekorativ ist und keine zusätzliche Information vermittelt, sollte das Alt-Attribut leer sein (alt="") oder über CSS (background-image) ausgeblendet werden.
Keine redundanten Formulierungen: Wörter wie „Bild von…“ oder „Grafik zeigt…“ sind überflüssig, da Screenreader bereits erkennen, dass es sich um ein Bild handelt. Beispiel für einen gut geschriebenen Alt-Text:<img src="team-meeting.jpg" alt="Drei Personen sitzen in einem Besprechungsraum und diskutieren eine Präsentation.">

Besondere Herausforderungen bei Alt-Texten für barrierefreie Bilder

Während einfache Bilder mit einem kurzen Alt-Text beschrieben werden können, gibt es Fälle, in denen detailliertere Erklärungen besonders im Blick auf Barrierefreiheit erforderlich sind:

Infografiken und Diagramme: Falls ein Bild viele Informationen enthält, sollte es in der Nähe des Bildes eine ausführliche Textalternative geben oder das aria-describedby-Attribut genutzt werden.
Produktbilder in Online-Shops: Die Alt-Texte sollten wesentliche Merkmale wie Farbe, Material oder besondere Eigenschaften enthalten, damit sehbehinderte Nutzer eine fundierte Kaufentscheidung treffen können.
Icons und Symbole: Falls sie eine funktionale Bedeutung haben (z. B. ein „Senden“-Button mit einem Papierflieger-Symbol), sollte die Bedeutung im Alt-Text oder ARIA-Label beschrieben werden.

FAQ – Häufig gestellte Fragen zu Alt-Attributen

Wie muss ein Alt-Text aussehen?

Ein Alt-Text sollte den Inhalt und die Funktion des Bildes klar und präzise beschreiben. Er sollte relevante Informationen enthalten, aber auf unnötige Wörter wie „Bild von…“ verzichten.

Wie formuliere ich ALT-Texte?

Alt-Texte sollten kurz, aber aussagekräftig sein und den Bildinhalt verständlich wiedergeben. Falls das Bild eine wichtige Funktion erfüllt (z. B. ein Link), sollte der Alt-Text diese erklären.

Was ist ein gutes Beispiel für Alternativtext?

Ein gutes Beispiel ist:

<img src="hund-im-park.jpg" alt="Brauner Hund spielt mit einem roten Ball im Park."> – die Beschreibung ist konkret, aber nicht zu ausführlich.