GREYD.SUITE-Menü wurde barrierefrei gemacht

Geschrieben von Anne-Mieke Bovelett am 7. Oktober 2023
Status: Aktuell

Die Reise zu einem barrierefreien Webdesign und Produkt geht weiter

Diesmal haben wir uns entschieden, dies in Form eines Interviews zu tun. Es ist mir lieber, du hörst es von Jakob Trost, dem CTO von GREYD, als von mir. Es ist ihre Reise, die hier geteilt wird.

Am Anfang dieses Projekts sind Jakob und ich mit Hilfe der Tastatur und eines Bildschirmlesegeräts (auf dem Mac mit Sprachausgabe) durch die Website greyd.de gegangen und über das Menü gestolpert. Wie das erste Video zeigt (auf Englisch), konnten wir mit der Tastatur nicht besonders gut erkennen, wo wir uns gerade befanden, wie im Video unten zu sehen ist. Es gab keine Anzeige, dass es ein Untermenü unter “Funktionen” gab, und selbst wenn es eine Untermenüanzeige gegeben hätte, konnten wir das Untermenü nicht mit der Tastatur öffnen. Ebenso wenig konnten wir das Burger-Menü oben rechts öffnen.

Wie im zweiten Video unten zu sehen ist, zeigte der Screenreader Links an, die wir nicht sehen konnten, und es war auch nicht klar, dass sich diese Links unter der Schaltfläche des Burger-Menüs befanden. Nicht jeder Benutzer eines Bildschirmlesegeräts ist völlig blind. Das war irritierend.

Interview mit Jakob

Was war dein erster Gedanke, als wir das Menü durchgingen, um zu sehen, was verbessert werden muss?

Ich war sehr gespannt. Du hast genau erklärt und gezeigt, was man von einem barrierefreien Menü erwartet, und mir wurde schnell klar, wo wir uns verbessern müssen. Zum Beispiel fehlte in unserem Menü der Fokusring. Als wir durch unsere Website gegangen sind, war das alles noch erkennbar. Wie bei den anderen Elementen auch, gingen wir durch. Mit der Maus über die Tastatur zu navigieren, aber vor allem zu hören, wie der Screenreader es vorliest, hat mir die Augen geöffnet.

Welche Auswirkungen siehst du in diesem Zusammenhang für Pop-up- und Pop-out-Menüs?

Da wir wissen, dass ein wichtiger Aspekt darin besteht, dass alles fokussierbar sein muss, haben wir schnell verstanden, wonach wir suchen müssen. Du hast es selbst gesagt: Es geht nicht darum, alles zu wissen, sondern darum, zu wissen, wo man die richtigen Informationen findet.

Arbeitet ihr auch an einem Mega-Menü?

In unserer Suite ist es ziemlich einfach, ein Mega-Menü zu erstellen, indem du ein Popup oder Popover verwendest, in das du deine Menüs einfügst. Aber wenn du zum Beispiel Überschriften verwendest, bist du auf dich selbst angewiesen, das richtig zu erstellen. Eine Anleitung für die Erstellung eines Megamenüs mit einem Popup oder Popover könnte etwas sein, das wir in ein Plugin einbauen wollen, an dem wir gerade arbeiten. Es soll die Benutzer aktiv bei der Erstellung einer barrierefreien Website unterstützen.

Was hat das Team unternommen, um die richtigen Informationen für die Erstellung eines barrierefreien Menüs zu finden?

Du hast uns viele informative Quellen zur Verfügung gestellt, aber was für mich am erfolgreichsten war, war ein Blick unter die Haube von Menüs, die du als gute Beispiele für ein barrierefreies Menü genannt hast. Wir haben uns die Menüs des A11Y Collective, das von Level Level und das von Equalize Digital angesehen. Das sind alles Unternehmen, die sich mit Barrierefreiheit auskennen!

Du bist noch einen Schritt weiter gegangen, indem du auch die Möglichkeit geschaffen hast, mit den Pfeiltasten durch das Menü zu navigieren. Ich weiß, ich habe gefragt, ob das möglich ist, aber ich bin nicht diejenige, die das entscheidet. Das ist deine Aufgabe als CTO von GREYD. Was hat dich dazu bewegt, der Bitte nachzukommen?

Das war eine leichte Entscheidung. Die Extrameile zu gehen ist Teil unserer Philosophie. Deine Bemerkung, dass wir über die Richtlinien hinausdenken müssen, da diese nur das absolute Minimum darstellen, ist mir im Gedächtnis geblieben. Du hast uns gesagt, dass viele Benutzer in normaler Software wissen, dass man mit einer Pfeiltaste in einem Dropdown-Menü nach oben und unten gehen kann. Benutzer, die sich nicht auf die Tastaturnavigation verlassen haben oder die vorübergehend auf die Tastaturnavigation angewiesen sind, weil sie sich beispielsweise einen Arm gebrochen haben, werden mit großer Wahrscheinlichkeit versuchen, ein Dropdown-Menü per Pfeiltaste zu bedienen.

Was kannst du anderen Entwicklern empfehlen, die sich auf den Weg der Barrierefreiheit machen?

Keine Panik wegen des “Wie”. Wenn du das Warum verstehst, ist es viel einfacher, es zu erreichen und zu begreifen. Tu das, was wir getan haben. Beauftrage einen Spezialisten für Barrierefreiheit, der dir zeigen kann, wie du Probleme aufdecken kannst. Ich empfehle dir auch, die Menüs der oben genannten Websites anzuschauen.