Stellen Sie sicher, dass die Werte des tabindex-Attributs nicht größer als 0 sind

Ein tabindex-Attribut sollte niemals einen Wert größer als 0 haben, um eine unerwartete Tab-Reihenfolge zu verhindern.

Warum es wichtig ist

Ein tabindex-Wert größer als 0 kann die natürliche Tastaturnavigation stören:

• Die Reihenfolge, in der Nutzer mit der Tab-Taste durch die Seite navigieren, kann unintuitiv werden.
• Bestimmte Elemente können übersprungen oder unerwartet fokussiert werden, was die Zugänglichkeit beeinträchtigt.

Behebung des Problems

Es gibt zwei Lösungen, um die Verwendung von tabindex mit einem Wert größer als 0 zu vermeiden.

Die Erste besteht darin, den tabindex auf 0 zu ändern, während die Zweite darin besteht, den tabindex vollständig zu entfernen und die Struktur der Seite so zu ändern, dass ein Benutzer beim Tabben durch die Elemente diese in der erforderlichen Reihenfolge erreicht.

Es besteht auch die Möglichkeit, den tabindex auf tabindex=”-1″ zu ändern und JavaScript hinzuzufügen. Dies entfernt das Element aus der Tab-Reihenfolge, bis JavaScript das „-1“ in eine „0“ ändert.

Unter normalen Bedingungen können nur Links und Formularelemente den Tab-Fokus erhalten. Es ist am besten, keine anderen Elemente (wie <p>, <th>, <span> usw.) zum Tab-Fluss hinzuzufügen. In einigen Fällen kann es jedoch sinnvoll sein, Elemente zum Tab-Fluss hinzuzufügen, die normalerweise keinen Tab-Fokus erhalten würden. Es gibt zwei Möglichkeiten, dies zu erreichen:

1. tabindex=”0″
2. tabindex=”-1″ + JavaScript

Unabhängig von der gewählten Option stellen Sie sicher, dass die resultierende Tab-Reihenfolge einem logischen Muster folgt. Denken Sie daran, dass die Tab-Reihenfolge durch die Reihenfolge der Elemente im DOM bestimmt wird, im Gegensatz zu ihrer visuellen Positionierung. Denken Sie daran, dass die Standard-Tab-Reihenfolge = Quellcode-Reihenfolge = Die Reihenfolge mit deaktivierten Styles ist.

Vorsicht: Die folgenden CSS-Stile können die Reihenfolge ändern, in der Elemente visuell positioniert sind, und somit eine verwirrende Tab-Reihenfolge verursachen:

• position: absolute;
• position: relative;
• float: left;
• float: right;