"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‘, oder auch ‚Alternativtext‘, ist ein Begriff aus der professionellen Webentwicklung.Er beschreibt den Teil im HTML, der ein Bild oder eine Grafik betrifft. Die Google-Webcrawler können noch keine Bilder erfassen und benennen. Aus diesem Grund fügt man den Bildern im Backend eine Beschreibung hinzu. Wenn auf der Webseite zum Beispiel der Petersdom zu sehen ist, fügt man diese Erläuterung dem Bild hinzu. Dabei sollte die Definition allerdings kurz und knapp gehalten werden. Der Tag wird zwar im Quellcode verankert, ist aber in der Regel visuell nicht im Frontend sichtbar. Der Crawler kann aber nun erkennen, um welches Bild es sich handelt. Diese Beschreibung von Bildern mit einem Alt-Tag ist wichtig für die Onpage-Suchmaschinenoptimierung. Der Alt-Tag ist ebenfalls unverzichtbar für die Barrierefreiheit.

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