Barrierefreiheit im Block-Editor von WordPress
Veröffentlicht am 07.05.2025 von Maja Benke
Barrierefreie Inhalte sind so gestaltet und aufbereitet, dass sie von allen Menschen genutzt werden können – unabhängig von ihren Behinderungen oder technischen Einschränkungen.
Mit dem “Block-Editor” – dem Standard-Editor von WordPress, gibt es verschiedene Funktionen, um das Erstellen von barrierefreien Inhalten zu ermöglichen und zu unterstützen.
Zudem gibt es auch Optionen, den Block-Editor für sich selbst an die eigenen Präferenzen anzupassen. Dies hat keine Auswirkungen auf die Ausgabe des Inhalts auf der Webseite.
Wenn wir über die Barrierefreiheit des Block-Editors reden, müssen wir zwei Seiten betrachten. Zum einen die Ausgabe der Blöcke für die Leser der Webseite im Frontend. Zum anderen das Backend des Editors, in dem die Inhalte erstellt werden.
User-Settings im Editor für die eigene Barrierefreiheit
Die Benutzeroberfläche des Block-Editors lässt sich an die eigenen Präferenzen anpassen. Dies kann oben rechts über die 3 Punkte eingestellt werden.
Obere Werkzeugleiste
Diese Option ist standardmäßig deaktiviert. Dadurch befindet sich die Werkzeugleiste immer direkt über dem jeweiligen Block.
Mit Aktivierung dieser Option befindet sich die Werkzeugleiste immer am oberen Rand.
Dadurch geht aber auch die Option verloren, dass die Blöcke über Drag und Drop verschoben werden können. Für diese Funktion können dann nur die Pfeile genutzt werden.
Block Editor: Obere Werkzeugleiste
Ablenkungsfrei schreiben
Mit diesem Modus werden die einzelnen Navigations- und Bearbeitungs-Optionen ausgeblendet, um eine ablenkungsfreie Schreiberfahrung zu ermöglichen. Dies ist vor allem für Menschen geeignet, die sich leicht ablenken lassen und einen besseren Fokus benötigen.
Man kann den Modus über die Tastenkombination ein- und ausstellen.
Bei deutschen Tastaturen ist dies
- auf Windows: ⇧ Strg #
- auf dem Mac : ⇧⌘#
Wenn der Modus aktiviert ist und man mit der Maus nach oben fährt, erscheinen die Optionen wieder.
Block Editor: Ablenkungsfrei schreiben
Spotlight-Modus
Mit dem Spotlight-Modus kann man den aktivierten Block hervorheben. Diese Option eignet sich vor allem dafür, um einen besseren Überblick zu behalten, welcher Block gerade bearbeitet wird.
Block Editor: Spotlight
Vollbildmodus
Der Vollbildmodus ist standardmäßig aktiviert. Mit dem Deaktivieren des Vollbildmodus wird die linke Navigationsleiste des WordPress-Dashboards eingeblendet.
Block Editor: Vollbildmodus
Die Core-Blöcke & Barrierefreiheit
Die Core-Blöcke sind Blöcke, die vorinstalliert sind und aus dem WordPress Core kommen.
Diese sind weitestgehend barrierefrei im Frontend, wenn sie richtig eingestellt werden. Die WordPress-Community hat sich zur Aufgabe gemacht, die internationalen WCAG-Richtlinien (Level AA) einzuhalten, und Core-Blöcke werden getestet, bevor sie in den Core kommen.
Beim Verwenden der Blöcke ist es wichtig, dass die Inhalte richtig erstellt werden, damit diese barrierefrei sind. Im Folgenden erläutere ich die Einstellungen, die wichtig sind, um Ihren Inhalt barrierefrei zu erstellen.
Alt-Texte
Alternativ-Texte, oder kurz Alt-Texte, sind vor allem für blinde Screen-Reader-User wichtig, um den Inhalt eines Bildes zu verstehen. Daher sollten Alt-Texte bei Bildern immer ausgefüllt werden, wenn es sich um kein rein dekoratives Bild handelt.
Am Besten erstellt man die Alt-Texte direkt in der Mediathek, bevor das Bild im Inhalt verwendet wird, denn dann wird der Alt-Text übernommen.
Wird hingegen das Bild in den Inhalt eingebunden und über die Block-Einstellungen der Alt-Text erstellt, so wird dieser nicht in die Mediathek übernommen. Das bedeutet, dass man bei einem erneuten Einbinden des Bildes den Alt-Text erneut erstellen muss und somit doppelte Arbeit hat.
Das hat den Hintergrund, dass ein Alt-Text kontextabhängig vom Inhalt sein kann. Daher gibt es die Option, einen vorhandenen Alt-Text aus der Mediathek in einem einzelnen Beitrag oder in einer einzelnen Seite zu ändern.
Wird kein Alt-Text in WordPress hinzugefügt, so gilt das Bild als ein rein dekoratives Bild und wird für blinde Personen, die einen Screen-Reader nutzen, nicht angezeigt. Enthält das Bild einen Link oder eine Beschriftung, sollte ein Alt-Text immer hinzugefügt werden.
Auch wenn das Bild zur Stimmung des Inhalts beiträgt oder eine Information enthält, sollte ein Alt-Text gesetzt werden.
Block Editor: Alt Texte in WordPress
Icons
Auch bei Icons ist ein alternativer Name wichtig. Anders als bei Bildern gibt es hier verschiedene Möglichkeiten, diesen technisch einzubinden. Über einen Alt-Text, den “title”, ein Aria-Label, oder – wie in WordPress oft üblich – über die .screen-reader-class.
Bei dem Icon-Core-Block wird das über die .screen-reader-class umgesetzt. In den Block-Einstellungen ist dies bereits im Feld “Text” ausgefüllt und kann selbst geändert werden. Wichtig ist, den Alt-Text nicht komplett zu löschen.
Sollten Sie einen Icon-Block aus einem Plugin verwenden, achten Sie darauf, dass Sie diesem einen barrierefreien Namen geben können.
Farbkontraste
Farbkontraste sind nicht nur für Menschen mit einer schlechten Sehkraft wichtig, sondern auch in bestimmten Situationen, z.B. wenn die Sonne auf ein Display scheint. Daher sollte ein Mindest-Kontrast von 4.5:1 zwischen Text und Hintergrund gegeben sein. Dies entspricht den Richtlinien WCAG in dem Level AA.
Um dies nicht per Hand prüfen zu müssen, gibt es im Block-Editor einen eingebauten Farbkontrast-Checker. Wenn eine Farbkombination eingestellt wird, die nicht dem mindesten Farbkontrast entspricht, dann wird eine Warnung angezeigt, dass der Farbkontrast erhöht werden sollte.
Diese Funktion gibt es für alle Core-Blöcke, in denen Farben eingestellt werden können.
Block Editor: Farbkontraste
Semantischen Überschriften-Hierarchie
Eine korrekte Überschriften-Hierarchie ist aus mehreren Gründen wichtig. Zum einen navigieren häufig blinde Screen-Reader-User mit Hilfe der Überschriften-Ebenen durch Inhalte. Zudem ist es auch für sehende User wichtig, um auf einen Blick den Inhalt erfassen zu können, und zu guter Letzt profitiert auch Ihr SEO von gut strukturierten Überschriften.
Ihre Überschriften sollten prägnant sein und sich auf den nachfolgenden Abschnitt beziehen. Zudem sollten sie hierarchisch strukturiert sein, basierend auf ihrem Inhalt. Ganz ähnlich wie in einer Facharbeit, wo es Kapitel und Unterkapitel gibt, sollten auch Ihre Überschriften auf Webseiten gesetzt werden.
Der Titel ist eine H1 und wird nur einmalig vergeben, weil es nur einen Titel geben kann. Dieser sollte den Inhalt der Unterseite beschreiben, damit Ihre Leser*innen verstehen, worum es geht.
Dann folgen die Zwischenüberschriften auf H2-Level.
Wenn Sie einen Abschnitt, der zu einer H2 gehört, noch weiter mit Unter-Überschriften untergliedern möchten, sollten diese als H3 definiert werden. Eine H3 zeigt an, dass diese ein Unterpunkt der vorherigen H2 ist.
- H1 – Ihr Beitragstitel / Seitentitel
- H2 – eine Zwischenüberschrift
- H3 eine Unter-Überschrift
- H3 eine Unter-Überschrift
- H2 – eine Zwischenüberschrift
- H2 – eine Zwischenüberschrift
Block Editor: semantische Überschriften in WordPress
Individuelle Spracheinstellung
Wenn die Webseite auf deutsch eingestellt ist, weil die Inhalte vor allem auf Deutsch verfasst sind, werden sie auch von Sprachausgabe-Programmen wie VoiceOver, einem Screen-Reader für blinde Personen, mit deutscher Aussprache vorgelesen. Problematisch wird es jedoch, wenn innerhalb eines deutschen Textes ein englischer Satz oder ein Zitat eingefügt wird. Ohne weitere Anpassungen würde dieser Satz ebenfalls mit deutschen Aussprache-Regeln vorgelesen, was das Verständnis erschweren kann.
Um dieses Problem zu lösen, bietet WordPress eine neue Funktion: Es ist möglich, einzelne Passagen als fremdsprachig zu markieren und ihnen ein entsprechendes Sprachattribut zuzuweisen.
- Markieren Sie den entsprechenden Text
- Klicken Sie auf den Pfeil nach unten “Mehr”
- Wählen Sie die Option “Sprache”
- Nun können Sie das passende Sprachattribut eingeben, z. B. „en“ für Englisch oder „de“ für Deutsch.
- Die Änderung übernehmen und speichern.
Nach dieser Anpassung wird der markierte englische Satz von der Sprachausgabe korrekt mit englischer Aussprache vorgelesen. Im Quellcode der Webseite ist dann ersichtlich, dass das entsprechende Sprachattribut hinzugefügt wurde.
Diese Funktion erleichtert das Verständnis von mehrsprachigen Inhalten und verbessert die Barrierefreiheit für Nutzer von Screen-Readern.
Block Editor: Spracheinstellung
Was man nicht einstellen sollte:
Neben den Einstellungen, die vorgenommen werden sollten, gibt es auch ein paar Dinge, die vermieden werden sollten.
Öffnen im neuen Tab
Für Links kann eingestellt werden, dass diese in einem neuen Tab geöffnet werden. Leider ist dieses Öffnen in einem neuen Tab nicht barrierefrei, auch wenn es oft propagiert wird, dass externe Links in einem neuen Tab öffnen sollen.
Es gibt ein paar wenige Fälle, wo das Öffnen in einem neuen Tab Sinn macht, z.B. wenn ein Link sich innerhalb eines Formulars befindet und man mit Öffnen des Links den Fortschritt im Formular verlieren würde.
Ansonsten sollte man aber den Usern die Wahl überlassen, ob man den Link im gleichen Tab, in einem neuen Tab oder in einem neuen Fenster öffnen möchte.
Mit dem Öffnen im neuen Tab, kann z.B. der Zurück-Button nicht mehr genutzt werden, was der meistgenutzte Button in Browsern ist.
Auf Mobil-Geräten ist es z.B. leichter, vor und zurück zu navigieren, anstatt zwischen verschiedenen Tabs. Für Screen-Reader-Nutzer*innen gilt das Gleiche. Sollten sie einen eigenen Tab wünschen, bevorzugen die meisten "Öffnen im neuen Fenster”, da sie leichter zwischen Fenstern navigieren können, als zwischen Tabs.
Sollten Sie sich doch dafür entscheiden, einen Link standardmäßig im neuen Tab öffnen zu wollen, so müssen Sie dies grafisch anzeigen und für blinde Screen-Reader-User kenntlich machen, um der WCAG zu entsprechen.
Dies geht zum einen über das Icon ↗ U+2197. Zudem muss der Link selbst über einen barrierefreien Namen kenntlich gemacht werden, dass der Link im neuen Tab öffnet (zum Beispiel über den .screen-reader-text).
Text Transforms & Text-Farben
Um einen flüssigen Lesefluss zu gewährleisten, sollte auf den übermäßigen Gebrauch von Text-Stilen wie Bold, Italic und wechselnden Farben abgesehen werden.
Die Hervorhebung über Strong (Bold) ist eine sogenannte laute Hervorhebung und wird beim Überfliegen des Textes leicht gesehen. Eine sparsame Verwendung im Text kann verwendet werden, um das Überfliegen zu erleichtern. Beim Lesen des Textes gibt es Personengruppen (z.B. Menschen mit Legasthenie), die dadurch Probleme haben können, den Text flüssig zu lesen.
Die Hervorhebung über italic (kursiv) ist eine sogenannte leise Hervorhebung, die beim Überfliegen nicht sofort wahrgenommen wird. Kursiv ist schlechter lesbar, weil die Schrift dünner und unruhiger wird. Sie sollte möglichst nicht für Fließtext verwendet werden. Ich würde empfehlen, sie nur in Ausnahmen einzusetzen, z.B. bei Berufsfeldern, wo es eine gewisse Konvention gibt, Texte zu formatieren (z.B. Quellen-Angaben).
Farbige Hervorhebungen im Text
Farbige Hervorhebungen in Texten sollten sehr sparsam eingesetzt werden, da sie den Text unruhig wirken lassen und auch hier der Farbkontrast eingehalten werden sollte. Wenn der Farbkontrast ausreichend ist (und es zum Thema und der Zielgruppe passt), kann es gerne sparsam eingesetzt werden. Es sollte jedoch nicht zu bunt werden, indem zu viele Farben genutzt werden.
Alt-Text: Mögliche Hervorhebungen im Text-Block: Strong, Italic und farbliche Hervorhebung
Barrierefreiheit im Block-Editor - Fazit
Der Block-Editor von WordPress bietet zahlreiche Funktionen zur Unterstützung der Barrierefreiheit – sowohl bei der Inhaltserstellung im Backend, als auch bei der Darstellung im Frontend.
Bei der Erstellung von barrierefreien Inhalten stehen im Block-Editor Hilfestellungen zur Verfügung, und auch die Core-Blöcke sind größtenteils barrierefrei, sofern sie korrekt genutzt werden.
Durch bewusstes und korrektes Anwenden der verfügbaren Funktionen können mit dem Block-Editor Webseiten für alle Nutzergruppen zugänglicher gestaltet werden.
