Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Alternativtext zu Bildern hinzufügen

Alternativtext ist Text, den du zu Bildern hinzufügst, um sie für Besucher zugänglicher zu machen. Suchmaschinen verwenden auch Alternativtext, um den Inhalt des Bildes zu identifizieren, weshalb dies auch eine großartige Möglichkeit ist, die SEO für deine Website zu fördern. Der Dateiname deines Bildes dient normalerweise als Alternativtext, wenn du keinen Alternativtext manuell hinzufügst. Für Bild-Blöcke musst du den Alternativtext manuell hinzufügen.

Alternativtext ist auch hilfreich für unterstützende Screenreader oder Browser, in denen Bilder deaktiviert sind. Wenn ein Browser das Bild nicht anzeigen kann, wird stattdessen möglicherweise der Alternativtext angezeigt. Verwende beim Hinzufügen von Alternativtext kurze, lesbare Begriffe, die das Bild beschreiben. Befolge unsere Tipps, um deine Bilder barrierefrei zu machen.

In dieser Anleitung wird erläutert, wie Sie den Bildern Ihrer Website Alternativtext hinzufügen können und welche Bilder automatisch Alternativtext enthalten.

Video ansehen

Best Practices für Alternativtext

Denke beim Verfassen von Alternativtext daran, dass du für Menschen schreibst, die unterstützende Screenreader verwenden oder Bilder in ihrem Browser deaktiviert haben. Beachte dabei Folgendes:

  • Seien Sie aussagekräftig und hilfreich. Wie würden Sie dieses Bild für jemanden beschreiben, der es nicht sehen kann?
  • Halten Sie den Text kurz, in der Regel zwölf Wörter oder weniger.
  • Optimiere deinen Text für die Suche, indem du Keywords einbindest, aber vermeide Keyword-Überfrachtung.
  • Schreiben Sie in echten Sätzen; verwenden Sie keine Bindestriche, um Wörter zu trennen.
  • Sie können Wörter wie „der/die/das“ und „ein/e“ und Begriffe wie „Foto“ oder „Bild“ weglassen. Verwenden Sie beispielsweise anstelle von ein Bild von einer grünen Vase den Namen grüne Vase.

Bild-Dateinamen

Der Dateiname eines Bildes fungiert als Alternativtext, wenn kein anderer Alternativtext hinzugefügt wurde, außer für Bild-Blöcke.

Um den Dateinamen für die meisten Bilder zu ändern, lade das Bild erneut mit dem neuen Namen hoch oder ändere den Dateinamen im Bild-Editor. Öffne beispielsweise für Bild-Blöcke den Block-Editor, gehe zum Tab Inhalt und aktualisiere dann das Feld Dateiname im Tab Inhalt.

Tipp: Verwenden Sie ausschließlich Buchstaben, Zahlen, Unterstriche und Bindestriche in Dateinamen.

Das Dateinamenfeld im Bild-Block-Editor

Website-Logo

Der Seitentitel dient als Alternativtext für das Website-Logo.

Bild-Blöcke

Du kannst Alternativtext zu jedem Bild-Block-Layout hinzufügen. Wenn du keinen Alternativtext zu Bild-Blöcken hinzufügst, wird das Bild vor Hilfstechnologien wie Screenreadern ausgeblendet. So fügst du Alternativtext hinzu:

  1. Klicke im Bild-Block-Editor auf den Tab Inhalt.
  2. Gehe zu Bild-Alternativtext und gib dann deinen Alternativtext in das Feld ein.
  3. Klicken Sie auf Speichern.

image_block_with_alt_text.png

Bilder des automatischen Layouts und der Galerie

Automatische Layouts und Galerie-Abschnitte werden nur in Version 7.1 unterstützt.

Sie können Alternativtext zu automatischen Layouts und Galerie-Abschnitten hinzufügen, aber bei allen wir eine andere Methode verwendet.

Auto-Layouts

Wenn Ihr automatisches Layout Text und Bilder enthält, können Sie den Bildern in diesem Abschnitt Alt-Text hinzufügen. Automatische Layouts, die nicht sowohl Text als auch Bilder enthalten, unterstützen keinen Alt-Text.

So fügen Sie Alt-Text zu Elementen in Auto-Layout-Abschnitten hinzu:

  1. Fahre beim Bearbeiten einer Seite mit der Maus über den Abschnitt „Automatisches Layout“ und klicke auf Inhalt bearbeiten.
  2. Klicke auf den Tab Inhalt.
  3. Klicken Sie auf das Bild, dem Sie Alt-Text hinzufügen möchten.
  4. Scrolle zu Bild-Alternativtext und gib deinen Alternativtext in das Feld ein.
  5. Klicke auf Zurück und dann auf Speichern.

