Divi ist einer der bekanntesten Page Builder für WordPress. Viele Webseitenbetreiber nutzen Divi, weil sich damit Seiten relativ einfach gestalten lassen. Texte, Bilder, Buttons, Spalten, Slider, Formulare und ganze Layouts können bequem zusammengebaut werden, ohne direkt im Code arbeiten zu müssen.
Das ist praktisch. Gerade für kleine Unternehmen, Selbstständige und Agenturen ist Divi oft eine schnelle Lösung, um ansprechende Webseiten zu erstellen. Doch beim Thema Barrierefreiheit gibt es einige Punkte, auf die man achten sollte. Denn eine Webseite sieht mit Divi vielleicht modern und sauber aus, ist aber nicht automatisch barrierefrei.
Viele Probleme entstehen nicht, weil Divi grundsätzlich ungeeignet wäre. Sie entstehen oft dadurch, wie Module eingesetzt, Inhalte strukturiert und Designs gestaltet werden. Genau deshalb lohnt sich ein genauer Blick auf die häufigsten Schwachstellen.
Divi macht eine Webseite nicht automatisch barrierefrei
Ein häufiger Irrtum ist: Wenn eine Webseite mit einem professionellen Theme oder Page Builder gebaut wurde, wird sie schon technisch sauber sein. Ganz so einfach ist es leider nicht.
Divi bietet viele Gestaltungsmöglichkeiten. Aber Barrierefreiheit hängt nicht nur vom Werkzeug ab, sondern auch von der Umsetzung. Welche Überschriften werden verwendet? Haben Bilder Alt-Texte? Sind Buttons verständlich beschriftet? Funktionieren Menüs mit der Tastatur? Sind Kontraste ausreichend? Sind Formulare für Screenreader nutzbar?
All diese Entscheidungen trifft am Ende derjenige, der die Webseite baut oder pflegt.
Divi kann also eine gute Grundlage sein, aber keine Garantie.
Problem 1: Überschriften werden nach Optik gewählt
Einer der häufigsten Fehler bei Divi-Webseiten betrifft die Überschriftenstruktur. Im Visual Builder ist es sehr einfach, Überschriften optisch anzupassen. Man wählt ein Textmodul, stellt eine große Schrift ein und entscheidet sich vielleicht für H3 oder H4, weil es gerade gut aussieht.
Aus Sicht der Barrierefreiheit ist das problematisch. Überschriften sind nicht nur Design. Sie bilden die Struktur einer Seite. Die H1 sollte das Hauptthema beschreiben. H2-Überschriften gliedern große Abschnitte. H3-Überschriften unterteilen diese Bereiche weiter.
Wenn die Reihenfolge durcheinandergerät, wird die Seite schwerer verständlich. Für Screenreader-Nutzer ist eine saubere Überschriftenstruktur besonders wichtig, weil sie damit schnell durch Inhalte navigieren können.
Besser ist es, zuerst die logische Struktur festzulegen und die Optik danach über Design-Einstellungen anzupassen.
Problem 2: Zu viele Animationen und Effekte
Divi macht es sehr einfach, Animationen einzubauen. Elemente können einfliegen, einblenden, zoomen oder sich beim Scrollen bewegen. Das sieht auf den ersten Blick dynamisch aus, kann aber schnell zu viel werden.
Bewegung lenkt ab. Besonders Menschen mit Konzentrationsproblemen, visueller Empfindlichkeit oder bestimmten neurologischen Einschränkungen können durch zu viele Animationen belastet werden. Auch für normale Besucher wirkt eine Seite schnell unruhig, wenn ständig etwas auftaucht oder sich bewegt.
Animationen sollten deshalb sparsam eingesetzt werden. Ein dezentes Einblenden ist oft unproblematisch. Eine Seite, auf der fast jeder Abschnitt animiert erscheint, ist dagegen keine gute Idee.
Wichtig ist: Bewegung darf Inhalte unterstützen, aber nicht die Orientierung stören.
Problem 3: Slider und Karussells werden zu wichtig genommen
Divi bietet Slider-Module, die gerne auf Startseiten verwendet werden. Viele Webseitenbetreiber nutzen sie, um mehrere Botschaften auf engem Raum unterzubringen. Das klingt praktisch, ist aber aus Sicht der Barrierefreiheit oft schwierig.
Automatische Slider wechseln häufig zu schnell. Nutzer haben dann nicht genug Zeit, den Inhalt zu lesen. Wer mit einem Screenreader arbeitet oder vergrößerte Darstellung nutzt, kommt möglicherweise gar nicht hinterher. Außerdem werden Inhalte auf späteren Slides oft übersehen.
Besonders problematisch ist es, wenn wichtige Informationen nur im Slider stehen. Zum Beispiel Aktionen, Öffnungszeiten, Leistungen oder zentrale Hinweise.
Besser ist es, wichtige Inhalte direkt sichtbar auf der Seite zu platzieren. Ein statischer Hero-Bereich mit klarer Botschaft funktioniert oft besser als ein wechselnder Slider mit mehreren Aussagen.
Problem 4: Buttons sind nicht eindeutig beschriftet
Divi-Buttons lassen sich schnell gestalten. Farbe, Form, Größe und Icon sind leicht angepasst. Doch der Text im Button wird oft vernachlässigt.
Buttons wie „Mehr“, „Weiter“, „Los“ oder „Hier klicken“ sind nicht ideal. Sie sagen nicht genau, was passiert. Für Screenreader-Nutzer oder Menschen, die eine Seite schnell überfliegen, ist das wenig hilfreich.
Besser sind klare Button-Texte wie:
„Kontaktformular öffnen“
„Angebot anfragen“
„Leistungen ansehen“
„Termin buchen“
„PDF herunterladen“
Ein Button sollte immer erklären, welche Aktion ausgelöst wird. Gerade bei wichtigen Schritten wie Anfrage, Bestellung, Registrierung oder Download ist das entscheidend.
Problem 5: Schlechte Farbkontraste im Design
Divi-Webseiten werden oft stark nach Markenfarben gestaltet. Das ist grundsätzlich sinnvoll, kann aber zu Kontrastproblemen führen. Besonders helle Farben, Pastelltöne oder transparente Hintergründe sehen zwar elegant aus, sind aber nicht immer gut lesbar.
Typische Probleme sind:
hellgrauer Text auf weißem Hintergrund,
weiße Schrift auf hellen Bildern,
farbige Buttons mit zu heller Beschriftung,
kaum sichtbare Links,
zu dezente Formularhinweise.
Gute Lesbarkeit sollte wichtiger sein als ein besonders dezenter Look. Texte, Links und Buttons müssen sich klar vom Hintergrund abheben. Das gilt besonders auf Smartphones, bei Sonnenlicht oder für ältere Nutzer.
Problem 6: Text auf Bildern ist schwer lesbar
Viele Divi-Layouts arbeiten mit großen Hintergrundbildern und darübergelegtem Text. Das kann optisch stark wirken, ist aber schnell problematisch.
Ein Foto hat helle und dunkle Bereiche. Wenn weißer Text über einem hellen Bildbereich liegt, wird er schlecht lesbar. Bei wechselnden Bildschirmgrößen verschiebt sich der Text manchmal so, dass er auf einem ungünstigen Bildausschnitt landet.
Eine gute Lösung ist ein ausreichend dunkler oder heller Overlay-Bereich hinter dem Text. Auch ein ruhiger Hintergrund oder eine separate Textbox kann helfen.
Wichtige Texte sollten nie nur „irgendwie schön“ auf einem Bild liegen. Sie müssen zuverlässig lesbar bleiben.
Problem 7: Fokuszustände sind schlecht sichtbar
Wer eine Webseite mit der Tastatur bedient, bewegt sich mit der Tab-Taste von Element zu Element. Dabei muss jederzeit sichtbar sein, welches Element gerade aktiv ist. Genau dieser Fokuszustand wird bei vielen Designs übersehen oder sogar entfernt, weil er optisch stört.
Das ist ein großer Fehler. Ohne sichtbaren Fokus wird die Tastaturbedienung zum Ratespiel.
Bei Divi-Webseiten sollte man deshalb prüfen, ob Links, Buttons, Menüeinträge, Formularfelder und Slider-Steuerungen einen klar erkennbaren Fokus haben. Ein feiner, kaum sichtbarer Rahmen reicht oft nicht aus. Der Fokus muss deutlich genug sein, damit man ihn sofort erkennt.
Problem 8: Mobile Menüs sind nicht immer gut bedienbar
Das mobile Menü ist auf vielen Webseiten einer der wichtigsten Bereiche. Gerade bei Divi wird viel Wert auf das Aussehen des Menüs gelegt. Doch Barrierefreiheit bedeutet mehr als ein hübsches Hamburger-Icon.
Ein mobiles Menü sollte per Tastatur erreichbar sein, sich verständlich öffnen und schließen lassen und eine logische Reihenfolge haben. Der Fokus sollte nicht hinter dem Menü verschwinden. Außerdem muss klar sein, ob das Menü gerade geöffnet oder geschlossen ist.
Auch Untermenüs können problematisch sein. Wenn sie nur per Hover funktionieren, sind sie auf Touchscreens oder mit Tastatur schwer nutzbar. Eine Navigation sollte nicht davon abhängen, dass jemand mit der Maus genau an der richtigen Stelle bleibt.
Problem 9: Formulare sind oft nicht sauber beschriftet
Kontaktformulare sind auf Divi-Webseiten sehr häufig. Ob über das Divi-Kontaktformularmodul oder ein externes Formular-Plugin: Die Bedienbarkeit muss stimmen.
Problematisch wird es, wenn Formularfelder keine klaren Labels haben, Pflichtfelder nur durch Sternchen markiert werden oder Fehlermeldungen unverständlich sind. Platzhaltertexte im Feld sollten keine dauerhafte Beschriftung ersetzen.
Ein gutes Formular sagt klar:
Was soll eingetragen werden?
Welche Felder sind Pflichtfelder?
Was ist falsch, wenn eine Eingabe nicht akzeptiert wird?
Wurde die Nachricht erfolgreich gesendet?
Gerade für Screenreader-Nutzer sind diese Informationen entscheidend.
Problem 10: Icons ohne Text sind nicht eindeutig
Divi wird gerne mit Icons genutzt. Kleine Symbole für Telefon, E-Mail, Warenkorb, Suche oder Social Media sehen modern aus und sparen Platz. Aber ein Icon allein ist nicht immer verständlich.
Nicht jeder erkennt sofort, was ein Symbol bedeutet. Außerdem brauchen Icons eine sinnvolle Beschriftung für Screenreader, wenn sie eine Funktion haben.
Ein Such-Icon sollte zum Beispiel nicht nur ein Lupensymbol sein, sondern verständlich als „Suche öffnen“ oder „Suchen“ erkennbar sein. Ein Social-Media-Icon sollte nicht einfach nur „Link“ heißen. Und ein Telefon-Icon sollte deutlich machen, dass dort eine Telefonnummer oder ein Anruf-Link steht.
Wenn ein Icon eine Aktion auslöst, braucht es eine klare Bedeutung.
Problem 11: Akkordeons und Tabs können verwirren
Divi bietet Module wie Akkordeons und Tabs. Diese sind praktisch, um Inhalte kompakt darzustellen. Aber auch hier gibt es Barrierefreiheitsrisiken.
Nutzer müssen erkennen können, welcher Bereich geöffnet ist. Die Steuerung muss per Tastatur funktionieren. Screenreader sollten verstehen, ob ein Abschnitt ein- oder ausgeklappt ist. Außerdem sollten wichtige Inhalte nicht so versteckt werden, dass Besucher sie leicht übersehen.
Akkordeons sind sinnvoll für ergänzende Informationen. Kritische Inhalte sollten aber lieber direkt sichtbar sein.
Problem 12: Reihenfolge im Layout passt nicht immer zur Lesereihenfolge
Divi arbeitet viel mit Spalten, Reihen und Modulen. Visuell kann ein Layout sehr gut aussehen. Technisch kann die Reihenfolge aber trotzdem ungünstig sein.
Das fällt besonders bei mehrspaltigen Abschnitten auf. Auf dem Desktop steht links vielleicht ein Bild und rechts ein Text. Auf dem Smartphone wird daraus eine Reihenfolge untereinander. Wenn diese Reihenfolge nicht logisch ist, kann der Zusammenhang verloren gehen.
Auch Screenreader folgen der technischen Struktur. Deshalb sollte man prüfen, ob Inhalte in einer sinnvollen Reihenfolge gelesen werden. Eine schöne Optik allein reicht nicht.
Problem 13: Popups und Overlays blockieren die Seite
Viele Divi-Webseiten nutzen zusätzliche Popup-Lösungen für Newsletter, Angebote oder Kontaktformulare. Solche Overlays können schnell zur Barriere werden.
Ein Popup muss per Tastatur erreichbar und schließbar sein. Der Fokus sollte ins Popup springen und nicht auf der Seite im Hintergrund bleiben. Der Schließen-Button muss klar erkennbar sein. Auf dem Smartphone darf das Fenster nicht abgeschnitten sein.
Wenn ein Popup schlecht umgesetzt ist, kann es die komplette Webseite blockieren. Deshalb sollte man solche Elemente besonders sorgfältig testen.
Problem 14: Bilder werden ohne sinnvolle Alt-Texte eingebunden
Bilder lassen sich in Divi sehr einfach einfügen. Dabei wird der Alt-Text aber oft vergessen. Das ist besonders bei wichtigen Bildern problematisch.
Ein Bild, das nur dekorativ ist, braucht keine ausführliche Beschreibung. Ein Produktbild, ein Teamfoto, eine Infografik oder ein Screenshot dagegen schon. Der Alt-Text sollte kurz erklären, was zu sehen ist oder welche Bedeutung das Bild an dieser Stelle hat.
Dateinamen wie „img_4582.jpg“ oder „header-neu-final.png“ helfen niemandem weiter. Gute Alt-Texte sind ein einfacher, aber wichtiger Schritt zu mehr Barrierefreiheit.
Problem 15: Zu viele Module machen die Seite unruhig
Divi bietet sehr viele Gestaltungsmöglichkeiten. Genau das kann zur Falle werden. Wenn zu viele Module, Effekte, Farben, Boxen, Icons und Bewegungen kombiniert werden, entsteht schnell eine überladene Webseite.
Barrierefreiheit profitiert oft von Klarheit. Eine ruhige Seite mit gut lesbaren Texten, klaren Buttons und logischer Struktur ist meistens besser als ein Layout, das ständig Aufmerksamkeit erzeugen will.
Nicht alles, was technisch möglich ist, ist auch sinnvoll.
Wie man eine Divi-Webseite einfacher prüft
Ein guter erster Schritt ist ein manueller Test. Die Seite einmal ohne Maus bedienen. Nur mit Tastatur. Kommt man durch das Menü? Sind Buttons erreichbar? Sieht man den Fokus? Lassen sich Formulare ausfüllen? Können Popups geschlossen werden?
Danach sollte man die Seite auf dem Smartphone prüfen. Sind Texte lesbar? Sind Buttons groß genug? Funktioniert das Menü? Werden Inhalte in sinnvoller Reihenfolge angezeigt?
Auch ein Blick auf die Überschriftenstruktur lohnt sich. Gibt es eine klare H1? Folgen danach H2 und H3 logisch? Werden Überschriften nur wegen ihrer Optik eingesetzt?
Viele Probleme erkennt man bereits mit solchen einfachen Tests.
Divi bewusst einsetzen statt blind gestalten
Divi ist ein mächtiges Werkzeug. Genau deshalb sollte man es bewusst nutzen. Nicht jedes Modul muss eingesetzt werden. Nicht jeder Effekt macht eine Seite besser. Und nicht jedes schöne Layout ist automatisch gut bedienbar.
Wer mit Divi barriereärmer arbeiten möchte, sollte sich bei jedem Abschnitt fragen:
Ist der Inhalt verständlich?
Ist die Struktur logisch?
Kann man alles mit Tastatur bedienen?
Sind Texte und Buttons klar erkennbar?
Ist die Seite auch auf dem Smartphone gut nutzbar?
Versteht ein Screenreader die wichtigsten Elemente?
Diese Fragen helfen oft mehr als der nächste Designeffekt.
Fazit: Divi braucht sorgfältige Umsetzung
Divi kann schöne und moderne Webseiten ermöglichen. Für Barrierefreiheit ist aber entscheidend, wie die Seite gebaut wird. Die häufigsten Probleme entstehen durch falsche Überschriften, schwache Kontraste, unklare Buttons, zu viele Animationen, schwierige Slider, schlecht beschriftete Formulare und fehlende Tastaturbedienung.
Das Gute ist: Viele dieser Punkte lassen sich verbessern, ohne die komplette Webseite neu zu erstellen. Oft reichen bewusstere Designentscheidungen, klare Texte, bessere Struktur und regelmäßige Tests.
Eine Divi-Webseite sollte nicht nur gut aussehen. Sie sollte auch gut nutzbar sein. Denn eine Webseite erfüllt ihren Zweck erst dann richtig, wenn möglichst viele Menschen sie verstehen, bedienen und nutzen können.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.