Greyd.Suite Popup und Popover verbessert

Von Anne-Mieke Bovelett am 07.12.2023
Status: Aktuell

Von der Tastaturfalle zur Barrierefreiheit

In der alten Situation waren diese Elemente nicht zugänglich und führten zu Tastaturfehlern. Unten findest du ein Beispiel dafür, was mit dem Hamburger-Menü passiert ist.

Alte Situation

Das erste Video zeigt die Navigation über die Tastatur, das zweite Video zeigt die Bildschirmleser-Erfahrung. NB Beide Videos sind auf Englisch.

Die Tastaturfalle

Die Tests zeigten, dass es nicht möglich war, das Hamburger-Menü mit der Tastatur zu öffnen.

Die Erfahrung mit dem Bildschirmleser

Als wir den Screenreader laufen ließen, stellte sich heraus, dass er das Hamburger-Menü komplett ignorierte.

Der neue und verbesserte Button

Der Fokus verschiebt sich an die richtige Stelle. Und jetzt können sowohl Popup- als auch Popover-Elemente auch verwendet werden, um dein eigenes Mega-Menü zu erstellen. Und zusätzlich: Du kannst ein Aria-Label hinzufügen, um dem Nutzer mitzuteilen, was die Schaltfläche auslösen wird. In diesem Fall habe ich einfach “menu” als Label hinzugefügt.

Gute Gründe, kein Popup oder Popover zu verwenden

Frag dich immer, ob Inhalte nicht standardmäßig sichtbar sein sollten. Inhalte, die zur Konvertierung gedacht sind, sollten nicht durch einen zusätzlichen Klick versteckt werden. Wenn du das Bedürfnis hast, Popups oder Popovers zu verwenden, um Informationen zu vermitteln, die sonst nicht auf den Bildschirm passen würden, solltest du vielleicht dein Design überdenken. Alles, was offensichtlich ist, wird schneller angeklickt.

Letztendlich suchen deine Besucher/innen nach der Erfüllung des Versprechens deiner Website, ihnen das zu geben, was sie wollen oder brauchen. Websites sind funktional. Popups und Popover können wie der übermäßig redselige Verkäufer in einem Geschäft sein, der nicht auf den Punkt kommt und dich dazu bringt, wieder zu gehen.