Nicht-modale Dialoge

Ein nicht-modaler Dialog wird über dem Seiteninhalt angezeigt. Manchmal wird er durch die Seite und manchmal durch eine Benutzeraktion ausgelöst. Die darunter befindliche Seite ist noch zugänglich, wird aber jetzt oft teilweise vom Dialog abgedeckt.

Der modale Dialog kann verschiedene Zwecke haben: Er kann Benutzer bitten, die Verwendung von Cookies zu akzeptieren, er kann Interaktions-Angebote wie ein Feedback-Formular bzw. die Ankündigung einer Umfrage anzeigen, oder er kann zusätzliche Informationen anbieten.

Ein nicht-modaler Dialog in Aktion

Das folgende Video zeigt das Auftreten eines typischen nicht-modalen Dialogs, der die Besucher einlädt, an einer Nutzer-Umfrage teilzunehmen.

Video-Beschreibung

Ein Tastaturnutzer kommt auf eine Seite der Website der Stadt Den Haag, die erklärt, wie man einen Pass bestellt.

  • Die Seite wird geladen.
  • Der Nutzer beginnt, durch die Seite zu tabben. Es gibt eine gute Fokushervorhebung.
  • Ein nicht-modales Dialogfeld öffnet sich am unteren Rand der Seite a
  • Der Nutzer tabbt weiter, der Fokus liegt sofort auf den Elementen des Dialogs.
  • Der Nutzer schließt den Dialog mit ENTER.
  • Der Fokus kehrt zum Anfang der Seite zurück – nicht zur Fokusposition vor dem Öffnen des Dialogs.

Wann ist ein Dialog 'nicht-modal '?

Es gibt verschiedene Definitionen, was ein nicht-modaler Dialog ist. Es ist nicht immer einfach, die Grenze zu ziehen.

Für einige besteht die Haupteigenschaft eines Dialogs, ob modal oder nicht, darin, dass der Tastaturfokus darin zirkuliert (dass er "den Fokus hält"), was bedeutet, dass Autoren den Fokus auf den Dialog legen müssen, sobald er geöffnet ist.

In einer anderen Sicht ist das wichtigste Unterscheidungsmerkmal eines nicht-modalen Dialogs, dass er auftaucht und andere Inhalte auf der Seite verdeckt, ohne den Zugriff auf den Rest der Seite zu verhindern. Ein Klick auf andere Inhalte schließt häufig den nicht modalen-Dialog.

Ein weiterer zu berücksichtigender Aspekt ist, ob der Inhalt des Dialogs wesentlich ein Formular ist (in diesem Fall ist es eindeutig ein Dialog), oder ob der Inhalt informationsorientiert ist wie im Fall der Cookie-Benachrichtigungen. Im letzteren Fall ist die Rolle region wahrscheinlich geeigneter als die Rolle dialog, aber die Grenze ist nicht immer leicht zu ziehen.

Wenn erwartet wird, dass der nicht-modale Dialog für den Benutzer verfügbar bleibt, wird ein Mechanismus gebraucht, um den Fokus auf andere Teile der Seite und zurück zum Dialog zu versetzen. Die ARIA Authoring Practices 1.0 (veraltet) hatten vorgeschlagen, F6 dafür zu verwenden (siehe ein Fehlerbehandlungsbeispiel von Deque), andere Ansätze haben STRG + TAB verwendet.

Cookie-Benachrichtigungen

Manche Dialoge erscheinen gleich beim Laden der Seite (etwa Cookie-Benachrichtigungen). Andere tauchen erst nach einiger Verzögerung auf (zum Beispiel Fenster mit Umfragen). Beide Formen sind recht verbreitet und können besonders für Tastaturnutzer schwere Barrieren darstellen. Manche Umfrage-Dialoge schnappen sich den Fokus und unterbrechen damit den Nutzer, andere nicht. Die meisten Cookie-Benachrichtigungen versetzen nicht den Fokus. Wir behandeln sie hier unter der Rubrik nicht-modale Dialoge.

Toast-Nachrichten

