"Enter": Navigation überspringen
  • Tab oder Shift + Tab - zum nächsten oder voherigen interaktiven Element springen
  • - innerhalb eines Elements navigieren
  • w a s d - innerhalb eines Elements navigieren
  • Enter - Element aktivieren
  • i - Tastaturbefehle anzeigen
  • CTRL / CMD + + oder - - Ansicht vergrößern oder verkleinern
  • Escape - Popup schließen
  • t - Tooltip anzeigen
  • m - zum Menü

Interactive-Studio

Alt-Tag

Der ‚Alt-Tag‘ (auch: Alternativtext) ist ein Begriff aus der professionellen Webentwicklung. Er beschreibt ein HTML-Attribut, das Bilder oder Grafiken im Quellcode beschreibt.

Suchmaschinen können Bilder nicht direkt „sehen“ oder interpretieren. Daher wird jedem Bild ein beschreibender Text hinzugefügt, der den Inhalt kurz und präzise erklärt. Wenn beispielsweise der Petersdom abgebildet ist, wird dies im Alt-Tag entsprechend beschrieben.

Der Alt-Tag ist im Quellcode hinterlegt und in der Regel im Frontend nicht sichtbar. Er ermöglicht es Suchmaschinen-Crawlern, den Inhalt eines Bildes zu verstehen und korrekt einzuordnen.

Die Verwendung von Alt-Tags ist ein wichtiger Bestandteil der Onpage-Suchmaschinenoptimierung und spielt zudem eine zentrale Rolle für die Barrierefreiheit von Websites.

Optimier deine Bilder für SEO und Barrierefreiheit – mit den richtigen Alt-Tags! Jetzt umsetzen!

Professionelle Suchmaschinenoptimierung

Wie schreibst du großartige Alternativtexte?

Ein Alternativtext ist also weit mehr als eine reine Bildbeschreibung. Er verbindet barrierefreies Webdesign mit der professionellen Suchmaschinenoptimierung. Gute, ja perfekte Texte finden sich auf vielen Websites. Sie ermöglichen es Unternehmen, sich zu präsentieren, Produkte oder Dienstleistungen anzubieten und ihre Besucher gut zu informieren und zu unterhalten (Infotainment). Doch Menschen mit Beeinträchtigungen partizipieren davon nicht immer (da sie den Inhalt möglicherweise nicht sehen oder ihr Gerät nicht auf übliche Weise bedienen können) – und hier kommen Alt-Tags ins Spiel. Das Geheimnis guter Alternativtexte liegt dabei vor allem in der Balance zwischen Klarheit, Präzision und Kontext. Wir haben dir einige Beispiele zusammengestellt, wie Unternehmen es auf ihrer Corporate Website richtig machen:

Beispiel 1: Produktbilder
Schlecht: „Bild von einem Rucksack“
Gut: „Schwarzer Rucksack aus veganem Leder mit goldenen Schnallen, perfekt für Büro und Reisen“

Beispiel 2: Infografiken
Schlecht: „Diagramm“
Gut: „Balkendiagramm: Wachstum von barrierefreiem Webdesign zwischen 2023 und 2025“

Beispiel 3: dekorative Bilder
Für Bilder, die rein dekorativ sind, empfiehlt unsere Digitalagentur den Alt-Tag leer zu lassen oder mit “role=presentation” zu markieren, damit Screenreader sie ignorieren.

Was wir bei Alternativtexten unbedingt vermeiden

Bei aller Sinnhaftigkeit besitzen die Alt-Texte auch ihre Stolperfallen. Oftmals werden sie von der Unternehmenskommunikation oder im professionellen Webdesign schlicht vergessen. Dabei braucht jedes wichtige Bild einer Website einen Alt-Tag, damit die Seite barrierefrei bleibt. Ein weiteres Problem bereitet das sogenannte Keyword-Stuffing. „Rucksack kaufen, günstig, bester Lederrucksack“ klingt nicht wirklich hilfreich, genauso wie viel zu lange Alt-Texte: Ein Alt-Tag sollte kurz und knackig sein – niemand möchte einen Roman über ein Bild hören.

Unsere Full-Stack-Webentwickler empfehlen, sich bei den Alternativtexten auf das Wesentliche zu konzentrieren, ohne sich in Details zu verlieren. Zudem gilt es, den Kontext zu berücksichtigen: Was soll der Nutzer aus dem Bild lernen oder verstehen? Optimal sind ein bis zwei kurze Sätze. Beschreib hier nur das, was zur groben Einordnung des Bildes relevant ist! Ausführlichere Details gehören in die Bildbeschreibung.

Begierde Wissen