Zum Hauptinhalt springen

Fix-Guide · Divi Theme & Builder

Die 5 häufigsten BFSG-Findings — und wie Sie sie in Divi beheben.

Dieser Guide ist für Divi Theme + Visual Builder ab Version 4.20 (2024). Sie nutzen Elementor oder den Block-Editor? Elementor-Guide oder Gutenberg-Guide — die Klickpfade sind dort anders.

Lesezeit ca. 8 Min.5 Findings · Divi ≥ 4.20
Von ·

Kontext · Divi (Elegant Themes)

Divi ist im DACH-Raum mit ~ 4 % der WordPress-Sites weniger verbreitet als Elementor, aber überproportional populär bei Agenturen, Coaches und Designer:innen — wegen der All-in-One-Lizenz (~89 €/Jahr für alle Themes und Plugins) und der nativen Theme-Builder-Funktion. Persona: Agentur-Mandate, Personal-Brand-Sites, Online-Coaches mit eigener Visualität. Was leicht ist: Visual Builder mit Inline-Editing, sehr großer Module-Pool, einheitliche Designsprache über Theme Builder. Was Divi-spezifisch schwierig wird: Title-Modul und Text-Modul haben getrennte H-Tag-Auswahlen, die viele Nutzer:innen ignorieren — Folge: jede Sektion bekommt H2, die echte Hierarchie geht verloren. Slider-Modul ist keyboard-feindlich (kein Tab-Trap-Management). Theme-Customizer-Farben kommen ohne Kontrast-Warnung — viele Divi-Sites haben hellgrau-auf-weiß-Texte. Contact-Form-Modul hat ein Label-Feld, das aber häufig nur als Placeholder genutzt wird. Die folgenden fünf Findings sind in Divi-Sites die häufigsten.

Inhalt

  1. 01Alt-Texte im Divi-Image-Modul
  2. 02Heading-Hierarchie über das Title-Modul
  3. 03Farbkontrast im Theme-Customizer
  4. 04Tastatur-Bedienbarkeit von Slider- und Fullwidth-Modulen
  5. 05Formulare im Contact-Form-Modul
Kritisch01 · WCAG 1.1.1

Alt-Texte im Divi-Image-Modul

Divi pflegt Alt-Texte direkt im Image-Modul — anders als Elementor. Stolperstein sind Hintergrund-Bilder in Section/Row, die werden separat behandelt.

Im Image-Modul (Standardfall)

  1. Im Visual Builder das Image-Modul anklicken — das Settings-Panel öffnet sich.
  2. Tab „Inhalt" → Abschnitt „Bild".
  3. Das Feld „Alternativtext" ausfüllen — beschreibend, ein vollständiger Satz, keine Wörter wie „Bild" oder „Foto".
  4. Speichern. Im Frontend nichts sichtbar — der Text wird nur Screenreadern vorgelesen.

Stolperstein: Hintergrund-Bilder

Section- und Row-Hintergrund-Bilder rendert Divi als background-image in CSS — ohne <img> im DOM. Heißt: Alt-Text gibt es dort nicht. Wenn das Bild rein dekorativ ist (Pattern, Textur), ist das OK. Wenn es Inhalt trägt (z. B. ein Foto mit Schriftzug), sollte der Inhalt zusätzlich als sichtbarer Text in der Section stehen.

Galerie-Modul & Fullwidth-Slider

Beim Gallery-Modul stammen Alt-Texte aus der WordPress-Medienbibliothek — wie bei Elementor. Sie müssen also pro Bild dort einmalig den Alt-Text setzen. Beim Fullwidth-Slider-Modul: pro Slide ein eigenes Alt-Feld unter „Inhalt → Hintergrundbild".

Wichtig02 · WCAG 2.4.6

Heading-Hierarchie über das Title-Modul

Divi Theme Customizer hat eigene Styles für H1–H6 — das verleitet dazu, das Heading-Level nach Look statt Semantik zu wählen.