Eine Spielart seitengenerierter Nachrichten erscheint nur kurz, um nach wenigen Sekunden wieder zu verschwinden: Die sogenannten toast messages. Solche Nachrichten vermitteln oft den Status der Nutzung, sie sagen etwa "Ihr Eintrag wurde gesichert" oder "Das Formular wurde abgeschickt". Diese Nachrichten betrachten wir hier nicht als nicht-modale Dialoge.

Toggletips

Sogenannte Toggletips erscheinen beim Aktivieren von Buttons und legen sich über den Seiteninhalt, haben aber keine interaktiven Elemente, die fokussiert werden könnten. Sie können deshalb einfach für nicht-visuelle Nutzer mittels aria-live vorgelesen werden, sobald sie erscheinen. Vergleiche den Teil zu Toggletips in Heydon Pickerings Artikel Tooltips & Toggletips.

Nutzer-aktivierte Pop-ups mit interaktiven Elementen

Eine andere Art nicht-modaler Dialoge sind Popups, die beim Aktivieren von Textlinks erscheinen, zum Beispiel Glossardefinitionen. Diese Popups enthalten oft einen Schließen-Schalter und manchmal auch Links (etwa Querverweise ins Glossar), schließen aber in der Regel automatisch, wenn Nutzer über sie hinaustabben oder außerhalb des Dialogs klicken. Diese Dialoge sind komplexer als Toggletips. Auch diese fassen wir hier unter der Rubrik nicht-modaler Dialog.

Ausklapp-Bereiche

Ausklappbereiche öffnen ebenfalls nach Aktivierung eines Elements, üblicherweise ein toggle button, der bei erneuter Aktivierung den ausgeklappten Inhalt wieder verbirgt. Diese Elemente halten nicht den Fokus. Sie machen Inhlate sichtbar und schieben dadurch die folgenden Inhalte weiter nach unten statt sie zu verdecken (siehe die Seite über Ausklapp-Bereiche).

Bühnen

Andere nutzer-aktivierte Komponenten (manchmal "Bühnen" genannt) verdecken den größten Teil der Seite, aber halten üblicherweise nicht den Fokus und schließen nicht selbsttätig, wenn man über ihre Grenzen hinaustabbt. Solche Bühnen stehen irgendwo zwischen Ausklapp-Bereich, Mega-Menü und nicht-modalem Dialog.

Typische Nutzungsprobleme mit nicht-modalen Dialogen

Die folgenden Beispiele zeigen die verschiedene Probleme, die für Benutzer mit unterschiedlichen Behinderungen bei nicht-modalen Dialoge auftreten.

1 Tastaturnutzer: Schwierigkeit, einen nicht-modalen Dialog zu schließen

Für Tastaturbenutzer kann es sehr mühsam sein, den nicht-modalen Dialog zu lokalisieren und ihne zu schließen - besonders, wenn die Fokus-Reihenfolge nicht mit der visuellen Reihenfolge übereinstimmt.

Video-Beschreibung

Ein Tastaturbenutzer öffnet die Website des Bundesministeriums für Verkehr und digitale Infrastruktur (bmvi.de).

  • Unmittelbar nach dem Aufruf der Startseite erscheint ein Cookie-Dialog über der Hauptnavigation.
  • Der Nutzer drückt wiederholt die TAB-Taste, um die Schaltfläche OK zu fokussieren und dann den Cookie-Informationsdialog zu schließen.
  • Der Nutzer muss die gesamte Seite durchlaufen, bis der OK-Button fokussiert wird.
  • Der Nutzer drückt ENTER, um den nicht modalen Dialog zu schließen.

Es wäre schneller, rückwärts zu tabben, um vom Seitenbeginn her unten in die Seite hineinzutabben, um den nicht-modalen Dialog für Cookie-Informationen zu erreichen, aber dies wird für die meisten Benutzer nicht offensichtlich sein.

Zugänglichkeits-Tipps für nicht-modale Dialoge

Es gibt wenige feste Regeln für nicht-modale Dialoge. Die geeignete Umsetzung hängt stark von Kontext und Inhalt ab. Überlegen Sie, ob ein modales Dialogfeld oder ein Ausklapp-Bereich nicht besser passt.

