Figur und Bildunterschriften in Divi 5 nutzen

Die Bedeutung von Figur und Figcaption-Elementen

Bilder auf deiner Website benötigen oft nicht mehr als das, was Divi bereits bietet. Du fügst ein Bildmodul hinzu, stylst es und fertig. Doch es gibt Zeiten, in denen du ein Bild mit einer Beschriftung als eine Einheit definieren möchtest. Genau hier kommen figure und figcaption ins Spiel. Diese HTML-Elemente schaffen eine semantische Beziehung, die bei normalen Layouts oft nicht so klar ausgedrückt wird. Die Frage ist nicht, ob sie besser sind, sondern wann sie sich lohnen.

Wann man Figure-Elemente verwenden sollte

Du hast gelernt, was diese Elemente tun. Nun kommt der schwierigere Teil: Zu entscheiden, wann sie den Aufwand wert sind. Nicht jedes Bild benötigt diese Behandlung, und eine Übernutzung von semantischem Markup kann ebenso problematisch sein wie das Ignorieren.

Aspekt	Div mit Bild	Figure mit Bild
Semantische Bedeutung	Keine	Selbstständiger Inhalt
Unterstützung für Bildunterschriften	Manuelle Textplatzierung	Eingebautes figcaption Element
Barrierefreiheit	Keine Beziehung angekündigt	Als verbundene Einheit angekündigt
SEO-Wert	Bild und Text getrennt indexiert	Bildunterschrift mit Bildkontext indexiert

 

Verwende Figure, wenn:

1. Der Inhalt eine sichtbare Bildunterschrift benötigt.
2. Das Bild auf etwas in deinem Text verweist.
3. Du es verschieben könntest, ohne den Lesefluss zu unterbrechen.
4. Screenreader es als Einheit ankündigen sollten.

Verwende Div, wenn:

1. Das Bild rein dekorativ ist.
2. Das Bild Teil des Seitenlayouts ist.
3. Das Entfernen die Seitenstruktur brechen würde.
4. Keine semantische Beziehung relevant ist.

Wann man Figcaption verwenden sollte

Nicht jedes Mal, wenn du ein Figure-Wrapper hinzufügst, benötigst du ein figcaption. Der elementare Nutzen gestattet in drei bestimmten Situationen die Sichtbarkeit von Texten, damit User deinen Content besser verstehen.

Verwende Figcaption, wenn:

1. Die Zuordnung wichtig ist.
2. Bilder zusätzlichen Kontext über Alt-Text hinaus benötigen.
3. Die Figur ein beschreibendes Label für Leser benötigt.

Verzichte auf Figcaption, wenn:

1. Dein Bild sich von selbst erklärt.
2. Die Bildunterschrift nur Leser bedient und keinen Mehrwert bietet.

Verwendung von Figure und Figcaption in Divi 5 mit semantischem HTML

Du verwendest den Visual Builder, um deine Webseiten zu bauen, aber semantisches HTML hinzuzufügen bedeutet, zwischen einem visuellen Workflow und korrektem Markup wählen zu müssen. Divi 5 ändert das mit seiner neuen Funktion:

So fügst du einen Figure- und Figcaption-Wrapper hinzu

1. Wähle das Bildmodul, das du umschließen möchtest, und öffne dessen Einstellungen.
2. Gehe zum Tab Erweitert, scrolle zur HTML-Optionsgruppe und klicke auf das Dropdown "Elementtyp".
3. Wähle figure aus der Liste.
4. Füge ein Text- oder Überschriftenmodul direkt unter deinem Bild hinzu.
5. Öffne seine Einstellungen und setze den Elementtyp auf figcaption.
6. Die beiden Module funktionieren jetzt als verbundene semantische Einheit.

Ein paar Anwendungsfälle

Figure und Figcaption funktionieren am besten bei spezifischen Seitentypen in Divi. Hier ein paar Ideen:

1. Über-Seiten mit Teamfotos: Porträtbilder mit Bildunterschriften, die Namen, Titel oder kurze Credenzen enthalten.
2. Landingpages mit Statistiken oder Kennzahlen: Diagramme, die Kundenzufriedenheitswerte oder Wachstumsprozente zeigen.
3. Verkaufsseiten mit Produktvergleich: Nebeneinanderliegende Bilder mit klaren Beschriftungen.

Diese Szenarien haben eines gemeinsam: Du baust eine spezifische Seite, auf der einzelne Bilder sichtbaren Kontext benötigen, der sowohl sehenden Nutzern als auch Screenreadern dient.

Wenn Sie Unterstützung benötigen, können Sie sich jederzeit per E-Mail an hello@mikas.at wenden.