Lexikoneintrag

Alt Text

Was ist Alt Text?

Alt Text, kurz für Alternativtext, ist ein Attribut im HTML-Code, das verwendet wird, um eine textuelle Beschreibung von Bildern auf einer Webseite bereitzustellen. Dieses Attribut wird innerhalb des <img>-Tags eingesetzt und dient dazu, den Inhalt oder die Funktion eines Bildes zu erläutern. Wenn ein Bild aus technischen Gründen nicht geladen werden kann oder wenn Nutzer Screenreader verwenden, wird der Alt Text angezeigt oder vorgelesen. Dies verbessert die Barrierefreiheit der Webseite und trägt dazu bei, dass alle Nutzer, unabhängig von ihren technischen oder körperlichen Einschränkungen, den Inhalt vollständig erfassen können.

Bedeutung von Alt Text

Barrierefreiheit

Der Hauptzweck von Alt Text ist die Verbesserung der Barrierefreiheit. Für blinde oder sehbehinderte Menschen sind Screenreader ein wichtiges Hilfsmittel, um digitale Inhalte zu konsumieren. Diese Programme lesen den Alt Text von Bildern vor, sodass Nutzer erfahren, was auf dem Bild dargestellt ist. Ohne Alt Text würde der Screenreader das Bild möglicherweise ignorieren oder nur den Dateinamen vorlesen, was wenig hilfreich ist.

Suchmaschinenoptimierung (SEO)

Alt Text spielt auch eine wichtige Rolle in der Suchmaschinenoptimierung. Suchmaschinen können den Inhalt von Bildern nicht interpretieren, aber sie lesen den Alt Text aus, um den Kontext zu verstehen. Durch die Verwendung relevanter Schlüsselwörter im Alt Text kann die Sichtbarkeit einer Webseite in den Suchmaschinenergebnissen verbessert werden, insbesondere in der Bildsuche. Dies kann zu einem höheren organischen Traffic führen.

Nutzererfahrung

Wenn ein Bild aufgrund von langsamer Internetverbindung oder technischen Problemen nicht geladen wird, wird der Alt Text anstelle des Bildes angezeigt. Dies sorgt für eine bessere Nutzererfahrung, da der Besucher zumindest eine Vorstellung davon erhält, was auf dem Bild zu sehen wäre. Es verhindert auch das Auftreten von leeren oder gebrochenen Bildsymbolen, die die Ästhetik der Webseite beeinträchtigen könnten.

Best Practices für die Erstellung von Alt Text

Präzise und beschreibend sein

Der Alt Text sollte klar und präzise beschreiben, was auf dem Bild zu sehen ist. Es ist hilfreich, sich vorzustellen, wie man das Bild jemandem erklären würde, der es nicht sehen kann.

Beispiel:

  • Statt: alt="Hund"
  • Besser: alt="Golden Retriever, der im Park einen Ball fängt"

Angemessene Länge einhalten

Ein guter Alt Text ist kurz und bündig, in der Regel nicht länger als 125 Zeichen. Zu lange Beschreibungen können für Nutzer von Screenreadern ermüdend sein und wichtige Informationen könnten überhört werden.

Verzicht auf redundante Informationen

Es ist nicht notwendig, Phrasen wie „Bild von“ oder „Grafik zeigt“ zu verwenden, da Screenreader bereits ankündigen, dass es sich um ein Bild handelt.

Beispiel:

  • Nicht ideal: alt="Bild von einem Sonnenuntergang"
  • Besser: alt="Sonnenuntergang über den Bergen mit orangefarbenem Himmel"

Schlüsselwörter sinnvoll einbinden

Während es vorteilhaft ist, relevante Schlüsselwörter zu verwenden, sollte der Alt Text nicht mit Keywords überladen werden. Der Fokus sollte auf einer natürlichen und sinnvollen Beschreibung liegen.

Beispiel:

  • Statt: alt="beste italienische Restaurants Pizza Pasta günstig"
  • Besser: alt="Italienisches Restaurant mit Gästen, die Pizza und Pasta genießen"

Kontext berücksichtigen

Der Alt Text sollte den Kontext des Bildes innerhalb des Artikels oder der Webseite widerspiegeln. Wenn das Bild beispielsweise eine Aktion oder ein Konzept unterstützt, sollte dies im Alt Text zum Ausdruck kommen.

Beispiel:

  • Für ein Bild in einem Artikel über Umweltschutz: alt="Freiwillige sammeln Plastikmüll am Strand"

Häufige Fehler bei der Verwendung von Alt Text

Fehlender Alt Text

