Vor einigen Tagen hatte ich ja schon mal kurz über den aktuellen Status der Zugänglichkeit von Gutenberg gebloggt. Es wird nun, auch nach mehreren Nachfragen, einmal Zeit für eine kleine Einführung aus Sicht eines Screen-Reader-Nutzers.

Gutenberg, der Block-Editor von WordPress, ist der neue Standard zum Erstellen von Artikeln und Seiten in WordPress. Er runderneuert die Art, wie Inhalte erstellt, arrangiert und konfiguriert werden. Dabei nutzt er sehr dynamische und moderne Webtechnologien. Er stellt dabei so manche Herausforderung an Nutzer, die den Bildschirm nicht in Gänze überblicken können. Dazu gehören die verschiedenen Block-Typen, die Fähigkeit, diese vertikal und horizontal anzuordnen, teilweise auch Blocks in Blöcken zu haben, und dazu passend dynamisch aktivierte oder verschwindende Werkzeugleisten.

Mit dieser Einführung hoffe ich, ein paar Unklarheiten zu beseitigen und einen Überblick zu geben, wie man sich im Block-Editor von WordPress vielleicht etwas besser zurechtfindet.

Aber bevor wir einsteigen, wiederhole ich nochmals den Hinweis, dass er nicht benutzt werden muss. Wie hier schon beschrieben, kann man Gutenberg in seiner WordPress-Installation auch abschalten und weiter den Classic Editor benutzen, der die bis einschließlich WordPress 4.9 bekannte Oberfläche beibehält, inklusive reiner HTML-Textansicht und allen Elementen zum Setzen von Kategorien, Schlagwörtern, Veröffentlichungsdatum usw. Man muss dazu lediglich das Classic Editor Plugin installieren und aktuell halten. Dieses wird vom WordPress-Team offiziell gepflegt und auf absehbare Zeit mit Updates versorgt.

Überblick über den Editor 🔗

Der Editor gliedert sich in mehrere Hauptbereiche. Zunächst gibt es da den Kopfbereich mit zwei Symbolleisten. Die eine kontrolliert das Veröffentlichen, Zwischenspeichern und liefert eine Vorschaufunktion. Über das Mehr Optionen Menü kommt man unter anderem zu einer Übersicht der Tastaturkürzel. Diese lohnt es sich in jedem Fall zu studieren und sich die wichtigsten einzuprägen.

Die andere Symbolleiste ist eine, die die wichtigsten Bedieelemente für das gesamte Dokument bereitstellt. Hier fügt man einen neuen Block ein, untersucht und ändert die Dokumentstruktur, was nichts anderes bedeutet als die Blöcke neu anzuordnen, und legt einige grundlegende Einstellungen fest. Hier macht man auch Änderungen rückgängig oder wiederholt sie, navigiert zu Blöcken über eine Menüauswahl, und man schaltet zwischen dem Navigations- und Bearbeitungsmodus um. Mehr dazu weiter unten.

Ein weiterer recht statischer Bereich ist die Seitenleiste. Diese befindet sich, vom virtuellen Cursor aus betrachtet, am Ende des Dokuments. Abhängig vom Kontext werden hier dokumentweite Einstellungen vorgenommen wie die Kategorien und Schlagwörter festgelegt, ein Titelbild ausgewählt und ein Auszug verfasst, das Veröffentlichungsdatum angepasst und ähnlich. Wahlweise kann auch das Veröffentlichungs-Panel angezeigt werden, das diesem Dokumenteinstellungen-Teil sehr ähnlich sieht, aber zusätzlich noch die Möglichkeiten zum Einstellen der Teilen-Funktion beim Veröffentlichen bereitstellt. Hier passt man unter anderem den Tweet an, der von WordPress beim Veröffentlichen generiert wird. Auch die JetPack-Einstellungen, die man über die allgemeine Symbolleiste auch aufrufen kann, werden hier vorgenommen.

Befindet man sich in einem Block, zeigt die Seitenleiste abhängig vom Blocktyp Einstellungen an. Hier legt man für Absatzblöcke die Schriftart und -größe fest, gibt einem Bild einen Alternativtext und so weiter. Diese Bereiche sind gut mit dem virtuellen Cursor eines Screen Readers erfassbar und können gut bedient werden.

Den Hauptbereich nimmt aber der Editorbereich ein. Er beginnt mit dem Titel eines Beitrags oder einer Seite, welcher streng genommen auch ein Block ist. Ihm folgen dann die einzelnen Blöcke des Inhalts. Das können Absätze, Überschriften, Bilder, Listen, Weiterlesen-Elemente, eingebettete Tweets oder YouTube-Videos usw. sein. Beim Schreiben dieses Beitrags kennt Gutenberg fast 70 verschiedene Blocktypen, Tendenz steigend.