Die goldene Regel

  • Genau eine H1 pro Seite — meist der Page-Title, in Divi-Themes oft automatisch.
  • H2 für Hauptabschnitte, H3 für Unterabschnitte, niemals Stufen überspringen.
  • Heading-Level semantisch wählen, nicht nach Schriftgröße.

Heading-Tag in einem Text-Modul ändern

  1. Im Visual Builder das Text-Modul anklicken.
  2. Markieren Sie die Zeile, die eine Überschrift werden soll, und klicken Sie auf den Heading-Button in der Toolbar.
  3. Wählen Sie H2, H3, ... je nach semantischer Ebene.

Heading-Modul vs. Text-Modul

Divi hat ein eigenes Heading-Modul (eigenes Modul, nicht das Text-Modul). Dort:

  1. Modul anklicken → Tab „Inhalt".
  2. Abschnitt „Titel" → „Titel-Stufe" (Title Level) Dropdown — H1 bis H6.
  3. Im Design-Tab passen Sie die Schrift an — die semantische Ebene bleibt davon unberührt.

Hierarchie prüfen

Divi hat keine eingebaute Document-Outline-Ansicht. Empfehlung: Browser-Erweiterung HeadingsMap (öffnet in neuem Fenster) — zeigt den Heading-Baum jeder Seite.

Typischer Divi-Fehler

Im Theme Customizer können Sie H1 bis H6 unterschiedlich groß stylen. Das verleitet dazu, das Heading-Modul als Styling-Tool zu nutzen: „ich brauche kleinen Text → H6". Stattdessen die Schrift im Design-Tab des Moduls anpassen und semantisch das richtige Level setzen.

Kritisch03 · WCAG 1.4.3

Farbkontrast im Theme-Customizer

Divi warnt nicht vor schlechtem Kontrast. Klassiker: weißer Text auf hellen Hero-Bildern — sieht schick aus, ist aber unlesbar.

Die WCAG-Mindestwerte

  • Normaler Text: mindestens 4.5:1 Kontrast zum Hintergrund.
  • Großer Text (ab 18 pt bzw. 14 pt fett): mindestens 3:1.
  • UI-Elemente und Icons: ebenfalls 3:1 zum Hintergrund.

Theme-weite Farben sauber setzen

  1. WP-Dashboard → „Divi" → „Theme-Anpasser" → „Allgemeine Einstellungen" → „Farben".
  2. Setzen Sie Primärfarbe, Sekundärfarbe, Akzentfarbe — und prüfen Sie jede gegen Weiß und Schwarz mit dem WebAIM Contrast Checker (öffnet in neuem Fenster).
  3. Speichern. Nutzen Sie diese Farben in Modulen über das „Globale Farbe"-Dropdown statt „Eigene Farbe" — dann ist es Site-weit konsistent.

Pro Modul prüfen

  1. Modul anklicken → Tab „Design".
  2. Abschnitt „Text" → Textfarbe ablesen (Hex-Wert kopieren).
  3. Hintergrund: oft eine Stufe höher (Row / Section) → dortige Background-Color kopieren. WebAIM-Tool prüfen.

Divi-Klassiker: weißer Text auf Hero-Bild

