Immer. Ein Pop-up ohne Schließen Button ist so, als würde man jemanden in einem Raum einsperren, indem man die Türklinke entfernt.
Benutzerfreundlichkeit und Barrierefreiheit gehen Hand in Hand
Seit einiger Zeit gehen beim Greyd-Supportteam immer mehr allgemeine Fragen zur Barrierefreiheit ein, und diese hier ist eine von ihnen. Da ich die Ehre habe, das Team Greyd auf seinem Weg zur Barrierefreiheit zu begleiten, halte ich es für einen guten Zeitpunkt, um zu erklären, warum ein Schließen Button in einem Pop-up unbedingt notwendig ist.
Du kannst in der Greyd.Suite standardmäßig eine Schließen Buttons einbauen
Im Allgemeinen verbessert ein Schließen Button in Pop-up Fenstern die Benutzerfreundlichkeit für alle Benutzer, da sie eine klare und einfache Möglichkeit bietet, das Pop-up Fenster zu schließen, unabhängig von der Art der Interaktion oder den besonderen Anforderungen an die Barrierefreiheit.
Die Szenarien für einen Schließen-Button
Ein Schließen-Button in Pop-up Fenstern ist für die Barrierefreiheit in folgenden Fällen erforderlich:
Modal Pop-ups
Wenn ein Popup-Fenster den gesamten Bildschirm einnimmt oder den eigentlichen Inhalt erheblich unterbricht, wie z. B. bei Modal- oder Dialogfeldern, sorgt ein Schließen Button dafür, dass der Benutzer das Pop-up Fenster einfach verlassen und zum eigentlichen Inhalt zurückkehren kann.
Nicht jeder weiß, dass man ein modales Pop-up auch mit der Escape-Taste oder durch Klicken (Desktop) bzw. Tippen (Handy) außerhalb des Pop-ups schließen kann, wenn es richtig codiert ist!
Das Weglassen eines Schließen Buttons wird als Tastaturfalle bezeichnet.
Wenn der Inhalt unausweichlich ist
Wenn das Pop-up Inhalte enthält, die eine Interaktion des Benutzers erfordern, bevor er fortfahren kann (z. B. Fehler bei der Formularvalidierung, Zustimmungshinweise), können die Benutzer das Pop-up über einen Schließen-Button schließen, wenn sie nicht darauf reagieren möchten.
Bei der Navigation über die Tastatur
Für Nutzer, die mit der Tastatur navigieren, ist ein Schließen-Button unerlässlich, da sie damit das Pop-up Fenster schließen können, ohne auf die Maus angewiesen zu sein. Es ist von entscheidender Bedeutung, dass der Button fokussierbar und mit Tastaturkürzeln bedienbar ist. In der Greyd.Suite ist dies Standard!
Für Screenreader-Nutzer
Ein Schließen-Button bietet Nutzern, die auf Bildschirmlesegeräte angewiesen sind, eine klare und eindeutige Möglichkeit, das Pop-up Fenster zu schließen, insbesondere wenn das Bildschirmlesegerät das Vorhandensein des Buttons ankündigt.
Auf mobilen Geräten und Touchscreens
Auf Touch-Geräten können Nutzer Schwierigkeiten haben, mit anderen Methoden zum Schließen zu interagieren (z. B. tippen außerhalb des Pop-ups). Ein Schließen-Button bietet eine klare und barrierefreie Möglichkeit, das Pop-up zu schließen.
Wenn es komplexe Interaktionen gibt
Wenn das Popup komplexe Inhalte oder mehrere Schritte enthält, sorgt ein Schließen-Button dafür, dass die Benutzer an jeder Stelle aussteigen können, ohne verwirrt zu werden oder in eine Falle zu geraten.
Für sehbehinderte Nutzer
Für Nutzer mit Sehbehinderungen ist ein einheitlicher und gut sichtbarer Schließen-Button wichtig, damit sie diesen leicht finden und benutzen können.
Im Allgemeinen verbessert ein Schließen-Button in Pop-up Fenstern die Benutzerfreundlichkeit für alle Benutzer, da sie eine klare und einfache Methode bietet, das Pop-up zu schließen, unabhängig von der Art der Interaktion oder den besonderen Anforderungen an die Barrierefreiheit.
Gute Benutzerfreundlichkeit steigert den Umsatz
Etwas so scheinbar Simples wie ein Schließen-Button ist eine wichtige Voraussetzung für die Benutzerfreundlichkeit. Es ist auch eines der Erfolgskriterien in den WCAG-2.2-Leitlinien, und daher ist es nicht nur ein “nice to have”, wenn man sicherstellt, dass dieser Button vorhanden ist (in einer anklickbaren Größe von mindestens 24×24 Pixeln).
Und falls du dir nicht sicher bist, ob du das nachvollziehen kannst: Haben wir uns nicht alle schon einmal darüber geärgert, dass das Anmeldeformular oder die Pop-up-Werbung zwar einen Schließen-Button hatte, dieser aber so winzig war, dass du ihn auf deinem Smartphone nicht treffen konntest?
Viele Besucher verlassen eine Website, wenn so etwas passiert. Und das ist das Gegenteil von dem, was wir wollen, nicht wahr?
Greyd arbeitet ständig daran, ihre Funktionen barrierefrei zu machen.
Barrierefrei bedeutet, dass du dir keine Gedanken über die technischen Details “unter der Haube” machen musst. Und das ist heutzutage eine große Sorge weniger, denn im Juni 2025 tritt das Europäische Gesetz zur Barrierefreiheit (EAA) in Kraft.
Das ist etwas, womit viele kommerzielle Pagebuilder heutzutage zu kämpfen haben, da die Uhr tickt und sie hart an der Behebung arbeiten. Greyd hatte und hat immer noch den Vorteil einer frischen Codebasis. Das ist einer der Gründe, warum ich sie zu meinen Favoriten bei der Erstellung von Websites gemacht habe, lange bevor ich Produktbotschafter wurde.
Möchtest du mehr darüber erfahren, wie du deine Websites barrierefrei machen kannst?
Wenn du die Greyd.Suite verwendest, musst du dich nur um das Design und den Inhalt kümmern. Wenn du mehr über die Barrierefreiheit der Greyd.Suite und die Vorteile der Umsetzung deiner Projekte mit der Greyd.Suite erfahren möchtest, kannst du gerne einen digitalen Kaffee mit mir buchen!