Das Fehlen von Alt Text ist einer der häufigsten Fehler. Ohne Alt Text können Screenreader den Inhalt des Bildes nicht vermitteln, was die Barrierefreiheit beeinträchtigt. Zudem verlieren Suchmaschinen wichtige Informationen, was sich negativ auf das SEO auswirken kann.

Unzureichende oder ungenaue Beschreibungen

Allgemeine Beschreibungen wie „Bild1“ oder „Grafik“ sind nicht hilfreich. Sie bieten weder Nutzern noch Suchmaschinen einen Mehrwert.

Keyword-Stuffing

Die Überladung des Alt Textes mit Schlüsselwörtern in der Hoffnung, das Suchranking zu verbessern, kann von Suchmaschinen als Spam angesehen werden und zu Abstrafungen führen.

Verwendung von Alt Text für dekorative Bilder

Für dekorative Bilder, die keinen informativen Wert bieten, sollte das Alt-Attribut leer gelassen werden (alt=""). Dies signalisiert Screenreadern, dass sie das Bild überspringen können.

Technische Umsetzung

Einbindung im HTML-Code

Der Alt Text wird direkt im <img>-Tag eingefügt.

Syntax:

<img src="bild.jpg" alt="Beschreibung des Bildes">

Verwendung in Content-Management-Systemen (CMS)

In den meisten CMS, wie WordPress oder Joomla, gibt es beim Hochladen von Bildern Felder für den Alt Text. Es ist wichtig, diese auszufüllen, um die Barrierefreiheit und SEO zu optimieren.

Überprüfung und Validierung

Es gibt verschiedene Tools, um die korrekte Verwendung von Alt Text zu überprüfen:

  • WAVE Web Accessibility Evaluation Tool: Prüft Webseiten auf Barrierefreiheit.
  • Google Lighthouse: Bietet Audits für Performance, Zugänglichkeit und SEO.
  • Browser-Erweiterungen: Wie die Web Developer Toolbar für detaillierte Analysen.

Vorteile von Alt Text für verschiedene Nutzergruppen

Nutzer mit Sehbehinderungen

Alt Text ermöglicht es blinden oder sehbehinderten Nutzern, die Inhalte von Bildern zu verstehen. Dies ist entscheidend für eine inklusive Web-Erfahrung.

Nutzer mit eingeschränkter Internetverbindung

Wenn Bilder nicht geladen werden können, zeigt der Alt Text an, was an ihrer Stelle stehen sollte, was die Nutzerfreundlichkeit verbessert.

Suchmaschinen

Suchmaschinen nutzen Alt Texte, um den Inhalt von Bildern zu indexieren, was die Sichtbarkeit in den Suchergebnissen erhöht und zusätzlichen Traffic generieren kann.

Alt Text und SEO

Verbesserung des Rankings

Durch die Einbindung relevanter Schlüsselwörter in den Alt Text kann die Relevanz einer Seite für bestimmte Suchanfragen erhöht werden, was sich positiv auf das Ranking auswirken kann.

Bildersuche

Optimierte Alt Texte erhöhen die Chancen, dass Bilder in den Bildsuchergebnissen von Suchmaschinen erscheinen, was zusätzlichen Traffic bringen kann.

Vermeidung von Penalties

Durch die Vermeidung von Keyword-Stuffing und die Einhaltung von Best Practices wird das Risiko von Suchmaschinenabstrafungen minimiert.

Praktische Beispiele für effektiven Alt Text

E-Commerce-Website

Produktbild:

<img src="schuhe.jpg" alt="Damen-Laufschuh Modell X200 in Blau und Weiß">

Nachrichtenartikel

Ereignisfoto:

<img src="konferenz.jpg" alt="Redner auf der Technologie-Konferenz 2024 in Berlin">

Bildungswebsite

Infografik:

<img src="diagramm.jpg" alt="Diagramm zeigt den Anstieg der globalen Temperaturen von 1900 bis 2020">

Zusammenfassung

Der Alt Text ist ein entscheidender Faktor für die Barrierefreiheit, Nutzererfahrung und Suchmaschinenoptimierung einer Webseite. Durch sorgfältige und bewusste Erstellung von Alt Texten können Webseitenbetreiber sicherstellen, dass ihre Inhalte für alle Nutzer zugänglich sind und von Suchmaschinen besser verstanden werden. Die Beachtung von Best Practices und die Vermeidung häufiger Fehler tragen dazu bei, die volle Wirkung von Alt Texten zu entfalten.

Autor
Florian Beqiri

Florian Beqiri ist Gründer der SEO-Agentur Proactive Media. 

Im Blog berichtet er über die neusten Tipps, Tricks & Trends zum Thema Suchmaschinenmarketing.

Social-Media

Wie stehen deine Chancen in den Suchmaschinen?

Lass uns das für dich kostenfrei herausfinden!