Fokus nicht teilweise verdeckt

Silktide prüft, dass beim Auswählen eines Steuerelements mit der Tastatur kein Teil davon hinter anderen Inhalten wie einem Cookie‑Banner oder einer fixierten Kopfzeile verborgen ist. Schon ein teilweise überdecktes Steuerelement kann Tastaturnutzende darüber im Unklaren lassen, wo sie sich auf der Seite befinden.

Die häufigsten Ursachen sind Elemente, die an einer festen Position bleiben, während die Seite scrollt:

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

Dies ist die strengere -Version (Erfolgskriterium 2.4.12) von Fokus nicht verdeckt auf Stufe AAA: Die -Prüfung meldet nur Steuerelemente, die vollständig verdeckt sind, während diese jede Überdeckung meldet.

Warum das wichtig ist

Personen, die mit der Tastatur navigieren, orientieren sich am -Indikator, um zu wissen, welches Steuerelement fokussiert ist. Wenn ein fokussiertes Steuerelement teilweise unter einem Cookie‑Banner oder einer fixierten Fußzeile verschwindet, kann die Anzeige übersehen werden, die Beschriftung des Steuerelements falsch gelesen werden oder die Orientierung verloren gehen – und ein auf Ihrem Bildschirm nur teilweise verdecktes Steuerelement kann auf einem kleineren vollständig verdeckt sein.

So beheben Sie das

Bevorzugen Sie Inhalte, die mit der Seite mitscrollen, gegenüber Elementen, die darüber fest positioniert sind.
Wo ein festes Banner oder eine Kopfzeile bestehen muss, verwenden Sie die CSS‑Eigenschaften scroll-padding oder scroll-margin, damit fokussierte Elemente daran vorbeiscrollen – siehe WCAG‑Technik C43.
Bei Dialogen und Popups sperren Sie den Fokus, solange sie geöffnet sind, innerhalb des Dialogs, damit nichts dahinter fokussiert werden kann. Die meisten Dialog‑Bibliotheken und das native Element <dialog> übernehmen das für Sie.

Wie Silktide dies testet

Simulation einer Tastaturnutzung, die jedes fokussierbare Element per Tabulator durchläuft – sowohl in der Desktop‑ als auch in der mobilen Ansicht der Seite.
Simulation, dass der Browser jedes fokussierte Element vertikal in die Bildschirmmitte 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 die Fokusanzeige durch sie sichtbar bleibt.
Meldung des Steuerelements, wenn irgendein Teil davon von einem deckenden Element überlagert wird. Wenn Sie nur Stufe AA erfüllen müssen, meldet „Fokus nicht verdeckt“ die vollständig überdeckten Fälle.

Warum wir das Scrollen simulieren

Wie stark ein Browser zwischen Tab‑Drücken scrollt, hängt von der Fenstergröße ab. Daher kann es sein, dass eine fixierte Kopfzeile ein fokussiertes Element auf Bildschirmen, die sich in der Höhe nur um wenige Pixel unterscheiden, unterschiedlich stark verdeckt. Das Testen mit genau einer Fenstergröße würde Probleme melden, die niemand mit einem leicht anderen Fenster reproduzieren könnte.

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 bei exakt einer Fensterhöhe auftreten. Das W3C legt nicht fest, wie dieses Kriterium getestet werden soll.

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 geöffneten Zeit nicht verlassen kann – so verhält sich ein korrekt gebauter Dialog. Ein fehlerhafter Dialog, der zulässt, dass der Fokus hinter ihn entweicht, wird daher möglicherweise nicht gemeldet, es sei denn, er ist beim Laden der Seite geöffnet.

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, kollidieren oft nur bei bestimmten Fensterhöhen. Wenn Sie zu dem Schluss kommen, dass das Element nie nennenswert verdeckt ist, können Sie den Hinweis ignorieren.