Merge pull request #379 from BIK-BITV/WCAG-2.2

2.4.11 Fokus nicht verdeckt (Minimum): WCAG 2.2 - Neue Prüfschritt-Beschreibung

Author: sweckenmann

Prüfschritte/de/2.4.11 Fokus nicht verdeckt (Minimum).adoc

@@ -0,0 +1,77 @@
+= Prüfschritt 2.4.11 Fokus nicht verdeckt (Minimum)
+include::include/author.adoc[]
+include::include/attributes.adoc[]
+
+== Was wird geprüft?
+Der Tastaturfokus eines Bedienelements darf nicht nicht vollständig von Web-Inhalten (z. B. Dialogen) überlagert sein. Zumindest ein Teil des Bedienelements (und damit in der Regel auch ein Teil des Fokusindikators) muss noch sichtbar sein.
+
+Blenden Nutzende Inhalte durch eine Aktion ein, können diese Inhalte ebenfalls andere Bedienelemente überdecken, wenn diese den Fokus erhalten. Nutzende müssen in der Lage sein, das fokussierte Bedienelement sichtbar zu machen, ohne den Tastaturfokus zu verschieben 
+(z. B. mithilfe der Esc-Taste, um den geöffneten Inhalt zu schließen, mithilfe von Tasten zum Scrollen des Inhalts oder durch das Verwenden einer Taste, um zwischen Überlagerungen zu wechseln).
+
+
+== Wie wird geprüft?
+
+Sehende Menschen mit Mobilitätseinschränkungen sind aufgrund ihrer Nutzungsweisen oft auf Tastaturbedienbarkeit angewiesen. Für Tastatur-Nutzende ist die visuelle Hervorhebung der aktuellen Fokusposition sehr wichtig. Sie ist ebenfalls wichtig für Menschen, 
+die die Schaltersteuerung nutzen und für Menschen mit kognitiven oder ihr Gedächtnis betreffenden Einschränkungen. 
+
+Beim Navigieren auf der Seite darf es daher nicht zu Situationen kommen, in denen Web-Inhalte das fokussierte Element vollständig verdecken. So können etwa fest positionierte Kopf- und Fußzeilen die fokussierten Bedienelemente und deren Fokusindikator überlagern. 
+Andere typische Inhalte, die zu Verdeckung des Fokus führen können, sind nicht-modale Dialoge (zum Beispiel ein nicht-modaler Cookie-Dialog). 
+
+=== 1. Anwendbarkeit des Prüfschritts
+
+Der Prüfschritt ist anwendbar, wenn die Seite interaktive Elemente enthält.
+
+=== 2. Prüfung
+. Seite im Firefox Browser öffnen.
+. Mit der Tabulatortaste vorwärts und rückwärts durch die Seite navigieren und dabei alle Bedienelemente fokussieren.
+. Prüfen, ob es zu Situationen kommt, wo ein mit Tabben fokussiertes Bedienelement vollständig verdeckt wird (zum Beispiel durch einen fest positionierte Kopf- oder Fußbereich, durch einen nicht-modalen Dialog oder andere von Nutzenden eingeblendeten Inhalten). 
+. Wenn aktiv eingeblender Inhalt einen Fokus verdeckt, prüfen, ob der verdeckte Fokus sichtbar gemacht werden kann, ohne den Tastaturfokus zu verschieben, etwa durch
+  * Verwenden der Escape-Taste
+  * Verwenden einer Taste zum Scrollen
+  * Drücken einer Taste zum Hin- und Herwechseln zwischen der Fokusposition und des eingeblendeten Inhalts.
+
+=== 3. Hinweise
+*	Wenn ein Bedienelement bei Fokussierung teilweise (d. h. nicht vollständig) verdeckt wird, also noch Teile der Komponente sichtbar sind, ist das kein Fehler im Sinne dieser Anforderung.
+*	Wenn das Interface so konfigurierbar ist, dass Nutzende Symbolleisten und nicht-modale Dialoge verschieben können, werden nur die Anfangspositionen der von Nutzenden verschiebbaren Inhalte für die Prüfung und Erfüllung dieser Anforderung berücksichtigt.
+*	Cookie-Dialoge werden häufig als *nicht-modale Dialoge* umgesetzt und führen zu Problemen im Sinne des Prüfschritts. Ein Lösungsansatz wäre, den Cookie-Hinweis statt als nicht-modalen Dialog als Teil der Seite umzusetzen. D.h. die Cookie-Meldung verschiebt den Content (statt ihn zu überlagern), solange die Meldung eingeblendet ist.
+*	Die CSS-Attribute `scroll-margin` und `scroll-padding` können verwendet werden, um zu vermeiden, dass Bedienelemente von fest positionierten Bereichen verdeckt werden, wenn sie den Fokus erhalten. Eine der Einschränkungen des Scroll-Margin/Scroll-Padding-Ansatzes ist, dass die genaue Höhe des Sticky-Inhalts bekannt sein muss. Dies ist nicht immer gegeben, etwa dann nicht, wenn sich die Abmessungen des Sticky-Containers je nach der tatsächlichen Höhe des Inhalts ändern können. In solchen Fällen muss möglicherweise auf zusätzliches JavaScript zurückgegriffen werden, um den Wert von `scroll-margin` oder `scroll-padding` dynamisch zu ändern. 
+
+=== 4. Bewertung
+
+==== Nicht erfüllt
+
+Der Tastaturfokus auf einem oder mehreren Bedienelementen wird bei der Navigation durch die Seite durch einen Inhalt vollständig verdeckt.
+
+== Quellen
+
+* https://tetralogical.com/blog/2023/06/08/focus-in-view/[Sticky content: Focus in view, Tetralogical, Joe Lamyman, 2023]
+* https://www.tpgi.com/prevent-focused-elements-from-being-obscured-by-sticky-headers/[Prevent focused elements from being obscured by sticky headers, TPGI, James Edwards, 2022] 
+
+== Einordnung des Prüfschritts
+
+=== Abrenzung zu anderen Prüfschritten
+==== Abgrenzun 9.1.4.13 Eingeblendete Inhalte bedienbar und 9.2.4.11 Fokus nicht verdeckt
+
+Der Prüfschritt "9.1.4.13 Eingeblendete Inhalte bedienbar" stellt verschiedene Anforderungen an Inhalte, die bei **Zeiger- oder Tastaturfokus** eingeblendet werden können und andere Inhalte überlagern.
+
+Bei "9.2.4.11 Fokus nicht verdeckt" geht es um die mögliche, problematische Überlagerung des **Tastaturfokus** durch **Inhalte der Seite**. Beispiele hierfür sind etwa fest positionierte Kopf- oder Fußbereiche. Werden Inhalte, die den Tastaturfokus verdecken (z. B. eine einblendbare Sidebar oder ein nicht-modaler Dialog) von Nutzern **aktiv** aufgerufen, muss es möglich sein, den **verdeckten Fokus** wieder **sichtbar** zu machen, ohne den Tastaturfokus zu verschieben, etwa durch das Schließen der Einblendung über die Escape-Taste oder mithilfe einer Taste zum Hin- und Herwechseln zwischen der Fokusposition und eingeblendeten Inhalt.
+
+=== Einordnung des Prüfschritts nach WCAG 2.2
+
+==== Guidelines
+
+* https://www.w3.org/TR/WCAG22/#navigable[2.4 Navigable]
+
+==== Success criterion
+
+* https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum[2.4.11:Focus Not Obscured (Minimum) (Level AA)]
+
+==== Techniques
+
+===== Sufficient Techniques
+
+* https://www.w3.org/WAI/WCAG22/Techniques/css/C43[C43: Using CSS scroll-padding to un-obscure content]
+
+===== Failures
+
+* https://www.w3.org/WAI/WCAG22/Techniques/failures/F110[F110: Failure of Success Criterion 2.4.12 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements]