Fokussierte Elemente dürfen nicht von fixierten Headern oder Overlays verdeckt werden

Verdeckt ein fixierter Header, eine Cookie-Leiste oder eine Chat-Blase das Element, zu dem jemand gerade mit der Tastatur gesprungen ist, ist nicht zu sehen, was fokussiert ist, und womöglich wird das Falsche ausgelöst. Auf langen Kategorieseiten kann das bei fast jeder Produktreihe passieren.

Regel-ID
vs-focus-obscured
Quelle
Validiscan-Prüfung
Auswirkung
Schwerwiegend
Korrekturstufe
ASSISTED
auf Shopify, Shopware, WooCommerce und Magento
Status
wird ausgeführt

Was geprüft wird

Erkennt Elemente, die in dem Moment, in dem sie den Tastaturfokus erhalten, vollständig von fixierten (sticky oder fixed) Inhalten wie Headern, Cookie-Leisten oder Chat-Widgets verdeckt sind (2.4.11).

Die Prüfung erfasst bis zu 150 per Tastatur erreichbare Elemente in der Reihenfolge des Dokuments, iframe eingeschlossen. Negative tabindex-Werte und Elemente, die verborgen oder deaktiviert sind oder die Größe null haben, überspringt sie. Jedes erfasste Element fokussiert sie mit einem einfachen Aufruf von focus(). Das scrollt die Seite wie der Tastaturfokus und beachtet scroll-padding. Die Prüfung läuft in jedem gescannten Viewport, standardmäßig 1440 und 390 px breit.

Danach testet sie neun Punkte: die Mitte, die Ecken und die Mitten der Kanten, jeweils bis zu 3 px innerhalb des Randes. Punkte außerhalb des Viewports werden übersprungen. Ein Punkt gilt als verdeckt, wenn das oberste Element an dieser Stelle ein Container mit position: fixed oder position: sticky ist oder in einem solchen liegt, der das fokussierte Element nicht enthält und eine effektive Deckkraft von mindestens 0,1 hat.

Sind alle getesteten Punkte verdeckt, wird das Element zum Befund. Dieser nennt den Container, der die meisten Punkte verdeckt. Ein teilweise verdecktes Element landet bei „zu prüfen“, denn die Prüfung kann nicht erkennen, ob der sichtbare Teil noch zeigt, was den Fokus hat. Aus Ergebnissen „zu prüfen“ macht der Scanner derzeit keine Befunde.

So wird es behoben

Setzen Sie scroll-padding-top (und scroll-padding-bottom) auf die Höhe fixierter Header und Leisten, damit fokussierte Elemente in den sichtbaren Bereich scrollen, halten Sie Chat-Schaltflächen und Cookie-Leisten vom Seiteninhalt fern, und lassen Sie Besucherinnen und Besucher Overlays schließen oder minimieren.

WCAG-Erfolgskriterien

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
WCAG-Kriterium Version 3.2.1 Version 4.1.1
2.4.11 in dieser Version kein Abschnitt 9.2.4.11

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht
Sie senden
die Adresse Ihres Shops
Gescannte Seiten
bis zu 15
Sie erhalten
jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop
nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist
ein vollständiges Audit

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung