Fokus nicht verdeckt  

Overlays dürfen fokussierte Inhalte nicht überlagern

  • veröffentlicht am
  • von Jan Hellbusch

Overlay überlagert Login-Formular.

Zwei neue Erfolgskriterien zu Overlays werden in den Web Content Accessibility Guidelines (WCAG 2.2 eingeführt. Wenn Popovers, Dialogfenster und andere Overlays angezeigt werden, dürfen sie fokussierte Komponenten nicht überlagern. Anders herum gesagt: Der Tastaturfokus darf nicht hinter vordergründige Inhalte „verschwinden“.

In der Praxis bedeutet Overlay schlicht, dass ein Inhalt über andere Inhalte gelegt wird. Die Overlays können sich mit der Webseite scrollen lassen oder sie können an bestimmte Bereiche des Ansichtsbereichs fixiert werden.

Es können sehr unterschiedliche Inhalte als Overlay präsentiert werden: Benachrichtigungen, Aufforderungen einer Eingabe, Details für einen anderen Inhalt oder Werbung. Webanwendungen aller Art stellen einzelne Werkzeuge als Overlays bereit, um bestimmte Aufgaben zu erledigen. So kann der Platz auf dem Bildschirm schon mal knapp werden und es kommt unweigerlich dazu, dass Overlays fokussierbare Komponenten überlagern. Werden noch dazu Textvergrößerung und kleine Displays berücksichtigt, wird manche Weboberfläche nicht alle Inhalte WCAG-konform anbieten können.

Overlays kommen in unterschiedlicher Form vor. Im einfachsten Fall handelt es sich bei einem Overlay um eine Seitenregion oder ein Absatz, der per CSS über andere Inhalte gelegt wird. Sie können auch Dialogfenster oder Widgets sein. Folgende Overlays wollen wir unterscheiden:

  • Dialogfenster (etwa mit dem dialog-Element),
    Ein Dialogfenster mit Informationen zu Cookies. Es sind Schaltflächen ‚Alle akzeptieren‘, ‚Nur erforderliche‘ und ‚Optionen‘. Im abgedunkeltem Hintergrund ist die Webseite cdu.de erkennbar.
  • Widgets, die durch Nutzende eingeblendet werden (z.B. ein Untermenü),
    Ein ausgeklappter Menü, wobei der Hintergrund leicht abgedunkelt wird. Im Hintergrund sind Komponenten erkennbar, die auch überlagert werden. Die Webseite barmer.de ist im abgedunkeltem Bereich erkennbar.
  • Popovers (z.B. ein Tooltipp) oder
  • fest positionierter Inhalt (z.B. wichtige Links oder eine Werkzeugleiste, die am oberen Rand des Ansichtsbereichs als Sticky-Header fixiert wird).
    Zwei Ansichten von ergo.de, wo der Inhalt offenbar nach oben gescrollt wurde. Der obere Bereich mit Links überlagert in der ersten Ansicht mehrere Schaltflächen. In der zweiten Ansicht ist eine Schaltfläche fokussiert und ist vollständig sichtbar.

Die Overlays haben unterschiedliche Eigenschaften, auf die wir kurz eingehen. Zunächst verursachen Overlays regelmäßig zwei Barrieren: Zum einen müssen Overlays bei Textvergrößerung und erhöhten Textabständen funktionieren. Zum anderen können Overlays insbesondere Komponenten überlagern, die per Tastatur fokussierbar sind, aber durch das Overlay verdeckt bleiben:

  1. Overlays sind bei Textvergrößerung problematisch, weil sie dadurch oder durch kleinere Ansichtsbereiche größere Teile des Ansichtsbereichs einnehmen. Je kleiner der Bildschirmausschnitt, desto weniger praktikabel sind beispielsweise Sticky-Header oder Sticky-Footer:
    Zwei Ansichten von spd.de. Die erste Ansicht zeigt die Inhalte bei einer Bildschirmbreite von 1920px. In der zweiten Ansicht wird die Seite mit 1280px Bildschirmbreite und ein Seitenzoom von 400% gezeigt; dabei sind der Kopf- und Fußbereich beide sichtbar und nehmen durch die Vergrößerung fast den kompletten Bildschirmausschnitt ein. Vom Inhalt ist nur eine Zeile Text erkennbar.
  2. Aktive Elemente müssen bei Fokus sichtbar sein. Die Überlagerung von fokussierbaren Inhalten durch Overlays darf nicht dazu führen, dass die aktiven Elemente fokussiert werden können, aber verdeckt bleiben. Um das Verdecken von fokussierbaren Elementen zu vermeiden, gibt es verschiedene Techniken:
    • Das Overlay wird als dialog-Element mit der showModal() Methode angezeigt oder die Interaktion mit den Hintergrundinformationen wird mit dem inert-Attribut unterbunden. In beiden Fällen werden Browser die Interaktion mit Mauszeiger, Tastatur und Assistenztechnologien unterbinden. Es ist nur noch das Overlay zugänglich.
    • Das Overlay wird nur angezeigt, wenn der Tastaturfokus darin steht. Diese Vorgehensweise ist vor allem bei zusammengesetzten Widgets wie Menüs oder Grids mit einem Fokus-Management sinnvoll. Die Widgets werden durch Aktivierung einer Schaltfläche eingeblendet und der Tastaturfokus wird in das Widget gesetzt. Wird der Fokus per Tab-Taste entfernt, wird das Widget wieder ausgeblendet.
    • Bei popovers z.B. mit dem popovertarget-Attribut werden Overlays zur Webseite hinzugefügt. Sie bleiben persistent bis sie durch Interaktion (z.B. Drücken der Esc-Taste) ausgeblendet werden. Diese Notwendigkeit einer Interaktion wird durch das Erfolgskriterium 2.4.11, um das es hier geht, abgedeckt.
    • fest positionierter Inhalt (mit position:fixed; oder position:sticky;) kann ebenfalls fokussierbare Inhalte überlagern. Eine Möglichkeit, das Verdecken von Komponenten zu vermeiden ist der Einsatz des CSS Scroll Snap Modul.

Sie müssen sicherstellen, dass Overlays fokussierbare Inhalte im Hintergrund nicht überlagern. Wenn eine Komponente fokussiert ist, dann ist der Fokusindikator das entscheidende visuelle Merkmal für Tastaturnutzende, um die Möglichkeit einer Interaktion zu erkennen. Die Überlagerung durch Overlays verhindert die Erkennbarkeit. Solche Situationen entstehen nicht nur wenn per Tab-Taste navigiert wird, sondern auch bei Textvergrößerung oder wenn eine Webseite gescrollt wird und beispielsweise eine fokussierte Komponente unter einem Overlay verschwindet.

Tastaturnutzende (einschließlich von Assistenztechnologien wie Knopfschalter oder Spracheingabe) müssen am Bildschirm erkennen, ob sie eine Interaktion auslösen können. Der Fokus spielt auch für andere Nutzende eine Rolle. Beispielsweise können Nutzende mit Aufmerksamkeitsdefiziten oder Einschränkungen des Kurzzeitgedächtnisses durch einen sichtbaren Fokus profitieren, ebenso wie Nutzende von Vergrößerungssystemen, indem die fokussierte Komponente als Erinnerung oder als Orientierung dient.

Wenn Webseiten ein oder mehrere Overlays umfassen und Tastaturnutzende per Fokus in den Hintergrund gelangen, dann haben wir einen Fall für die Anforderungen. Die Anforderungen sind dabei nur auf tatsächlich fokussierbare Elemente anwendbar; wenn ein Overlay angezeigt wird und die Interaktion mit dem Hintergrund per Tastatur nicht möglich ist, dann sind aktive Elemente im Hintergrund (zu diesem Zeitpunkt) nicht fokussierbar.

Die WCAG 2.2 bieten zwei Erfolgskriterien zur Überlagerung von Komponenten durch Overlays:

  1. Auf Konformitätsstufe AA (Erfolgskriterium 2.4.11) darf eine fokussierbare Komponente nicht vollständig durch entwicklerseitig bereitgestellte Inhalte überlagert werden. Es gibt weitere Einschränkungen für die Anwendbarkeit, etwa wenn Nutzende die Overlays durch Interaktion verschieben können oder wenn sie eine verdeckte fokussierte Komponente sichtbar machen können, ohne dabei den Fokus zu verändern.
  2. Auf Konformitätsstufe AAA (Erfolgskriterium 2.4.12) sollen fokussierbare Komponenten immer vollständig sichtbar sein.

Das Erfolgskriterium 2.4.12 kann auch anders herum formuliert werden: Overlays dürfen keine fokussierbaren Komponenten überlagern. Overlays sollen

  • so positioniert werden, dass es nicht zur Überlagerung von Komponenten kommen kann, oder
  • so gestaltet werden, dass der Fokus immer im Overlay bleibt, bis der Overlay durch die Nutzenden ausgeblendet wird (nur für Dialogfenster und Widgets umsetzbar).

Auf Konformitätsstufe AAA werden außerdem folgende drei Ausnahmen aus Erfolgskriterium 2.4.11 aufgehoben:

  1. Teilweise Überlagerung: Auf Konformitätsstufe AA dürfen fokussierte Komponenten teilweise verdeckt werden. Teilweise verdeckte Komponenten können immer noch gut erkennbar gestaltet werden, auch wenn sie umso schlechter erkennbar werden, je mehr sie verdeckt werden. Wenn beispielsweise halbtransparente Overlays eine fokussierte Komponente überlagern, dann ist die Komponente nicht vollständig verdeckt. Solche Effekte können unter Umständen WCAG-konform auf Stufe AA sein, dafür müssen die Kontrastanforderungen an Text, Komponenten und grafische Objekte erfüllt werden.
  2. Verschiebbare Inhalte: Sollte ein Overlay durch Interaktion verschiebbar sein, dann muss auf Konformitätsstufe AA nur die ursprüngliche Position darauf geprüft werden, ob sie fokussierbare Komponenten überlagert.
  3. Ausblendbare Inhalte: Wenn Nutzende durch Aktivierung einer Komponente Inhalte in Form eines Overlays zur Webseite hinzufügen und der Overlay die gerade aktivierte Komponente überlagert, dann kann das auf Konformitätsstufe AA noch zulässig sein. Die Voraussetzung dafür ist, dass die Nutzenden die fokussierte Komponente wieder anzeigen können, ohne den Fokus zu ändern. Inhalte im Vordergrund müssen dann unmittelbar nach dem Einblenden durch die Nutzenden ausgeblendet werden können, z.B. indem sie auf die Esc-Taste drücken.

Die Anforderungen sind dabei nicht auf eine bestimmte Größe des Ansichtsbereichs beschränkt. Sinnvollerweise dürfen fokussierbare Komponenten auch nicht bei geringer Bildschirmauflösung und/oder Seitenzoom durch Inhalte verborgen werden (siehe Konformitätsbedingung 5.2.2 der WCAG 2.2). Aus diesem Grund sollte das Entwicklerteam versuchen, die Häufigkeit und den Umfang von teilweise verdeckten fokussierbaren Komponenten zu reduzieren. Die vollständige Sichtbarkeit von fokussierten Elementen sollte das Ziel sein.

Overlays vermeiden

Sie können die Überlagerung von fokussierbaren Komponenten auf unterschiedlicher Weise vermeiden. Die folgenden Techniken, Inhalte zu einer Webseite hinzuzufügen, verursachen normalerweise keine Überlagerungen von fokussierbaren Komponenten und sind deshalb im Sinne beider Kriterien:

  • Fokus beschränken: Entwicklerinnen können Inhalte zur Seite als Dialogfenster hinzufügen oder Hintergrundinformationen mit dem inert-Attribut auszeichnen. Entwicklerinnen stellen sicher, dass der Fokus innerhalb des Dialogfensters zirkuliert. Solange das Dialogfenster angezeigt wird, kann mit den Inhalten im Hintergrund per Tastatur nicht interagiert werden.
  • Ausblenden bei Entfernung des Fokus: Menüs, Auswahllisten, Baumstrukturen, Grids und andere Komponenten, die als Overlay eingeblendet werden, können andere Inhalte überlagern, solange der Fokus innerhalb der Widgets steht. Die Widgets sollen ausgeblendet werden, wenn Nutzende den Fokus per Tab-Taste aus dem Widget entfernen. Wenn der Widget wieder eingeblendet wird, ist der Fokus innerhalb des Widgets an der gleichen Stelle wie zuvor.
  • Umfließen: Inhalte können zum Dokumentenfluss hinzugefügt werden und so gestaltet werden, dass die anderen Inhalte der Webseite um den neuen Inhalt fließen.
    Zwei Ansichten der Seite mit den WCAG-2.2-Richtlinien. In der ersten Ansicht ist die Navigation zusammengeklappt und der Inhalt nimmt die volle Breite des Ansichtsbereichs ein. In der zweiten Ansicht ist die Navigation sichtbar und nimmt den linken Teil des Ansichtsbereichs ein, während der Inhalt den rechten Teil einnimmt.

    Wenn die Navigation ausgeklappt wird, nimmt der Inhalt weniger horizontalen Platz ein.

  • Verschieben von Inhalten: Wenn ausklappbare Schaltflächen oder Akkordeons ausgeklappt werden, werden Inhalte zur Seite hinzugefügt. Die neuen Inhalte schieben die nachfolgenden Inhalte nur nach unten. Wenn die ausklappbare Schaltfläche zugeklappt wird und die zuvor eingeblendeten Inhalte von der Webseite wieder entfernt werden, werden die nachfolgenden Inhalte wieder nach oben geschoben.
  • Leerraum nutzen: Je nach Layout können Inhalte, die zur Webseite hinzugefügt werden, in einem Bereich angezeigt werden, in dem keine Inhalte überlagert werden können. Das kann ein rechter Bereich der Webseite sein, der für die Einblendung von ergänzenden oder unterstützenden Informationen genutzt wird, oder ein Bereich der Webseite, der für Statusmeldungen reserviert ist.

Übersetzung der Erfolgskriterien 2.4.11 und 2.4.12

Das Erfolgskriterium 2.4.11 in den WCAG 2.2 lässt sich wie folgt übersetzen:

Erfolgskriterium 2.4.11 Fokus nicht verdeckt (Minimum)

(Stufe AA)

Wenn ein Bestandteil der Benutzungsschnittstelle den Tastaturfokus erhält, wird dieser Bestandteil nicht aufgrund vom Autor erstellten Inhalt vollständig verdeckt.

Hinweis: Kann der Inhalt in einer konfigurierbaren Schnittstelle vom Benutzer neu positioniert werden, werden nur die Anfangspositionen des vom Benutzer verschiebbaren Inhalts für die Prüfung und die Konformität dieses Erfolgskriteriums berücksichtigt.

Hinweis: Vom Benutzer geöffneter Inhalt darf den Bestandteil, der den Fokus erhält, verdecken. Kann der Benutzer den fokussierten Bestandteil aufdecken, ohne den Tastaturfokus vorzurücken, gilt der fokussierte Bestandteil nicht als durch einen vom Autor erstellten Inhalt verdeckt.

Das Erfolgskriterium 2.4.12 lässt sich wie folgt übersetzen:

Erfolgskriterium 2.4.12 Fokus nicht verdeckt (Erweitert)

(Stufe AAA)

Wenn ein Bestandteil der Benutzungsschnittstelle den Tastaturfokus erhält, wird kein Teil des Bestandteils durch einen vom Autor erstellten Inhalt verdeckt.

Weiterführende Links

abgelegt in der Kategorie Barrierefreies Webdesign

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert