Vor einiger Zeit haben wir hier im Blog schon einmal beschrieben, wie schwer es uns mit Divi 4 gemacht wurde, eine Website barrierefrei umzusetzen. Damals hieß es vom Divi Support: Kauft euch ein Plugin und wartet auf Divi 5, da soll vieles besser werden. Jetzt ist Divi 5 da, und wir haben es uns für euch genau angeschaut.
Wieder ist es unser Webentwickler und Divi-Spezialist Fabian, der für euch getestet, gebaut und sich durch Tastaturfallen gekämpft hat. Hier ist sein ehrlicher Erfahrungsbericht zum Thema barrierefreie Website mit Divi 5.
Die Ausgangslage: viel Hoffnung, und diesmal wurden wir nicht enttäuscht
Wir setzen Divi seit Jahren ein und mögen den Visual Builder nach wie vor sehr gerne. Als wir gehört haben, dass Divi 5 komplett neu programmiert wurde, auf einer moderneren, blockbasierten Architektur, die stark an Gutenberg erinnert, haben wir uns gefragt, ob Elegant Themes das Thema Barrierefreiheit dieses Mal von Anfang an mitgedacht hat, statt es wie bisher nachträglich mit Plugins zu flicken.
Die kurze Antwort: ja, spürbar. Divi 5 bringt an vielen Stellen genau die Werkzeuge mit, die uns bei Divi 4 gefehlt haben, und macht barrierefreies Arbeiten insgesamt deutlich zugänglicher. Für ein paar besonders anspruchsvolle Anforderungen setzen wir weiterhin auf unsere Divi Accessibility Modules, aber die Menge dessen, was wir mit Divi 5 direkt lösen können, ist spürbar gewachsen. In diesem Beitrag zeigen wir dir, was sich konkret verbessert hat, wo wir noch ergänzen und wie wir das gelöst haben.
Was sich mit Divi 5 wirklich verbessert hat
Hover und Focus Zustände lassen sich jetzt nativ einstellen.
Divi 5 bringt neue Einstellungen mit, über die man für jedes Modul einen eigenen Hover und Focus Zustand definieren kann, eine Möglichkeit, die es bei Divi 4 schlicht nicht gab. Für Websites mit überschaubarer Modulanzahl ist das eine wirklich praktische Ergänzung. Bei sehr umfangreichen Websites setzen wir weiterhin unsere Divi Accessibility Modules ein, weil sie uns diese Einstellung für die ganze Website in einem Rutsch abnehmen und dadurch schneller gehen.
In folgenden Bildschirmfoto siehst du ein Dropdown im Divi Builder, mit dem du 5 Zustände von Elementen bearbeiten kannst, wie Hover, Fokus, Aktiv und Aktiviert.
ARIA Attribute lassen sich direkt im Builder anlegen.
Das ist ein echter Fortschritt gegenüber Divi 4, den wir uns lange gewünscht hatten. Für die meisten Anwendungsfälle reicht das bereits völlig aus. Bei sehr spezifischen Anforderungen, wo wir ein Attribut punktgenau an ein einzelnes Element hängen möchten, greifen wir ergänzend zu unseren Divi Accessibility Modules, weil sie sich dabei besonders präzise im Visual Builder ansteuern lassen.
Im folgenden Bildschirmfoto siehst du, wie man ARIA-Attribute in Divi 5 hinzufügen kann und zwar über den Erweitert-Tab und dort unter dem Punkt Attribute.
Landmarks sind jetzt setzbar.
In Divi 4 mussten wir uns Landmark Rollen komplett selbst per Code bauen. In Divi 5 lassen sich diese jetzt direkt und komfortabel einstellen, ganz ohne eigenen Code. Ein klarer Gewinn für alle, die ihre Website selbst pflegen.
In den folgenden Bildschirmfotos siehst du wie du in Divi 5 im Erweitert-Tab unter dem Punkt HTML und dort im Dropdow-Menu einfach den Elementtyp (z.B die Landmarks) einstellen kannst.
Presets und globale Variablen erleichtern die Kontrastarbeit enorm.
Das ist für uns einer der größten Gewinne von Divi 5. Wenn wir einen Kontrastfehler entdecken, können wir ihn über eine globale Variable oder ein Preset zentral beheben, statt jede betroffene Stelle einzeln nachzuziehen. Das spart uns bei größeren Websites richtig viel Zeit und macht Barrierefreiheit auch für Redakteurinnen und Redakteure ohne Coding Kenntnisse greifbarer.
Auch beim Menü tut sich etwas.
Divi 5 macht es inzwischen möglich, ein Menü über Loops und Links zusammenzusetzen, eine Option, die es bei Divi 4 noch gar nicht gab. Der Menü Button, der aus einem Loop gezogen wird, lässt sich aktuell noch nicht ganz so flexibel anpassen, wie wir uns das wünschen würden. Deshalb setzen wir hier aktuell auf eine eigene Entwicklung, sind aber gespannt, wie Elegant Themes diese Funktion weiter ausbaut.
Wo wir aktuell noch ergänzen
Die Menütexte lassen sich noch nicht eindeutschen. Beschriftungen im Menü sind auf Englisch vorbelegt und lassen sich derzeit nur über Workarounds übersetzen. Das ist einer der wenigen Punkte, bei denen wir uns noch eine Verbesserung wünschen.
Zoomen auf Mobilgeräten ist an manchen Stellen noch eingeschränkt. Auf manchen mobilen Layouts erschwert das Grundgerüst es Nutzerinnen und Nutzern noch, bequem in Inhalte hineinzuzoomen. Für Menschen mit Sehbeeinträchtigung ist uns das wichtig, deshalb behalten wir das im Blick.
Unsere Lösung: Divi 5 als starkes Fundament, ergänzt um unsere Divi Accessibility Modules
Divi 5 liefert inzwischen ein richtig solides Fundament für barrierefreie Websites, und wir setzen bewusst so viel wie möglich direkt mit den neuen Divi Bordmitteln um:
- Landmarks, Presets und globale Variablen setzen wir inzwischen komplett direkt in Divi 5 um, das erspart uns eigenen Code an vielen Stellen.
- Unsere Divi Accessibility Modules ergänzen wir dort, wo besonders präzise Hover, Focus und ARIA Einstellungen gefragt sind, vor allem bei größeren oder sehr komplexen Websites.
- Eine eigene Menü Entwicklung nutzen wir aktuell noch, bis die native Loop Lösung von Divi 5 beim Menü Button so flexibel ist, wie wir es uns wünschen.
Der Unterschied zu Divi 4 ist deutlich spürbar: Vieles, wofür wir früher zwingend eigenen Code oder ein Plugin gebraucht haben, lässt sich mit Divi 5 heute direkt und komfortabel im Builder erledigen. Unsere Divi Accessibility Modules kommen dadurch gezielter zum Einsatz, genau dort, wo sie den größten Mehrwert bringen.
Mein Fazit zum Thema barrierefreie Website mit Divi 5
Divi 5 ist ein echter Sprung nach vorne für alle, die eine barrierefreie Website umsetzen möchten. Mit den neuen Einstellungsmöglichkeiten für Focus Zustände, ARIA Attribute, Landmarks sowie Presets und globalen Variablen bekommen Agenturen wie auch Kundinnen und Kunden, die selbst im Builder arbeiten, deutlich bessere Werkzeuge an die Hand als noch bei Divi 4. Elegant Themes arbeitet außerdem sichtbar weiter an neuen Bausteinen und Verbesserungen, und wir gehen fest davon aus, dass Barrierefreiheit in den kommenden Updates noch stärker in den Fokus rücken wird.
Für die letzten Feinheiten, etwa bei sehr präzisen ARIA Einstellungen oder komplexen Hover und Focus Zuständen auf großen Websites, ergänzen wir weiterhin unsere Divi Accessibility Modules. Das ändert aber nichts daran, dass Divi 5 schon heute eine richtig gute Basis bietet, um eine Website nach den Anforderungen des BFSG und der WCAG umzusetzen.
Für uns bei Hansolu heißt das: Wir sind sehr zuversichtlich, was die Zukunft von Divi in Sachen Barrierefreiheit angeht, und begleiten dich gerne dabei, das Beste aus Divi 5 für deine Website herauszuholen. Wenn du wissen willst, wie barrierefrei deine eigene Divi Website aktuell ist, oder du gleich mit Divi 5 neu starten möchtest, melde dich gerne bei uns für eine kostenfreie Beratung.
Kostenfreie Beratung zum Thema barrierefreie Website mit Divi 5
Du hast Fragen rund um barrierefreie Website mit Divi 5? Dann nutze unsere kostenfreie Beratung.
Hier kommst du zu unserem Anfrageformular
Fabian ist unser Spezialist für das Content-Management-System WordPress mit dem Theme Divi. Bei der Beitragserstellung lasse ich mich von Claude als KI-Sparringspartner unterstützen.