Matthias Blenk

Webdesign

Webentwicklung

Digitales Marketing

Administration

Matthias Blenk

Webdesign

Webentwicklung

Digitales Marketing

Administration

Blog

Barrierefreiheit exklusiv

Barrierefreiheit exklusiv

Page Builder machen’s nicht immer allen leicht

Das Team von Equalize Digital wird anscheinend öfters gefragt, welcher Page Builder die beste Ausgangsbasis für Barrierefreiheit bietet. Also haben sie die Barrierefreiheit gängiger Page Builder und WordPress-Block-Bibliotheken verglichen. Mit ernüchterndem Ergebnis.

Eine barrierefreie Webseite zu erstellen, erfordert mehr als nur sorgfältiges Einpflegen des Inhalts. Ohne eine solide technische Basis ist eine vollständig barrierefreie Website kaum realisierbar. Ein entscheidender Faktor dabei sind die Wahl des Themes, des Page Builders oder der Block-Bibliothek, die für eine WordPress-Seite verwendet werden.

Warum Page Builder oft keine gute Wahl sind

Wer mich kennt, der weiß, dass ich Page Buildern gegenüber nicht sonderlich zugeneigt bin. Zu viele träge, aufgeblasene, störanfällige Websites sind mir im Laufe meiner Arbeit zum Fixen auf den Tisch gekommen. Meine Erfahrung zeigt: Was an Kosten bei der Erstellung eingespart wird, muss in der Regel später in die Wartung investiert werden.

Page Builder sind wie das Fast Food des Webdesigns – schnell, bequem und manchmal einfach zu verlockend. Sie ermöglichen es auch Anfängern ohne Programmierkenntnisse, ansprechende Websites zu erstellen. Aber wie bei Fast Food gibt es auch hier einen Haken: Sie bringen oft unnötigen Ballast mit, der die Barrierefreiheit und Leistung einer Website stark beeinträchtigen kann.

Viele Page Builder erzeugen komplexen und verschachtelten Code, der schwer zu überblicken und noch schwerer zugänglich zu machen ist. Barrierefreiheitsprobleme schleichen sich somit schneller ein und sind schwieriger zu beheben. Außerdem kann das Hinzufügen von Add-ons und Erweiterungen das Problem weiter verschärfen.

Trotz ihrer Nachteile können Page Builder unter bestimmten Umständen aber durchaus sinnvoll sein. Wenn Sie zum Beispiel eine Webseite schnell auf die Beine stellen müssen und keine tiefen technischen Kenntnisse oder finanziellen Spielraum haben, können Page Builder eine wertvolle Lösung sein.

Gesetzliche Vorschriften zur Barrierefreiheit

Barrierefreiheit ist nicht nur eine freundliche Geste gegenüber Menschen mit Behinderungen, sondern in vielen Fällen auch gesetzlich vorgeschrieben. In der EU gibt es beispielsweise die Richtlinie für barrierefreie Websites (EN 301 549), die für alle öffentlichen Stellen verbindlich ist. In den USA sorgt das Americans with Disabilities Act (ADA) dafür, dass Diskriminierung aufgrund von Behinderungen im Internet verhindert wird.

Einfacher ausgedrückt: Wenn Ihre Website nicht barrierefrei ist, riskieren Sie nicht nur, Besucher zu verlieren, sondern könnten sich auch rechtlichen Konsequenzen gegenübersehen. Der einfachste Weg zu einer barrierefreien Website besteht deshalb darin, Themes und Plugins zu wählen, die Barrierefreiheit bereits berücksichtigen. Das gilt auch für Page Builder. So können Sie Ihren Inhalt einfügen, ohne sich um den darunterliegenden Code sorgen zu müssen.

Der beste Page Builder für Barrierefreiheit

Für seine Tests auf Barrierefreiheit definiert Equalize Digital den Begriff “Page Builder” sehr weit. Er umfasst sowohl klassische Page Builder als auch Themes und Block-Bibliotheken, die im WordPress-Core-Blockeditor (Gutenberg) funktionieren und damit allgemein jedes Toolset, das zur Erstellung einer WordPress-Webseite verwendet werden kann.

Die Tests wurden zwischen Mai und Juli 2024 durchgeführt und umfassten sowohl automatisierte als auch manuelle Prüftechniken. Hierbei wurde die aktuell verfügbare Version der Page Builder verwendet und vor allem auf Elemente wie Akkordeons, Karussells und Navigationsmenüs geachtet, welche häufig auf Webseiten zum Einsatz kommen.

Um es kurz zu machen: Von den zehn getesteten Page Buildern schnitt das Framework Kadence am besten ab, gefolgt von Elementor. Weit abgeschlagen liegt Divi mit gerade mal 16,22 Prozent:

  • 75,95 % – Kadence
  • 70,13 % – Elementor
  • 67,80 % – GeneratePress
  • 59,21 % – Avada:
  • 54,67 % – Breakdance
  • 52,38 % – Coblocks
  • 51,90 % – SiteOrigin
  • 50,00 % – Bricks
  • 48,00 % – BeaverBuilder
  • 16,22 % – Divi

Tipps zum Testen der Barrierefreiheit Ihrer Website

Selbst der beste Page Builder kann eine unzugängliche Webseite erzeugen, wenn der Inhalt nicht entsprechend gestaltet wird. Aus diesem Grund ist es wichtig, regelmäßig Barrierefreiheitstests durchführen. Hier sind einige Tipps, wie das selbst in die Hand genommen werden kann:

  1. Verwenden Sie automatisierte Tools: Installieren Sie Plugins wie Accessibility Checker für WordPress, die Ihnen helfen, Probleme wie fehlende Alt-Attribute, fehlerhafte ARIA-Rollen oder unzugängliche Links zu identifizieren.
  2. Manuelle Tests durchführen: Navigieren Sie Ihre Webseite nur mit der Tastatur (Tab, Enter und Leertaste) und prüfen Sie, ob alle interaktiven Elemente zugänglich sind. Nutzen Sie Screenreader, um zu überprüfen, ob alle Inhalte korrekt vorgelesen werden.
  3. Mit Zoom testen: Vergrößern Sie die Ansicht Ihrer Webseite, um sicherzustellen, dass sie auch bei höheren Zoomstufen gut lesbar und benutzbar bleibt.

Das Drama wird für viele Redakteure bereits deutlich, wenn sie im Backend-Editor selbst für minimale Anpassungen erst Zeilendefinitionen und Textblöcke per Bearbeitenknopf öffnen müssen und vor lauter Layout den eigentlichen Inhalt nicht mehr sehen.

Weniger ist mal wieder mehr

Die Wahl des richtigen Page Builders ist ein entscheidender Schritt auf dem Weg zu einer barrierefreien Website. Auch wenn der selbst gewählte Builder möglicherweise nicht die besten Ergebnisse in den Tests gebracht hat, können durch gezielte Anpassungen manche Mängel mitunter von Hand behoben werden.

Natürlich ist ein solider Anfang in Sachen Barrierefreiheit und die kontinuierliche technische wie inhaltliche Pflege der Webseite, aber auch der bewusste Verzicht auf zu viel Plingpling, überbordende Animationen oder andere gestalterische Gimmicks der Schlüssel zu einer inklusiven und übrigens aus suchmaschinenoptimierten Online-Präsenz.