Wer eine WordPress-Webseite erstellen möchte, landet meistens bei einer von drei Lösungen: Elementor, Divi oder dem eingebauten Gutenberg-Editor. Alle drei können schöne Webseiten erzeugen. Alle drei lassen sich auch für geschäftliche Seiten, Blogs, Landingpages und teilweise komplette Online-Shops einsetzen.
Beim Thema Barrierefreiheit wird die Entscheidung allerdings etwas komplizierter.
Welcher Editor liefert die sauberste Grundlage? Wo passieren die wenigsten Fehler? Und mit welchem System lässt sich eine Webseite am einfachsten in Richtung BFSG und WCAG verbessern?
Die unbequeme Antwort lautet zunächst: Keiner der drei Editoren macht eine Webseite automatisch barrierefrei. Auch das technisch beste System kann schlecht umgesetzt werden. Umgekehrt kann ein erfahrener Webdesigner mit fast jedem brauchbaren Werkzeug eine gut zugängliche Seite bauen.
Trotzdem gibt es deutliche Unterschiede. Gutenberg hält viele Dinge eher schlicht und nah am WordPress-Kern. Elementor bietet eine sehr visuelle Arbeitsweise und inzwischen zusätzliche Prüffunktionen. Divi stellt besonders viele Gestaltungsmöglichkeiten bereit und hat mit Divi 5 bei der technischen Struktur sichtbar nachgelegt.
Welches System einfacher ist, hängt deshalb auch davon ab, was mit der Webseite passieren soll.
Was ein Page Builder mit Barrierefreiheit zu tun hat
Barrierefreiheit entsteht nicht nur durch große Schrift oder einen zusätzlichen Kontrastmodus. Sie steckt in vielen kleinen Entscheidungen, die beim Erstellen einer Webseite getroffen werden.
Zum Beispiel:
Wird eine Überschrift wirklich als Überschrift ausgezeichnet?
Hat die Seite eine nachvollziehbare H1-, H2- und H3-Struktur?
Sind Buttons und Links mit der Tastatur erreichbar?
Ist der sichtbare Fokus deutlich genug?
Besitzen Bilder passende Alt-Texte?
Sind Formulare verständlich beschriftet?
Funktionieren Menüs auch ohne Maus?
Bleiben Inhalte bei starker Vergrößerung nutzbar?
Können Slider und Animationen gestoppt werden?
Ein Editor kann diese Arbeit erleichtern oder erschweren. Er kann sinnvolle Standardeinstellungen anbieten. Er kann aber auch dazu verleiten, immer mehr Spalten, Effekte, Popups und bewegte Elemente einzubauen.
Genau dort unterscheiden sich Gutenberg, Elementor und Divi.
Gutenberg: Weniger spektakulär, aber oft eine gute Grundlage
Gutenberg ist der normale Block-Editor von WordPress. Für jeden Absatz, jede Überschrift, jedes Bild und jeden Button wird ein eigener Block eingefügt. Das wirkt am Anfang manchmal weniger beeindruckend als ein großer visueller Page Builder. Beim Thema Barrierefreiheit ist diese vergleichsweise einfache Arbeitsweise aber oft ein Vorteil.
Ein Überschriftenblock ist tatsächlich für Überschriften gedacht. Ein Absatzblock enthält normalen Text. Ein Buttonblock erstellt einen Button beziehungsweise Link. Eine Liste wird als Liste aufgebaut.
Dadurch ist die Gefahr etwas kleiner, dass ein Element nur durch sein Aussehen eine bestimmte Bedeutung bekommt.
Natürlich kann man auch mit Gutenberg Fehler machen. Man kann eine H4 direkt nach der H1 verwenden. Man kann einem Bild keinen Alt-Text geben oder einen Link nur „Mehr“ nennen. Der Editor verhindert solche Fehler nicht vollständig.
Die Grundstruktur ist aber häufig übersichtlicher.
Der größte Vorteil von Gutenberg: Weniger unnötige Schichten
Bei komplexen Page Buildern besteht eine Seite häufig aus vielen ineinander verschachtelten Bereichen. Ein äußerer Container enthält eine Reihe, darin liegen Spalten, in den Spalten befinden sich Module und innerhalb dieser Module entstehen weitere Elemente.
Das ist für die Gestaltung praktisch. Im Hintergrund kann daraus aber ein umfangreicher Aufbau entstehen.
Gutenberg kommt bei normalen Inhaltsseiten oft mit weniger Ebenen aus. Eine Überschrift folgt auf einen Gruppenblock, darunter stehen Absätze, Bilder oder Spalten. Das Ergebnis ist nicht automatisch perfekt, aber meist leichter zu überblicken.
Gerade für kleine Firmenwebseiten, Blogs und Ratgeberseiten ist das angenehm. Man benötigt dort oft gar keine hochkomplexen Layouts. Eine klare Überschrift, ein verständlicher Einleitungstext, einige Leistungsbereiche und ein gut erkennbarer Kontaktbutton reichen häufig vollkommen aus.
Je weniger unnötige Elemente eingebaut werden, desto weniger kann später schiefgehen.
Wo Gutenberg trotzdem Probleme macht
Ganz so einfach ist es auch hier nicht. Gutenberg ist nur ein Teil der Webseite. Das Theme bestimmt weiterhin das Menü, den Kopfbereich, den Footer, die Darstellung der Buttons und viele andere globale Elemente.
Ein schlecht programmiertes Theme kann also auch eine ordentlich erstellte Gutenberg-Seite ausbremsen. Dasselbe gilt für zusätzliche Block-Sammlungen. Manche Plugins bringen Dutzende neue Blöcke mit, darunter Slider, Tabs, Popups, Akkordeons und animierte Karten.
Ab diesem Punkt ist die schöne Einfachheit schnell vorbei.
Auch der Site Editor kann unerfahrene Nutzer überfordern. Header, Navigation, Templates, Gruppen, Cover-Blöcke und verschachtelte Container müssen sinnvoll zusammengesetzt werden. Wer dabei nur auf die optische Wirkung achtet, kann trotz Gutenberg eine unlogische Struktur erzeugen.
Gutenberg ist daher nicht automatisch barrierefrei. Er macht es bei einfachen Seiten aber vergleichsweise leicht, nicht unnötig kompliziert zu bauen.
Für wen Gutenberg besonders geeignet ist
Gutenberg passt gut zu Websitebetreibern, die vor allem Inhalte veröffentlichen und keine extrem individuellen Layouts benötigen.
Dazu gehören beispielsweise:
- Blogs und Magazine
- kleinere Firmenwebseiten
- Informationsseiten
- Ratgeber und Wissensbereiche
- einfache Leistungsseiten
- Webseiten, die langfristig von mehreren Redakteuren gepflegt werden
Für solche Projekte würde ich Gutenberg beim Thema Barrierefreiheit meistens vorne sehen. Nicht, weil der Editor jeden Fehler verhindert, sondern weil er weniger dazu verleitet, aus jedem Abschnitt eine kleine Bühnenshow zu machen.
Elementor: Sehr einfach zu gestalten, aber schnell zu viel
Elementor arbeitet deutlich visueller. Man zieht Elemente auf die Seite, verändert Abstände direkt im Editor, baut Container und sieht dabei fast sofort, wie das Ergebnis später aussehen wird.
Für Einsteiger ist das attraktiv. Man muss sich nicht ständig vorstellen, wie eine Änderung auf der fertigen Seite wirkt. Farben, Schriftgrößen, Abstände, Hintergründe und responsive Einstellungen lassen sich bequem anpassen.
Diese direkte Kontrolle kann auch bei der Barrierefreiheit helfen. Schlechte Kontraste, zu kleine Texte oder enge Abstände fallen in einer visuellen Oberfläche schneller auf.
Elementor bietet außerdem Möglichkeiten, HTML-Elemente, Attribute und Beschriftungen genauer zu steuern. Hinzu kommen inzwischen eigene Werkzeuge, die veröffentlichte Seiten auf bestimmte Barrierefreiheitsprobleme prüfen und gefundene Stellen hervorheben können.
Das ist ein echter Vorteil, besonders für Nutzer, die ohne zusätzliche externe Prüflösung arbeiten möchten.
Warum Elementor trotzdem nicht automatisch einfacher ist
Das Problem bei Elementor ist nicht, dass zu wenige Möglichkeiten vorhanden wären. Eher das Gegenteil.
Es gibt Widgets für Slider, Bildergalerien, Karussells, animierte Überschriften, Popups, Formulare, Tabs, Akkordeons, Icons und vieles mehr. Fast jedes Element kann bewegt, eingeblendet, versteckt oder auf verschiedenen Geräten anders dargestellt werden.
Das lädt zum Experimentieren ein.
Eine einfache Startseite verwandelt sich dann schnell in eine Konstruktion aus animierten Texten, mehreren Slidern, schwebenden Buttons und einem Popup, das nach wenigen Sekunden erscheint. Optisch kann das beeindruckend aussehen. Für Tastaturnutzer, Screenreader und Menschen mit Konzentrationsproblemen wird es dadurch aber nicht leichter.
Elementor gibt dem Ersteller viel Freiheit. Diese Freiheit verlangt gleichzeitig mehr Disziplin.
Die Überschriftenfalle bei Elementor
Ein typischer Fehler entsteht bei Überschriften. Im Editor kann ein Text groß, fett und auffällig gestaltet werden. Ob er technisch als H2, H3 oder nur als normaler Text ausgegeben wird, ist eine zusätzliche Entscheidung.
Viele Nutzer wählen die Überschriftenebene nach dem Aussehen. Eine H3 sieht vielleicht gerade kleiner und passender aus, also wird sie verwendet – obwohl inhaltlich eine H2 nötig wäre.
Das lässt sich problemlos vermeiden, wenn man die Struktur vorher plant. Genau das geschieht bei visuellen Editoren aber nicht immer. Man baut erst das Design und denkt später über die Bedeutung der Elemente nach.
Für Barrierefreiheit sollte es umgekehrt sein: Erst die logische Struktur, danach die Gestaltung.
Formulare und Popups brauchen besondere Aufmerksamkeit
Elementor wird häufig für Kontaktformulare, Newsletter-Anmeldungen und Popups verwendet. Diese Bereiche sollte man besonders gründlich prüfen.
Ein Formular kann optisch sauber aussehen und trotzdem unklare Beschriftungen oder schwer verständliche Fehlermeldungen enthalten. Ein Popup kann sichtbar im Vordergrund erscheinen, während der Tastaturfokus im Hintergrund bleibt. Ein Schließen-Symbol kann mit der Maus funktionieren, aber für einen Screenreader keine verständliche Bezeichnung besitzen.
Solche Probleme sind nicht zwangsläufig vorhanden. Sie entstehen durch die jeweilige Konfiguration, durch zusätzliche Plugins oder durch individuelle Anpassungen.
Wer Elementor einsetzt, sollte deshalb nie nur die normale Seitenansicht testen. Formulare, Popups, mobile Menüs und interaktive Widgets müssen einzeln mit Tastatur und möglichst auch mit einem Screenreader geprüft werden.
Für wen Elementor die einfachere Lösung sein kann
Elementor kann die passendere Wahl sein, wenn eine Webseite deutlich individueller gestaltet werden soll und der Ersteller gerne visuell arbeitet.
Besonders sinnvoll kann es sein für:
- individuell gestaltete Unternehmensseiten
- Landingpages
- kleinere Agenturprojekte
- Seiten mit vielen wiederverwendbaren Vorlagen
- Nutzer, die Designänderungen direkt sehen möchten
- Teams, die von integrierten Prüfhinweisen profitieren
Bei einem vorsichtigen Aufbau kann Elementor sehr gute Ergebnisse liefern. Man sollte sich nur nicht von der großen Auswahl an Effekten und Widgets mitreißen lassen.
Meine Faustregel wäre: So viel Elementor wie nötig, aber nicht jedes verfügbare Element benutzen, nur weil es vorhanden ist.
Divi: Viel Freiheit und inzwischen bessere technische Kontrolle
Divi funktioniert ebenfalls als visueller Builder und ist besonders bei Agenturen und langjährigen WordPress-Nutzern verbreitet. Abschnitte, Reihen, Spalten und Module lassen sich direkt auf der Seite bearbeiten. Farben, Abstände, Schriftarten und Effekte können sehr detailliert eingestellt und global wiederverwendet werden.
Bei älteren Divi-Webseiten stößt man allerdings häufiger auf typische Probleme: viele verschachtelte Elemente, nicht optimal gewählte Überschriften, schwache Fokusdarstellungen, unklare Module oder zusätzliche Erweiterungen, die für mehr Barrierefreiheit benötigt werden.
Mit Divi 5 hat sich die Situation verbessert. Semantische Elemente und benutzerdefinierte Attribute lassen sich inzwischen gezielter im Builder vergeben. Dadurch kann ein Bereich beispielsweise als Navigation, Hauptinhalt, Artikel oder Footer ausgezeichnet werden. Auch zusätzliche Beschriftungen für unterstützende Technologien lassen sich genauer steuern.
Das ist ein wichtiger Fortschritt.
Es bedeutet aber nicht, dass jede neue Divi-Seite automatisch sauber aufgebaut wird. Die Funktionen müssen bewusst genutzt werden.
Divi verlangt etwas mehr Wissen über Struktur
Bei Gutenberg ist ein Überschriftenblock recht eindeutig. Bei Divi besteht ein Layout oft aus Modulen, deren technische Bedeutung zusätzlich eingestellt werden kann.
Das eröffnet viele Möglichkeiten. Gleichzeitig muss man wissen, wann eine semantische Auszeichnung sinnvoll ist und wann zusätzliche Attribute benötigt werden.
Wer einfach nur eine schöne Seite zusammenklickt, wird diese Einstellungen möglicherweise gar nicht anfassen. Dann bleiben einige Vorteile ungenutzt.
Divi 5 macht es also leichter, technisch sauber zu arbeiten. Es nimmt dem Ersteller die Entscheidung aber nicht ab.
Genau deshalb würde ich Divi nicht als schlechteste Lösung bezeichnen. Für erfahrene Divi-Nutzer kann es sogar sehr angenehm sein. Für absolute Einsteiger ist Gutenberg beim strukturierten Aufbau jedoch häufig übersichtlicher.
Die typische Divi-Falle: Gestaltung vor Bedeutung
Divi bietet unzählige Einstellungen. Schatten, Animationen, Hover-Effekte, Verlaufsfarben, responsive Varianten und dynamische Inhalte sind schnell eingerichtet.
Das macht Spaß. Und genau dort beginnt manchmal das Problem.
Eine Box wird komplett klickbar gemacht, obwohl im Hintergrund kein sauberer Link entsteht. Eine Überschrift wird als normales Textmodul gestaltet. Ein Icon übernimmt die Funktion eines Buttons, besitzt aber keine verständliche Bezeichnung. Ein Bereich wird auf dem Smartphone ausgeblendet und durch eine zweite Version ersetzt, wodurch Inhalte doppelt im Code auftauchen können.
Das sind keine Fehler, die zwangsläufig mit Divi passieren. Der Builder macht solche Konstruktionen aber leicht möglich.
Wer Divi barriereärmer einsetzen möchte, muss sich regelmäßig fragen: Ist dieses Element nur optisch schön, oder ist auch klar, was es technisch bedeutet?
Divi 4 und Divi 5 sollte man nicht gleich behandeln
Bei einem Vergleich ist wichtig, welche Divi-Version tatsächlich verwendet wird.
Eine ältere Divi-4-Seite kann sich deutlich anders verhalten als ein neues Projekt mit Divi 5. Bei bestehenden Webseiten kommen außerdem häufig ältere Zusatzplugins, individuelle CSS-Anpassungen und über Jahre gewachsene Layouts hinzu.
Deshalb lässt sich nicht pauschal sagen: „Divi kann das“ oder „Divi kann das nicht.“
Bei einem neuen Divi-5-Projekt stehen heute bessere Möglichkeiten für semantische Strukturen und individuelle Attribute zur Verfügung. Eine alte Divi-Seite sollte dagegen erst geprüft werden, bevor man von denselben Voraussetzungen ausgeht.
Für Websitebetreiber bedeutet das: Nicht nur den Namen des Builders anschauen, sondern auch Version, Theme, Module und vorhandene Erweiterungen berücksichtigen.
Für wen Divi sinnvoll ist
Divi ist besonders interessant für Menschen, die das System bereits gut kennen. Wer jahrelang damit arbeitet, globale Stile eingerichtet hat und seine Module versteht, kann schneller zu einem guten Ergebnis kommen als mit einem komplett neuen Editor.
Divi eignet sich häufig für:
- Agenturen mit bestehenden Divi-Arbeitsabläufen
- umfangreich gestaltete Firmenwebseiten
- Projekte mit vielen wiederverwendbaren Layouts
- Websitebetreiber, die globale Designsysteme nutzen
- bestehende Divi-Seiten, die schrittweise verbessert werden sollen
- Nutzer, die bereit sind, sich mit semantischen Einstellungen zu beschäftigen
Nur wegen der Barrierefreiheit würde ich eine gut gepflegte Divi-Seite nicht automatisch neu bauen. Häufig ist es sinnvoller, die bestehenden Schwachstellen gezielt zu prüfen und zu korrigieren.
Welcher Editor ist nun am einfachsten?
Für eine einfache, inhaltlich aufgebaute Webseite ist Gutenberg meiner Einschätzung nach meistens der unkomplizierteste Ausgangspunkt.
Die Struktur bleibt überschaubar, viele Standardinhalte besitzen eine klare Bedeutung und man kommt mit vergleichsweise wenigen zusätzlichen Elementen aus. Zusammen mit einem guten Theme lässt sich damit eine solide Grundlage schaffen.
Elementor ist oft am einfachsten für Menschen, die visuell arbeiten und sehr genaue Kontrolle über das Design möchten. Die zusätzlichen Prüf- und Hilfsfunktionen sind nützlich. Gleichzeitig muss man sich bei Widgets, Animationen und verschachtelten Layouts stärker bremsen.
Divi 5 bietet inzwischen deutlich mehr Kontrolle über semantische Strukturen als frühere Versionen. Für erfahrene Divi-Nutzer kann es deshalb eine gute und flexible Lösung sein. Einsteiger müssen sich jedoch intensiver mit der technischen Bedeutung einzelner Elemente beschäftigen.
Sehr vereinfacht könnte man sagen:
Gutenberg ist am einfachsten für klare und eher schlichte Seiten.
Elementor ist am einfachsten für visuelle Gestaltung mit vielen Komfortfunktionen.
Divi ist besonders einfach für Menschen, die Divi bereits gut beherrschen und die erweiterten Einstellungen bewusst nutzen.
Der Builder ist nicht allein entscheidend
Eine Webseite besteht aus mehr als dem Editor. Theme, Plugins, Formulare, Cookie-Banner, Shop-System, Buchungslösung und eingebundene Dienste spielen ebenfalls eine Rolle.
Eine Gutenberg-Seite mit einem problematischen Theme kann schlechter zugänglich sein als eine sorgfältig gebaute Elementor-Seite. Eine durchdachte Divi-5-Seite kann besser funktionieren als ein Gutenberg-Projekt mit schlecht programmierten Zusatzblöcken.
Auch die Person, die Inhalte pflegt, hat großen Einfluss. Wenn später Bilder ohne Alt-Texte hochgeladen, Überschriften falsch verwendet oder Buttons unklar beschriftet werden, hilft die beste technische Grundlage nur begrenzt.
Deshalb sollte man den Editor nicht als Garantie verstehen. Er ist ein Werkzeug.
Was bei allen drei Systemen geprüft werden muss
Unabhängig vom gewählten Editor sollte jede wichtige Seite manuell getestet werden.
Dazu gehört zunächst die Tastaturbedienung. Menü, Links, Buttons, Formulare, Slider und Popups müssen ohne Maus erreichbar sein. Der Fokus sollte jederzeit deutlich sichtbar bleiben.
Danach sollte man die Überschriftenstruktur prüfen. Eine klare H1, logisch folgende H2-Überschriften und passende H3-Unterpunkte machen einen großen Unterschied.
Auch Kontraste, Alt-Texte und Linkbeschriftungen gehören dazu. Formulare benötigen dauerhaft sichtbare Labels und verständliche Fehlerhinweise. Auf dem Smartphone dürfen Inhalte nicht abgeschnitten oder unbedienbar werden.
Bei Shops und Buchungssystemen reicht es nicht, nur die Startseite zu testen. Der gesamte Vorgang bis zum Abschluss muss funktionieren.
Was ich für eine neue kleine Firmenwebseite wählen würde
Für eine neue, eher klassische Firmenwebseite würde ich heute wahrscheinlich Gutenberg mit einem gut gepflegten, schlanken Theme verwenden.
Der Grund ist nicht, dass sich damit automatisch die schönste Seite erstellen lässt. Der Grund ist die Einfachheit. Je weniger unnötige Schichten, Spezialmodule und Effekte eingebaut werden, desto leichter lässt sich die Seite langfristig warten und prüfen.
Soll das Design deutlich individueller werden, kann Elementor die angenehmere Lösung sein. Dann würde ich allerdings bewusst mit wenigen Widgets arbeiten und komplexe Animationen, Slider und Popups nur einsetzen, wenn sie wirklich gebraucht werden.
Bei einem bestehenden Divi-Projekt würde ich nicht allein aus Prinzip wechseln. Besonders Divi 5 bietet heute Möglichkeiten, mit denen sich Struktur und Attribute genauer steuern lassen. Eine saubere Überarbeitung ist oft vernünftiger als ein vollständiger Neubau.
Fazit: Gutenberg hat den einfachsten Start, aber keinen Freifahrtschein
Beim direkten Vergleich hat Gutenberg für einfache Webseiten den leichtesten Einstieg in eine übersichtliche und barriereärmere Struktur. Der Block-Editor bleibt näher an den normalen Inhaltselementen und verleitet weniger zu überladenen Konstruktionen.
Elementor bietet mehr visuelle Hilfe und zusätzliche Prüfwerkzeuge, verlangt dafür aber mehr Zurückhaltung bei Widgets und Effekten. Divi 5 hat bei semantischer Struktur und technischen Einstellungsmöglichkeiten aufgeholt, setzt aber weiterhin voraus, dass diese Möglichkeiten richtig genutzt werden.
Die Entscheidung sollte deshalb nicht nur lauten: Welcher Builder ist theoretisch am barrierefreiesten?
Wichtiger ist: Mit welchem System kann die Webseite dauerhaft sauber aufgebaut, geprüft und gepflegt werden?
Eine einfache Gutenberg-Seite, die niemand kontrolliert, kann viele Barrieren enthalten. Eine sorgfältig erstellte Divi- oder Elementor-Seite kann dagegen sehr gut funktionieren.
Am Ende entscheidet nicht das Logo des Editors. Entscheidend ist, wie bewusst damit gearbeitet wird.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.