Modale Dialoge

Ein modaler Dialog öffnet sich über einer Seite meist nach einer Aktion (etwa: eine Taste wird gedrückt). Der Dialog wartet auf Nutzer-Eingaben. Die Seite darunter ist nun nicht erreichbar, oft ist sie abgedunkelt.

Ein Dialog kann verschiedene Funktionen anbieten: Eine von mehreren Optionen auswählen, eine wichtige Aktion bestätigen, Änderungen in Einstellungen oder an Datensätzen vornehmen, oder eine Eingabe machen - etwa einen Kommentar oder eine Nachricht schreiben.

Ein modaler Dialog in Aktion

Das folgende Video zeigt die Nutzung eines typischen modalen Dialogs.

Video-Beschreibung

Auf der Seite Twitter.com (nach dem Login) öffnet der "Tweet "-Button einen modalen Dialog zur Eingabe von Nachrichten.

  • Der Nutzer tabbt zur "Tweet"-Taste in der oberen rechten Ecke und aktiviert Sie mit ENTER.
  • Das modale Dialogfeld wird geöffnet, der Fokus wird auf das Textfeld gesetzt.
  • Der Nutzer gibt "Hallo! " in das Textfeld ein.
  • Er tabbt durch mehrere Bedienelemente bis zur "Tweet"-Taste.
  • Er aktiviert die "Tweet"-Taste mit ENTER.
  • Der Tweet "Hallo! " wird gesendet, und der modale Dialog schließt sich.

Verschiedene Arten von modalen Dialogen

Modale Dialoge werden in allgemeiner Software oft verwendet. In Web-Inhalten tauchten sie zuerst als kleine graue Fenster auf, die von Autoren über Javasript-Alerts oder Bestätigungsmeldungen erzeugt wurden.

Diese Nachrichten waren nicht zu gestalten und auch inhaltlich auf das eingeschränkt, was Javascript-Funktionen wie alert oder confirm zuließen. Daher begannen Autoren, benutzerdefinierte modale Dialoge mit divs zu erstellen.

Die zunehmende Bedeutung von Web-Inhalten auf mobilen Geräten hat zu einem Rückgang des Einsatzes von modalen Dialogen geführt - zumindest wenn man einen Dialog als Pseudofenster über einem inaktiven Seitenhintergrund versteht. Auf Websites, die für den mobile Endgeräte optimiert wurden, ist der modale Dialog normalerweise nur eine weitere Vollbildansicht.

Schließlich gibt es in HTML5 einen nativen Dialog, der Autoren und Benutzern das Leben erleichtern soll. Leider ist die Browserunterstützung für den nativen Dialog immer noch zu schlecht, um ihn sicher im Web zu verwenden (vgl. The current state of modal dialog accessibility). Microsofts Browser Internet Explorer und Edge sowie Apples Browser Safari unterstützen den nativen Dialog nicht, und Firefox unterstützt ihn bisher nur, wenn dies manuell aktiviert wird (des ist den meisten Nutzern Abe nicht bekannt). Es gibt jedoch ein Dialog-"Polyfill", das benutzerdefinierte Dialoge in jenen Browsern generiert, die den nativen Dialog nicht unterstützen. (Hinweis: Wir haben nicht getestet, wie gut das funktioniert).

Typische Nutzungsprobleme bei modalen Dialogen

Die folgenden Beispiele zeigen typische Nutzungsprobleme bei modalen Dialogen, je nach verschiedenen Zugangsweisen.

1 Nutzung mit Sehbehinderung: Den modalen Dialog finden

Bei Nutzung starker Vergrößerung öffnet der Dialog häufig außerhalb (oder größtenteils außerhalb) des sichtbaren Ausschnitts.

Video-Beschreibung

Ein sehbehinderter Nutzer, der mit der Windows 10-Lupe bei 700% Vergrößerung arbeitet, benutzt Twitter (twitter.com, nach Login) und möchte einen Tweet posten.

  • Zuerst schließt er einen Benachrichtigungsbereich, der ihn auffordert, seine E-Mail-Adresse zu bestätigen
  • Er sucht am oberen Rand der Seite rechts, findet die "Twittern" -Taste und klickt darauf
  • Auf einem dunklen Hintergrund öffnet sich ein modaler Dialog zum Schreiben des Tweets außerhalb des sichtbaren Ausschnitts
  • Der Benutzer bewegt den Mauszeiger, und der sichtbare Ausschnitt folgt
  • Der Benutzer entdeckt den modalen Dialog mit dem Texteingabefeld für den Tweet