Die Zugänglichkeits-Tipps sind unterschieden in seiten-aktivierte und nutzer-aktivierte nicht-modale Dialoge.

Allgemeine Tipps

  • Gebe nicht-modalen Dialogen einen sinnvollen Namen. Verweise über aria-labelledby auf eine sichtbare Überschrift, oder vergebe einen unsichtbaren Namen über aria-label.
  • Benenne alle interaktiven Elemente des Dialogs, einschließlich Schließen-Schalter. Jeder Dialog sollte einen eindeutig benanntes Element zum Schließen haben. Icon-basierte Schalter zum Schließen [x] brauchen einen zugänglichen Namen, der von Screenreadern ausgegeben wird.
  • Benutze die korrekten ARIA-Rollen. Benutze role="dialog" und aria-modal="false" auf dem Dialog.

Seiten-aktivierte nicht-modale Dialoge

Die folgenden Tipps betreffen nicht-modale Dialoge, die sich beim Laden der Seite automatisch öffnen (z.B. Cookie-Benachrichtigungen), oder die sich öffnen, nachdem Nutzer einige Zeit auf der Seite zugebracht haben. Häufig sind dies Aufforderungen, an einer Umfrage teilzunehmen oder mit einem Mitarbeiter zu chatten, oder es sind Werbeangebote.

  • Plane den Umgang mit dem Fokus. Abhängig von Inhalten und Kontext kann ein nicht-modaler Dialog den Fokus erhalten, wenn er sich öffnet — oder auch nicht. In den meisten Fällen sollten nicht-modale Dialoge, die andere Inhalte nicht verdecken oder am unteren Seitenrand eingefügt werden, nicht den Fokus des Nutzers an sich reißen.
  • Mache es einfach, nicht-modale Dialoge, die andere Inhalte verdecken, zu schließen. Wenn ein nicht-modaler Dialog wichtige Seiteninhalte verdeckt, sollte er den Fokus erhalten, damit Tastaturnutzer ihn leicht schließen können. (Der Fokus sollte nach dem Schließen zum vorherigen Ort zurückversetzt werden.)
  • Sorge für eine sinnvolle Reihenfolge der Inhalte. Wenn ein nicht-modaler Dialog Seiteninhalte nicht verdeckt (etwa Cookie-Meldungen am Seitenbeginn, welche die Seiteninhalte nach unten schieben, oder ähnliche Meldungen am unteren Bildschirmrand mit fixer Position), sollte seine Position im Quellcode der visuellen Position auf der Seite entsprechen.
  • Plane einen Hinweis auf nicht-modale Dialoge. Dialoge, die sich mit Zeitverzögerung automatisch öffnen, können mittels aria-live="polite" ausgegeben werden. So werden nicht-visuelle Nutzer (oder Nutzer von Vergrößerungssoftware) auf sie aufmerksam, ohne dass sich ihr augenblicklicher Fokus ändert.

Nutzer-aktivierte nicht-modale Dialoge

  • Platziere den nicht-modalen Dialog direkt nach dem Element, das ihn aufruft. So können nicht-visuelle Nutzer den Dialog-Inhalt im Lesemodus leicht erreichen oder direkt zu den interaktiven Elementen des Dialogs tabben.
  • Setze ansonsten den Fokus in den Dialog. Falls der Dialog nicht direkt nach dem Element, dass ihn aufruft, eingefügt werden kann, versetze den Fokus auf das erste interaktive Element im Dialog.
  • Schließe den Dialog automatisch, wenn der Fokus ihn verlässt. Wenn der Tastaturfokus den Dialog verlässt oder ein Mausklick außerhalb des Dialogs registriert wird, sollte der Dialog schließen.

Anmerkung: Wenn nicht-modale Dialoge beim Öffnen den Fokus erhalten, kann der Fokus auch zirkulieren, bis der Dialog vom Nutzer über die Schließen-Taste oder ESC geschlossen wird. Für Tastaturnutzer benimmt sich diese Spielart also wie ein modaler Dialog. Siehe das Beispiel der Stadt Den Haag weiter oben, oder das (etwas veraltete) ARIA Non-Modal Dialog Example (Athena Technologies, kein Datum).