Allgemein

Warum Alternative Texte für Bilder wichtig sind – und wie du sie richtig einsetzen

In deiner Karriereseite kannst du an vielen Stellen Bilder einbinden – zum Beispiel als Keyvisual, in einer Galerie oder innerhalb der Kontakt-Komponente. Ob diese Bilder nur dekorativ oder inhaltlich relevant sind, hängt ganz von dir ab: du entscheidest, welche Bilder du hochlädst und welchen Zweck sie erfüllen.

Gerade bei informativen Bildern – z. B. einem Teamfoto, einem Organigramm oder einem Zertifikat deines Unternehmens – solltest du einen alternativen Text hinzufügen. Dieser Text hilft Menschen mit Sehbehinderung, den Inhalt deiner Seite zu verstehen, und verbessert gleichzeitig die Auffindbarkeit deiner Seite bei Suchmaschinen.

Damit du deine Seite barrierefreier gestalten kannst, haben wir für die wichtigsten Komponenten die Möglichkeit geschaffen, alternative Texte zu hinterlegen. In diesem Leitfaden zeigen wir dir, wo du alternative Texte pflegen kannst.

Best Practice

Worauf du beim Verfassen Alternativer Texte achten solltest

Ein alternativer Text sollte kurz und präzise beschreiben, was auf dem Bild zu sehen ist – und warum es für den Inhalt der Seite relevant ist. Ziel ist es, Nutzer*innen mit Screenreadern die gleichen Informationen zu vermitteln wie allen anderen Besuchenden der Seite.

Beachte dabei folgende Grundregeln:

Beschreibe das Wesentliche: Was zeigt das Bild? Welche Information soll vermittelt werden?
Vermeide Redundanzen: Wenn die Bildinformation bereits im Fließtext daneben steht, muss sie nicht wiederholt werden.
Keine Formulierungen wie „Bild von...“ oder „Grafik zeigt...“: Screenreader kündigen bereits an, dass es sich um ein Bild handelt.
Halte den Text möglichst kurz: Ein bis zwei Sätze reichen meist aus.

Was ist mit rein dekorativen Bildern?

Wenn ein Bild keine inhaltliche Bedeutung hat und nur der Gestaltung oder Stimmung dient, soll das Feld für den alternativen Text bewusst leer gelassen werden. Andernfalls wird unnötiger Inhalt vorgelesen, was die Barrierefreiheit sogar verschlechtern kann.

Typische Beispiele für dekorative Bilder in deiner Karriere-Website:

Ein stimmungsvolles Bürofoto im Hintergrund eines Komponente
Ein Symbolbild ohne konkreten Bezug zum Inhalt
Ein allgemeines Bild, das nur zur Auflockerung zwischen Textblöcken verwendet wird

Komponenten mit Alt-Texten

Folgende Komponenten mit Bildern können um alternative Texte ergänzt werden:

Mosaik
Keyvisual
Keyvisual mit Galerie
Keyvisual mit Jobs
Keyvisual mit Suche
Keyvisual mit Filtern
Text und Media
Accordions und Media
Media-Mix
Zielgruppen
Multifunktionale Teaser
Große Teaser
Galerie
Imagebox
Zitat
Zitat-Galerie
Einstellungsprozess
Kontakte
Zertifikate
Soziale Links

Mosaik

Öffnen das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Wähle eine der Reihen.
Wähle eine der Kacheln.
- Wenn du „Bild“ auswählst:
  - Gib den alternativen Text für das Bild ein.
- Wenn du „Zitat“ auswählst:
  - Gib den alternativen Text für das Portraitbild ein, falls es aktiviert ist.

Keyvisual

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Bild/Video“.
Wähle unter „Visueller Inhalt“ die Option „Bild oder Galerie“ aus.
Klicke auf die gewünschte Bildkachel.
Gib den alternativen Text ein.

Keyvisual mit Galerie

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Wähle den gewünschten Slide aus.
Gehe zum Abschnitt „Hintergrundtyp“.
Wähle „Bild“ aus.
Gib den alternativen Text für das Bild ein.

Keyvisual mit Jobs

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Teaser“.
- Falls die Option „Aktuelle Jobs anzeigen“ deaktiviert ist:
  - Wähle einen Teaser aus.
  - Gib den alternativen Text für das Bild ein.
Wechsle zum Reiter „Hintergrund“
- Wähle „Bild“ aus.
- Gib den alternativen Text für das Bild ein.

Keyvisual mit Suche

Das Eingabefeld für den alternativen Text findest du wie folgt:

Wechsle zum Reiter „Hintergrund“
Wähle „Bild“ aus.
Gib den alternativen Text für das Bild ein.

Keyvisual mit Filtern

Das Eingabefeld für den alternativen Text findest du wie folgt:

Wechsle zum Reiter „Hintergrund“
Wähle „Bild“ aus.
Gib den alternativen Text für das Bild ein.

Text und Media

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Medien“.
Wähle unter „Medientyp“ die Option „Bild“ aus:
Klicke auf die gewünschte Bildkachel.
Gib den alternativen Text ein.

Accordions und Media

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Medien“.
Wähle unter „Medientyp“ die Option „Bild“ aus:
Klicke auf die gewünschte Bildkachel.
Gib den alternativen Text ein.

Media-Mix

Öffne das Redaktionsfenster.
Auf der rechten Seite befinden sich insgesamt neun Reiter, in denen du vordefinierte Inhalte hinterlegen kannst.
In jedem dieser Reiter hast du die Möglichkeit, ein Bild einzufügen:
- Wenn du ein Bild verwendest gib den alternativen Text dafür ein.
Im Reiter „Zitat“ (3. Reiter von oben) kann zudem ein Portraitbild aktiviert und eingefügt werden:
- Bitte gib auch hierfür einen alternativen Text ein.
Zusätzlich können im Reiter „Galerie“ (6. Reiter von oben) mehrere Bilder hinzugefügt werden:
- Gib in diesem Fall bitte für jedes einzelne Bild (jeden Slide) einen alternativen Text ein.

Zielgruppen

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Wähle den gewünschten Slide aus.
Gib den alternativen Text für das Bild ein.

Multifunktionale Teaser

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Teaser“.
Klicke auf den gewünschten Teaser.
Gib den alternativen Text für das Bild ein.

Große Teaser

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Teaser“.
Klicke auf den gewünschten Teaser.
Gib den alternativen Text für das Bild ein.

Galerie

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Klicke auf die gewünschte Bildkachel.
Gib den alternativen Text für das Bild ein.

Imagebox

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Klicke auf die gewünschte Bildkachel.
Gib den alternativen Text für das Bild ein.

Zitat

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Klicke auf das gewünschte Zitat.
Gib den alternativen Text für das Portraitbild ein, falls es aktiviert ist.

Zitat-Galerie

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Zitate“.
Klicke auf das gewünschte Zitat.
Gib den alternativen Text für das Portraitbild ein, falls es aktiviert ist.

Einstellungsprozess

Das Eingabefeld für den alternativen Text findest du wie folgt:

Öffne das Redaktionsfenster.
Wechsle zum Reiter „Inhalt“.
Stelle sicher, dass die Option „Icons statt Bilder verwenden“ deaktiviert ist.
Klicke auf den gewünschten Schritt.
Gib den alternativen Text für das Bild ein.