Jeder Block hat einen Hauptbereich, in dem entweder Text geschrieben, grundlegende Einstellungen z. B. zu einem Bild oder YouTube-Link vorgenommen werden, oder je nachdem was ein Block gerade braucht. Weiterhin gibt es eine Schaltfläche zum Ändern des Blocktyps. Dies ist dann praktisch, wenn man schon Text geschrieben hat und merkt, dass man einen anderen Blocktyp nutzen will, z. B. eine Überschrift. Weiterhin hat jeder Block Elemente zum Verschieben des Blocks nach oben oder unten. Und es gibt eine dynamische Symbolleiste, die abhängig davon angezeigt wird, ob gerade ein Element ausgewählt, Text markiert ist o. ä. So kann man hier Formatierungen vornehmen, Links einfügen oder andere Einstellungen vornehmen. Die meisten Funktionen sind auch über Tastenkürzel (siehe oben) erreichbar. CTRL+B für das Fett markieren von Text, CTRL+K zum Einfügen eines Links usw. Die Symbolleiste ist aber jederzeit durch das Tastenkürzel Alt+F10 aufrufbar. Nutzer von TinyMCE kennen dieses Tastenkürzel bereits, da wird auch vom Textbereich ins Menü bzw. die Symbolleiste gewechselt.

Ein konkretes Beispiel 🔗

Erstellen wir doch einmal einen neuen Beitrag. Der Fokus landet im Titel-Bereich. Nachdem man den eingegeben hat, drückt man Eingabetaste. Je nach Version des Editors landet man nun im Navigations- oder Bearbeitungsmodus. Gutenberg 6.9, das mit WordPress 5.3 ausgeliefert wurde, stellt den Fokus jetzt auf den Button für den aktuellen Blocktyp. Der erste Block wird also in dem Moment erzeugt, wo man vom Titel aus die Eingabetaste drückt. In diesem Auswahlmodus kann man mit Tab zwischen den vorhandenen Blöcken wechseln. Um einen Block zu bearbeiten, drückt man Eingabetaste. Hinweis für Screen-Reader-Nutzer: Manchmal wird der Inhalt dieses Blocks bzw. der Fokuswechsel dann nicht gesprochen. Schaltet den Formularmodus oder Fokusmodus in diesem Fall von Hand ein.

In Gutenberg 7.0 und neuer ist der Editor etwas cleverer und setzt den Fokus gleich in den ersten Block. Er schaltet automatisch in den Bearbeitungsmodus, so dass man sich diesen Zwischenschritt sparen kann.

Schreibt man nun einfach los, wird automatisch ein neuer Absatzblock erzeugt. Ist man mit einem Absatz fertig, drückt man Eingabe, und es wird der nächste leere Block unten angefügt. Das verhält sich also im Prinzip wie das Einfügen eines neuen Absatzes in z. B. Microsoft Word.

Tippt man als erstes Zeichen in einem Block aber einen Schrägstrich (/), bekommt man eine Auswahl zum Ändern des Blocktyps. Hier kann man inkrementell suchen. Gib z. B. ü und b ein, und die Wahrscheinlichkeit ist groß, dass jetzt der Blocktyp Überschrift ausgewählt ist. Drücke Eingabe, und der Block, den Du erzeugst, wird ein Überschriftenblock sein. Der Screen Reader sagt so etwas wie „Schreibe Überschrift, Ebene 2, Eingabefeld“. Du weißt also, dass Du eine Überschrift erzeugst und dass die im resultierenden Dokument die Ebene 2 haben wird. Hier kann man nun mit Alt+F10 in die Symbolleiste für den Block gehen. Gehe mit Pfeil nach rechts weiter nach rechts, bis Du den Umschalter für die Ebene 3 findest und drücke Eingabe. Der Blocktyp bleibt, die Ebene ändert sich aber auf 3. Du kannst jetzt wieder schreiben und am Ende mit Eingabe einen neuen leeren Block erzeugen.

