Öffne auf Deiner eigenen Seite einmal ein Pop-up, etwa das Newsletter-Fenster oder den Cookie-Hinweis. Lass danach die Maus liegen und drücke nur die Tab-Taste, mehrmals hintereinander. Bleibt die Markierung im Fenster, oder wandert sie dahinter auf die Seite, die eigentlich blockiert sein sollte?
Dieser kurze Versuch verrät Dir, ob Dein Dialogfenster Tastatur-Nutzer fair behandelt. Viele Pop-ups fangen jeden, der ohne Maus arbeitet, in einer Sackgasse. Das Fenster liegt vorne, die Tab-Taste aber führt hinter die Kulissen, und ein klarer Weg zurück fehlt. Woran Du ein faires Overlay erkennst, lässt sich in wenigen Minuten lernen, und das Meiste davon nimmt Dir ein gut gewähltes Werkzeug ab.
Warum Pop-ups zur Barriere werden
Ein Modal ist ein Fenster, das sich über die Seite legt und die Aufmerksamkeit auf sich zieht: das Newsletter-Angebot, der Cookie-Hinweis, eine Rückfrage vor dem Absenden. Solange Du eine Maus führst, klickst Du einfach auf das Kreuz oder neben das Fenster und bist wieder draußen.
Wer das Web allein über die Tastatur oder einen Screenreader bedient, hat diesen Ausweg nicht. Erscheint das Fenster, wandert die Markierung beim Tabben oft an ihm vorbei und unsichtbar weiter über die Seite dahinter. Der Besucher hört von seiner Vorlese-Software Links und Felder, die er gar nicht sehen kann, und das eigentliche Fenster bleibt unerreichbar.
Im schlimmsten Fall öffnet sich das Pop-up ungefragt, schiebt sich vor den Inhalt und lässt sich mit der Tastatur weder bedienen noch schließen. Ein Teil Deiner Besucher steckt dann fest, noch bevor er Deinen eigentlichen Inhalt erreicht hat.
Den Fokus einfangen und zurückgeben
Das Herzstück eines fairen Dialogfensters ist die Fokus-Falle. Sobald das Fenster offen ist, bleibt die Tastatur-Markierung darin gefangen: Tab springt durch die Knöpfe und Felder des Fensters und am Ende wieder zum Anfang, ohne dahinter zu entkommen. So tastet sich der Besucher sicher durch das Angebot, statt ins Leere zu greifen.
Genauso wichtig ist der Weg zurück. Schließt der Besucher das Fenster, muss die Markierung an die Stelle zurückspringen, an der er vorher war, etwa auf den Knopf, der das Pop-up geöffnet hat. Landet die Markierung danach ganz oben auf der Seite oder verschwindet sie spurlos, hat er die Orientierung verloren.
Damit das überhaupt sichtbar ist, braucht jedes aktive Element im Fenster eine deutliche Markierung. Wie diese sichtbare Markierung des Fokus aussieht und warum sie so oft fehlt, zeigt der eigene Beitrag dazu.
Mit ESC und klarem Button schließbar
Ein gutes Fenster bietet immer zwei Wege nach draußen. Die Escape-Taste schließt es sofort, ohne dass der Besucher erst den richtigen Knopf suchen muss. Das ist die Bewegung, die Tastatur-Nutzer von jedem Banner und Menü erwarten, und sie sollte überall gleich funktionieren.
Dazu gehört ein sichtbarer Schließen-Knopf, der sich klar benennen lässt und groß genug zum Treffen ist. Ein winziges Kreuz in der Ecke, das nur aus einem grauen Symbol besteht, reicht nicht. Eine Vorlese-Software muss verstehen und ansagen, dass dieser Knopf das Fenster schließt.
- Escape: schließt das Fenster jederzeit, ohne Suche nach dem richtigen Element.
- Sichtbarer Knopf: ein beschrifteter Schließen-Button, groß genug für Maus und Finger.
- Klick daneben: ein Klick neben das Fenster schließt es zusätzlich, ersetzt aber nie die ersten beiden Wege.
Verlässt Du Dich allein auf den Klick neben das Fenster, sperrst Du jeden aus, der keine Maus führt. Erst die Kombination aus Escape und einem klaren Knopf macht das Schließen für alle bedienbar.
Besucher nicht überrumpeln
Viele Pop-ups springen direkt beim Laden der Seite auf oder genau dann, wenn der Besucher gerade liest. Für Menschen, die langsamer wahrnehmen oder die Seite vorlesen lassen, ist dieser plötzliche Wechsel anstrengend, weil ihre Orientierung mitten im Satz wegbricht.
Fairer ist ein Fenster, das einen Anlass hat: ein Klick auf einen Knopf, eine bewusste Aktion des Besuchers. Wenn ein Pop-up doch von selbst erscheinen soll, dann mit etwas Verzögerung und nur einmal, nicht bei jedem Seitenwechsel aufs Neue.
Auch Bewegung will dosiert sein. Ein Fenster, das hereinfliegt oder pulsiert, lenkt ab und kann Menschen mit Empfindlichkeit für Bewegung Unwohlsein bereiten. Ein ruhiges Einblenden reicht völlig, um die Aufmerksamkeit zu lenken.
Cookie-Banner sind auch nur Dialoge
Der häufigste Dialog auf den meisten Seiten ist der Cookie-Hinweis, und genau er macht oft die meisten Probleme. Er erscheint sofort, blockiert den Inhalt und verlangt eine Entscheidung, bevor es weitergeht. Für Tastatur-Nutzer wird er damit zum ersten Stolperstein überhaupt.
Hier gelten dieselben Regeln wie für jedes Pop-up: Die Markierung muss in den Banner springen, die Auswahl-Knöpfe müssen mit der Tastatur erreichbar sein, und „Annehmen" wie „Ablehnen" sollten gleich gut auffindbar sein. Ein Banner, der nur den Zustimmen-Knopf bedienbar macht und das Ablehnen versteckt, ist unfair und obendrein rechtlich angreifbar.
Prüfe Deinen Cookie-Hinweis mit demselben Tab-Test wie jedes andere Fenster. Oft steckt er in einem fremden Werkzeug, das Du wechseln oder anders einstellen kannst, sobald Du das Problem erkannt hast.
Woran Du ein faires Overlay erkennst
Den wichtigsten Test machst Du selbst, ohne Werkzeug. Öffne das Fenster, lege die Maus weg und gehe mit Tab, Escape und der Eingabetaste hindurch. Achte dabei auf wenige klare Punkte.
- Eingefangen: Bleibt die Markierung im Fenster und springt nicht dahinter auf die Seite?
- Sichtbar: Erkennst Du bei jedem Tab-Druck deutlich, welches Element gerade aktiv ist?
- Schließbar: Beendet Escape das Fenster, und gibt es einen beschrifteten Schließen-Knopf?
- Zurückgegeben: Landet die Markierung nach dem Schließen dort, wo Du vorher warst?
Stolperst Du bei einem dieser Punkte, weißt Du genau, was Deiner Agentur oder dem Anbieter Deines Werkzeugs fehlt. Diese Bedienung übernimmt sich am leichtesten gleich vom Werkzeug, sodass Du sie nicht selbst nachbauen musst. Das ist dasselbe Denken wie bei einem fairen Captcha im Formular: Schutz und Funktion dürfen niemanden an der Tür stehen lassen.
Fazit
Ein Pop-up ist schnell eingebaut und genauso schnell zur Stolperfalle geworden, wenn die Tastatur außen vor bleibt. Drei Dinge machen den Unterschied: Das Fenster hält den Fokus, gibt ihn beim Schließen zurück und überrumpelt niemanden mit einem plötzlichen Auftritt.
Du musst dafür keine Zeile Code schreiben. Mach den Zwei-Minuten-Tab-Test auf Deinen wichtigsten Fenstern, und gib das Ergebnis an die Stelle weiter, die Deine Seite betreut. Damit Du verstehst, wie die Tastatur-Bedienung insgesamt zusammenspielt, hilft der Beitrag, der zeigt, wie sich eine Seite komplett über die Tastatur bedienen lässt.