Empfohlene Praxis Priorität: Schwerwiegend
Die Tastaturreihenfolge wird in eine unerwartete Abfolge gezwungen
Einige Elemente haben einen tabindex-Wert größer als 0, wodurch sie vor allen anderen fokussiert werden, wenn man sich mit der Tab-Taste durch die Seite bewegt. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Tastaturnutzer erwarten, dass sich der Fokus in der Reihenfolge bewegt, die sie auf dem Bildschirm sehen. Mit tabindex über 0 springt der Fokus umher, etwa vom Logo direkt in ein Newsletter-Feld und dann zurück ins Menü. So verlieren Menschen die Orientierung und übersehen womöglich wichtige Felder im Bestellvorgang.
Wen es betrifft
- Tastaturnutzer
- Screenreader-Nutzer
- Menschen mit motorischen Einschränkungen
So beheben Sie es
Ersetzen Sie jedes positive tabindex durch tabindex="0" (damit das Element an seiner natürlichen Stelle fokussierbar ist) oder entfernen Sie es ganz. Wirkt die Reihenfolge danach noch falsch, ändern Sie die Reihenfolge der Elemente im HTML passend zur visuellen Reihenfolge, statt sie mit tabindex zu erzwingen. Verwenden Sie tabindex="-1" nur für Elemente, die per Skript den Fokus erhalten sollen.
Bei Shopify
Stammt meist aus eigenem Code in Theme-Sections oder aus einer App wie einem Pop-up- oder Chat-Widget. Suchen Sie im Theme-Code nach tabindex und korrigieren Sie es in Liquid oder wenden Sie sich an den App-Entwickler.
Bei Shoptet (CZ)
Stammt es aus Ihrem eigenen eingefügten Code oder einem Widget eines Drittanbieters, korrigieren Sie diesen Code; stammt es aus dem Template, wenden Sie sich an Shoptet oder eine Partneragentur.
Bei PrestaShop
Prüfen Sie die .tpl-Dateien des Themes und die Modul-Templates auf tabindex-Werte über 0 und überschreiben Sie Modul-Templates im Theme, statt Module direkt zu bearbeiten.
Bei WooCommerce
Wird oft von Pop-up-, Formular- oder Chat-Plugins oder vom Theme hinzugefügt. Suchen Sie im Quelltext nach tabindex, korrigieren Sie es im Child-Theme oder melden Sie es dem Plugin-Autor.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel tabindex.
dequeuniversity.com, github.com, www.w3.org