Fokus nicht verdeckt

Silktide prüft, dass ein mit der Tastatur ausgewähltes Bedienelement nicht vollständig hinter anderen Inhalten wie einem Cookie-Banner oder einer fixierten Kopfzeile verborgen ist. Ein Tastaturnutzer, der das ausgewählte Bedienelement nicht sehen kann, weiß nicht, wo er sich auf der Seite befindet.

Die häufigsten Ursachen sind Elemente, die beim Scrollen der Seite an einer Position fixiert bleiben:

Banner am oberen oder unteren Rand der Seite, z. B. Cookie-Hinweise
Fixierte Navigationsleisten und Fußzeilen
Popup-Dialoge, die zulassen, dass der Fokus hinter sie wandert

Diese Prüfung erfasst vollständiges Verdecken, wie auf Stufe AA (Kriterium 2.4.11) gefordert. Die strengere Begleitprüfung auf , Fokus nicht teilweise verdeckt, meldet auch Bedienelemente, die nur teilweise überdeckt sind.

Warum das wichtig ist

Personen, die mit der Tastatur navigieren, folgen dem -Indikator, um zu wissen, auf welchem Bedienelement sie sich befinden. Wenn der Fokus auf ein Bedienelement wechselt, das unter einem Cookie-Banner oder einer fixierten Fußzeile verborgen ist, verschwindet der Indikator: Die Person kann nicht erkennen, was die Eingabetaste bewirken wird oder wo sie sich befindet und verlässt die Seite möglicherweise ganz.

So beheben Sie das Problem

Bevorzugen Sie Inhalte, die mit der Seite scrollen, statt Elemente, die darüber fixiert sind.
Wo ein fixiertes Banner oder eine Kopfzeile nötig ist, verwenden Sie die CSS-Eigenschaften scroll-padding oder scroll-margin, damit fokussierte Elemente daran vorbeiscrollen – siehe WCAG-Technik C43.
Bei Dialogen und Popups schließen Sie den Fokus ein, solange sie geöffnet sind, damit nichts dahinter fokussiert werden kann. Die meisten Dialogbibliotheken und das native <dialog>-Element übernehmen das für Sie.

Wie Silktide das prüft

Simulation eines Tastaturnutzers, der per Tab durch alle fokussierbaren Elemente navigiert – sowohl in der Desktop- als auch in der Mobilansicht der Seite.
Simulation, dass der Browser jedes fokussierte Element vertikal in die Mitte des Bildschirms scrollt (siehe den Hinweis zum Scrollen unten).
Prüfung, ob ein anderes Element über dem fokussierten Element liegt. Überlappende Elemente mit transparentem oder halbtransparentem Hintergrund werden ignoriert, da der Fokusindikator dadurch sichtbar bleibt.
Das Bedienelement wird markiert, wenn es vollständig von einem undurchsichtigen Element bedeckt ist. Teilweise Überlappung wird von dieser Prüfung nicht gemeldet – dafür ist Fokus nicht teilweise verdeckt zuständig.

Warum wir das Scrollen simulieren

Wie weit ein Browser zwischen Tab-Tastendrücken scrollt, hängt von der Fenstergröße ab. Ob eine fixierte Kopfzeile ein fokussiertes Element überdeckt, kann sich daher bereits zwischen Bildschirmen unterscheiden, die nur wenige Pixel in der Höhe auseinanderliegen. Würde nur bei exakt einer Fenstergröße getestet, würden Probleme gemeldet, die niemand mit einer leicht abweichenden Fenstergröße reproduzieren kann.

Stattdessen bewertet Silktide jedes Element so, als wäre es in die Bildschirmmitte gescrollt. Dieser bewusst großzügige Ansatz meldet Probleme, die alle Bildschirmgrößen konsistent betreffen, und vermeidet solche, die nur eine ganz bestimmte Fensterhöhe betreffen. Das W3C legt nicht fest, wie dieses Kriterium zu testen ist.

Dialoge, die nach dem Laden der Seite geöffnet werden

Wenn eine Seite einen Dialog enthält, der standardmäßig geschlossen ist, nimmt Silktide an, dass der Fokus ihn während der Öffnungszeit nicht verlassen kann – so verhält sich ein korrekt implementierter Dialog. Ein fehlerhafter Dialog, der den Fokus hinter sich entkommen lässt, wird daher möglicherweise nicht gemeldet, es sei denn, er ist geöffnet, wenn die Seite lädt.

Fehlerbehebung

Ich kann das fokussierte Element gut sehen

Prüfen Sie in einem kleineren Fenster: Elemente, die von fixierten Kopf- oder Fußzeilen verdeckt werden, überlappen oft nur bei bestimmten Fensterhöhen. Wenn Sie feststellen, dass das Element niemals in bedeutsamer Weise verdeckt ist, können Sie den Fund ignorieren.