Sehr häufig in Divi-Templates: ein riesiges Hero-Bild als Section-Background, darüber weißer Schrift­zug. Der Kontrast variiert pro Bildstelle — auf hellen Stellen des Hintergrund-Bildes ist der Text unlesbar.
Lösung: einen halbtransparenten Overlay zum Background hinzufügen (Section-Einstellungen → Design → Hintergrund → „Hintergrund-Overlay-Farbe"), z. B. schwarz mit 40% Opacity. Der weiße Text bleibt lesbar, das Bild bleibt sichtbar.

Kritisch04 · WCAG 2.1.1

Tastatur-Bedienbarkeit von Slider- und Fullwidth-Modulen

Slider und Fullwidth-Module brauchen manuelle Pause-/Esc-Konfiguration. Divi-Themes deaktivieren oft Focus-Ringe per Custom-CSS.

Der 30-Sekunden-Test

  1. Öffnen Sie Ihre Seite im Browser.
  2. Drücken Sie nur die Tab-Taste — keine Maus.
  3. Können Sie jeden Link, jeden Button, jedes Formularfeld erreichen?
  4. Sehen Sie immer einen sichtbaren Focus-Ring?
  5. Slider und Modals: stoppt der Slider bei Tastatur-Fokus? Schließt das Modal mit Esc?

Häufige Divi-Probleme + Lösung

  • Slider/Fullwidth-Slider läuft beim Tab-Fokus weiter: Slider-Modul-Einstellungen → Tab „Inhalt" → „Slider-Steuerelemente" → Toggle „Pause beim Fokus" auf „Ja".
  • Kein sichtbarer Focus-Ring: Viele Divi-Child-Themes setzen outline: none in den Theme-Style-CSS. Im Theme Customizer → „Eigenes CSS" einfügen:
    a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}
  • Skip-Link fehlt: Divi hat keinen built-in Skip-Link. Plugin-Empfehlung: Skip-To Toolbar Menu, oder ein Snippet in der child-theme/functions.php das einen Skip-Link nach <body> injiziert.
  • Mobile-Menü: Divi's eigenes Hamburger-Menü ist seit Version 4.10 tastatur-fest. Eigene Custom-Menüs (z. B. via Theme Builder mit Code-Modulen) müssen Sie selbst prüfen.
  • Accordion / Toggle / Tabs-Module: sind tastatur-fest by Default. Wenn nicht, prüfen Sie, ob ein Drittanbieter-Plugin diese Module überschreibt.
Wichtig05 · WCAG 3.3.2

Formulare im Contact-Form-Modul

Im Divi-eigenen Contact-Form-Modul ist Label Pflicht — aber Sichtbarkeits-Toggles können das Label verbergen ohne ARIA-Ersatz.

Divi Contact-Form-Modul — Label-Setup

  1. Im Visual Builder Contact-Form-Modul anklicken — Settings-Panel öffnet.
  2. Tab „Inhalt" → Klick auf ein Feld (z. B. „E-Mail").
  3. Im Feld-Editor: „Titel" ist das sichtbare Label — pflichtweise ausfüllen (z. B. „Ihre E-Mail-Adresse").
  4. Toggle „Erforderliches Feld" auf „Ja", wenn das Feld Pflicht ist — Divi setzt automatisch aria-required="true".
  5. Im Tab „Design" → Abschnitt „Felder" → Toggle „Felder-Titel ausblenden" muss auf „Nein" stehen.

Wenn Sie Labels visuell verbergen wollen

Manche Designs setzen das Label-Toggle auf „Ja, ausblenden". Folge: Sehende User sehen den Titel nicht, Screenreader auch nicht. Korrekter Workflow:

  • Label-Toggle auf „Nein" (Label bleibt sichtbar).
  • Im Design-Tab das Label-Styling so anpassen, dass es ins Design passt (z. B. kleinere Schrift, helle Farbe).

Externe Form-Plugins (Contact Form 7, Gravity Forms, Forminator)

Eingebettet als Code-Modul oder via Plugin-spezifischem Modul. Das Label-Setup passiert dann im jeweiligen Plugin —Anleitung im Gutenberg-Guide.

Fertig mit den Fixes? Erneut prüfen.

Sie haben die Top-5 erledigt — gut. Aber Divi-Updates, neue Child-Themes und neue Inhalte können neue Issues erzeugen. Ein erneuter Scan kostet 60 Sekunden.

Erneut scannen

Sie nutzen Avada? Avada-Guide folgt. Tragen Sie sich auf der Early-Access-Liste ein — Sie werden benachrichtigt, sobald er online ist.