2 Tastatur-Nutzung: Schlechte Fokus-Sichtbarkeit, schlechtes Fokus-Management

Das folgende Video zeigt, wie ein Tastaturnutzer mit einem Dialog interagiert. Um das Nachverfolgen der Aktion zu vereinfachen, haben wir den Screenreader NVDA eingeschaltet, der die jeweilige Fokusposition ansagt.

Video-Beschreibung

Auf der Seite simplesite.com, einer Toolbox zur visuellen Erstellung einfacher Webseiten, interagiert ein Tastaturbenutzer mit einem modalen Dialog, um Elemente für die Webseite auszuwählen.

  • Der Tastaturbenutzer fokussiert die Schaltfläche ADD CONTENT (Inhalt hinzufügen), die keinen sichtbaren Fokus zeigt, und aktiviert sie (siehe Hinweis)
  • Der Dialog öffnet sich
  • Er tabbt weiter, kein Fokus ist auf dem Schließen-Button sichtbar (x)
  • Er tabbt weiter, es gibt auch keinen sichtbaren Fokus auf den anderen Elementen
  • Er tabbt weiter, der Fokus läuft über den Inhalt des Dialogs hinaus zu den Browser-Bedienelementen (Adressleiste)
  • Der Fokus durchläuft danach den gesamten Seiteninhalt hinter dem Dialog

Ein sehender Tastaturbenutzer weiß nicht, wo der Fokus liegt, und könnte daher den Dialog nicht öffnen - es sei denn, er verwendet ein Helfer-Bookmarklet wie Force Focus, das eine Anzeige der Fokusposition erzwingt.

Zugänglichkeits-Tipps für modale Dialoge

  • Mache den Dialog erkennbar. Im modalen Dialog werden Inhalte gezeigt, die ursprünglich nicht auf der Seite waren. Für blinde Benutzer ist es wichtig, dass Sie es bemerken, wenn ein modaler Dialog geöffnet wird. Wenn er nicht korrekt ausgezeichnet ist, können sie den Dialog nicht wahrnehmen.
  • Setze den Tastaturfokus in den Dialog und zurück auf den Auslöser. Für Tastatur-Benutzer (und das schließt blinde Benutzer ein) ist es wichtig, dass der Tastaturfokus in den Dialog versetzt wird, wenn er geöffnet wird, damit sie mit seinem Inhalt interagieren können. Wenn der Dialog geschlossen wird, sollte der Fokus zu dem Element zurückkehren, das ihn ausgelöst hat.
  • Halte den Tastaturfokus im Dialog. Der Tastaturfokus sollte im Dialog zirkulieren und ihn erst verlassen, wenn er geschlossen wird.
  • Gebe dem Dialog einen aussagekräftigen Namen – stelle sicher, dass der Name für die Hilfstechnologie verfügbar ist, wenn der Dialog geöffnet wird
  • Beschrifte alle Dialog-Steuerelemente, einschließlich der Schließen-Schaltfläche. Jeder Dialog sollte über ein klar beschriftetes Steuerelement verfügen, um ihn zu schließen. Häufig haben modale Dialoge ein kleines (x) in der oberen rechten Ecke. Die meisten sehenden Benutzer wissen, dass dies das Steuerelement zum Schließen des Dialogs ist. Diese Schaltfläche muss auch einen hinterlegten Namen haben, der von Screenreader-Nutzern ausgelesen werden kann.
  • Blende Inhalte unter dem Dialog aus. Setze aria-hidden = "true" für den Seiteninhalt im Hintergrund, während der Dialog geöffnet ist. Eine gute Struktur hierfür siedelt den Dialog als ein Geschwister des Hauptinhalts an.
  • Gehe mit Zeigereingaben außerhalb des Dialogs um. Ignoriere Klicks außerhalb des modalen Dialogs oder schließe den modalen Dialog.
  • Stelle sicher, dass die Escape-Taste (ESC) den Dialog schließt. Viele Benutzer erwarten, dass das Drücken der ESC-Taste den Dialog schließt. Verlasse dich aber nicht auf ESC, sondern füge auch eine sichtbare Schaltfläche zum Schließen ein: Es gibt Geräte, die keine Tastaturen besitzen.

Hinweis zu aria-modal: Die Verwendung von aria-modal = "true" macht statische Inhalte in Dialogen (falls vorhanden) unter macOS und iOS derzeit unzugänglich (vergleiche The current state of modal dialog accessibility).

Quellen für modale Dialoge