Wenn das Feld Bild-Alt-Text nicht angezeigt wird, unterstützt das automatische Layout keinen Alt-Text.

Galerie-Abschnitte

Galerieabschnitte zeigen hauptsächlich Bilder. Wenn Sie den Bildern des Galerieabschnitts eine Beschreibung hinzufügen, wird diese automatisch zum Alternativtext und zur Beschriftung für das Bild.

Galerie-Block-Bilder

In Version 7.1 kannst du Galerie-Blöcke nur zu Blogeinträgen, Produktartikeln und einzelnen Veranstaltungen hinzufügen.

So fügen Sie Alternativtext zu einem Bild in einem Galerie-Block hinzu:

  1. Doppelklicken Sie auf den Galerie-Block oder klicken Sie auf Bearbeiten.
  2. Suchen Sie das zu bearbeitende Bild, fahren Sie mit der Maus darüber und klicken Sie auf  .
  3. Fügen Sie Alternativtext in das Feld Bildtitel eingeben hinzu. Wenn Sie keinen Bildtitel hinzufügen, wird Text im Feld „Beschreibung“ zum Alternativtext.
  4. Klicken Sie auf Speichern.

The image editor with title and description fields.png

Vorschaubilder für Blogeinträge und Veranstaltungen

Der Titel eines Blogeintrags oder eines Events dient als Alternativtext für das Vorschaubild des Beitrags oder Events. Für Veranstaltungsseiten ist dies bei Listen- und Kalenderlayouts gleich.

Seiten-Vorschaubild

Dateinamen dienen als Alternativtext für Seiten-Vorschaubilder. Stellen Sie sicher, dass Sie alle Vorschaubilder so benennen, wie sie erscheinen sollen, bevor Sie sie hochladen.

Vorschaubild für Video-Blöcke

Wenn du über eine URL Video-Blöcke zu einer Seite hinzufügst, generiert der Block automatisch ein Vorschaubild und wird als Overlay angezeigt. Wenn du ein benutzerdefiniertes Vorschaubild hinzufügst, wird der Dateiname in der statischen URL angezeigt, jedoch nicht als Alternativtext. Es ist nicht möglich, Alternativtext zu Vorschaubildern von Video-Blöcken hinzuzufügen.

Produkt-Bilder

Wie du Alternativtext zu einem Produktbild auf der Shop-Seite hinzufügst, hängt vom verwendeten Produkt-Editor ab:

  1. Bewege auf deiner Shop-Seite den Mauszeiger über ein Produkt und doppelklicke dann darauf.
  2. Bewege den Mauszeiger über das Produktbild, klicke auf die drei Punkte und dann auf Metadaten bearbeiten.
  3. Füge deinen Text in das Feld Alternativtext ein. Wenn du keinen Metadatentext hinzufügst, wird der Produktname zum Alternativtext.
  4. Klicken Sie auf Speichern.
    1. Bewege auf deiner Shop-Seite den Mauszeiger über ein Produkt und doppelklicke dann darauf.
    2. Bewegen Sie den Mauszeiger über das Produktbild und klicken Sie auf .
    3. Füge Alternativtext in das Feld Bildtitel eingeben ein. Wenn du keinen Bildmetadatentext hinzufügst, wird der Produktname zum Alternativtext.
    4. Klicken Sie auf Speichern.

Cover-Seiten-Bilder (Version 7.0)

So fügen Sie Alternativtext zu einem Cover-Seiten-Bild hinzu:

    1. Klicken Sie im Cover-Seiten-Menü auf das Menü Medien.
    2. Fahren Sie mit der Maus über das Bild und klicken Sie auf .
    3. Fügen Sie Alternativtext zum Feld Alternativtext eingeben … hinzu.
    4. Klicken Sie auf Speichern.

Galerie-Seiten-Bilder (Version 7.0)

So fügen Sie Alternativtext zu einem Bild auf einer Galerie-Seite hinzu:

  1. Klicken Sie im Seiten-Menü auf die Galerie-Seite.
  2. Suchen Sie das zu bearbeitende Bild, fahren Sie mit der Maus darüber und klicken Sie auf  .
  3. Füge Alternativtext im Feld Bildtitel hinzu. Wenn du keinen Bildtitel hinzufügst, wird der Text im Beschreibungsfeld zum Alternativtext.
  4. Klicken Sie auf Speichern.

Nächste Schritte

War dieser Beitrag hilfreich?
138 von 242 fanden dies hilfreich
Alternativtext zu Bildern hinzufügen