Fokusreihenfolge

Silktide findet Elemente, die die Reihenfolge überschreiben, in der sich Tastaturnutzende durch die Seite bewegen. Standardmäßig springt die Tab-Taste durch Links und Formularelemente in der Reihenfolge, in der sie im Code der Seite erscheinen; ein positiver tabindex-Wert erzwingt eine benutzerdefinierte Reihenfolge, was fast immer ein Fehler ist.

<!-- Erzwingt, dass dieses Feld vor allem anderen auf der Seite erreicht wird -->
<input tabindex="1" name="search">

Warum das wichtig ist

Tastaturnutzende erwarten, dass die Tab-Taste sich in einer vorhersehbaren Reihenfolge durch eine Seite bewegt, die dem entspricht, was sie sehen. Ein positiver tabindex kapert diese Reihenfolge: Der Fokus springt zuerst zu den nummerierten Elementen und dann zurück zu allem anderen, was den über die Seite springen lassen kann. Das ist außerdem fragil – das spätere Hinzufügen eines neuen Elements bedeutet, dass alles neu nummeriert werden muss – und es geht häufig kaputt, wenn sich Seiten ändern.

So beheben Sie es

Entfernen Sie positive tabindex-Werte und lassen Sie die natürliche Reihenfolge des die Tab-Reihenfolge bestimmen.
Wenn die natürliche Reihenfolge verwirrend ist, ordnen Sie die Elemente in Ihrem HTML neu (verwenden Sie CSS für das visuelle Layout), anstatt das Problem mit tabindex zu kaschieren.
Die anderen tabindex-Werte sind in Ordnung und werden nicht beanstandet:
- tabindex="0" macht ein Element an seiner natürlichen Position per Tastatur fokussierbar; nützlich für benutzerdefinierte Steuerelemente.
- tabindex="-1" entfernt ein Element aus der Tab-Navigation; nützlich für Elemente, die per Skript fokussiert werden, z. B. Dialoge.

Wie Silktide dies testet

Es werden alle Elemente auf der Seite mit einem expliziten tabindex-Attribut gefunden.
Jedes Element, dessen tabindex größer als 0 ist, wird als wahrscheinliches Problem markiert, das Sie bestätigen sollten.
Werte von 0 und darunter werden nicht markiert.

Fehlerbehebung

Wir verwenden positive `tabindex`-Werte absichtlich

Selten kann die Reihenfolge im Code einer Seite nicht wirklich ihrer logischen Reihenfolge entsprechen, und positive tabindex-Werte sind die einzige Lösung. Wenn Sie überprüft haben, dass die Tab-Reihenfolge sinnvoll ist, indem Sie die Seite mit der Tab-Taste durchgehen, können Sie den Fund als geprüft markieren.