Solltest Du den Fokus- oder Formularmodus des Screen Readers ausschalten und mit dem virtuellen Cursor navigieren wollen, mache Dich auf einige Probleme gefasst. Der virtuelle Cursor verändert den Fokus und sorgt so für dynamische Änderungen. Wechsel zwischen Blöcken sind das eine, aber auch das Landen auf Schaltflächen oder in Symbolleisten kann passieren. So kommst Du z. B. mit Pfeil Rauf aus Deinem aktuell bearbeiteten Block meist auf den Button zum Ändern des Blocktyps, manchmal aber auch in die Symbolleiste zur Formatierung desselben. Manchmal sind auch die Schaltflächen zum Verschieben sofort sichtbar, manchmal landest Du davor und musst mit Tab auf sie wechseln. Ich empfehle daher, Dich nicht so sehr auf den virtuellen Cursor zu verlassen, wenn Du mit Blöcken arbeitest, sondern im Fokus- oder Formularmodus zu bleiben und Dich hautpsächlich mit den Tastaturbefehlen des Editors zu bewegen. Das Verwalten des Tastaturfokus ist inzwischen sehr ordentlich. An die Schaltflächen zum Verschieben des Blocks kommst Du z. B., indem Du mit Alt+F10 in die Symbolleiste wechselst und mit Umschalt+Tab eine Position nach links springst. Alternativ kannst Du auch ohne die Symbolleisten mit Umschalt-Tab aus dem Editierbereich heraus springen, landest auf dem Schalter zum Verändern des Blocktyps, und springst dann mit Tab auf die Schaltflächen zum Ändern der Position des Blocks. Es führen hier zur Zeit mehrere Wege ans Ziel, probiere es einfach aus und lasse Dich nicht entmutigen.

Mit Escape kommst Du vom Bearbeitungsmodus eines Blocks in den Navigationsmodus. Der Fokus landet auf dem Schalter für den aktuellen Block. Tab springt jetzt zum nächsten Block, Umschalt+Tab zum vorherigen. Eingabe leitet wieder die Bearbeitung ein.

Achte immer auf die Ausgaben Deines Screen Readers. Sagt er so etwas wie Untermenü, öffnet ein Schalter meist ein Menü, in dem Du mit den Pfeiltasten navigieren und den gewünschten Menüpunkt mit Eingabe aufrufen kannst. Sagt er, dass ein Schalter „reduziert“ oder „erweitert“ ist, bedeutet dies, dass der Schalter z. B. in der Seitenleiste einen Satz von Einstellungen sichtbar macht. Beispiele hierfür sind die Schaltflächen in der Hauptsymbolleiste für Veröffentlichen oder Einstellungen.

Welche Version nutzen? 🔗

Es gibt zwei Möglichkeiten, Gutenberg zu nutzen. Zum einen gibt es immer eine Version, die in WordPress selbst mitgeliefert und im Zuge von WordPress-Updates aktualisiert wird. Diese Updates sind seltener, alle paar Wochen bis alle paar Monate. Gutenberg selbst wird aber in einem schnelleren Rhythmus weiterentwickelt. So kommen auch Fehlerbehebungen und Verbesserungen für die Barrierefreiheit eigentlich schneller in Gutenberg an, als dies dann in WordPress-Veröffentlichungen der Fall ist.

Die Lösung dafür ist das Gutenberg Plugin aus dem Plugin-Verzeichnis von WordPress. Dieses kann man in die vorhandene WordPress-Installation installieren, und es übernimmt dann den Platz des vorinstallierten Gutenbergs. Dieses Plugin wird ungefähr alle zwei Wochen mit einer neuen Version aktualisiert und liefert somit neue Features und Fehlerbehebungen schneller aus. Möchte man dieses Plugin nicht mehr nutzen, deinstalliert man es einfach und hat dann immer noch Zugriff auf die in WordPress mitgelieferte Version.

Fazit 🔗

Seit meinem englischen Beitrag zur Zugänglichkeit von Gutenberg haben einige sehr spannende Gespräche mit Entwicklern stattgefunden, und wir haben einige grundlegende Fragen klären können, auch in Zusammenarbeit mit dem Rest des WordPress Accessibility Teams. Ich halte Gutenberg für ein sehr spannendes Projekt und freue mich, an seiner Verbesserung zumindest in Gesprächen beteiligt zu sein.

Es ist aber definitiv nichts für schwache Nerven. Und wie für jede komplexere Webanwendung wie Gmail, Google Docs, Facebook o. ä. gilt: Lerne wie für Desktop-Anwendungen die Tastenkürzel der Webanwendungen, und mache Dich mit den Möglichkeiten der Navigation Deines Screen Readers vertraut. Nur so hast du wirklich eine Chance, effektiv und ohne große Nervenzerrüttung mit einer solch komplexen Webanwendung zu arbeiten und somit auch mit sehenden Kollegen oder Mitbewerbern Schritt zu halten. Gutenberg ist komplex, aber inzwischen nicht mehr unmöglich zu bedienen.

Zum Schluss bleibt mir nur noch, mich bei den Entwicklerinnen und Entwicklern für den sehr produktiven Austausch zu bedanken. Ich bin gespannt, was daraus in den nächsten Monaten noch erwachsen wird!

Und nun viel Spaß beim Ausprobieren!