Keine positiven tabindex-Werte

Was geprüft

Gezählt werden Elemente mit einem positiven tabindex-Wert (1 oder höher). Unauffällig ist der Punkt, wenn es keine gibt. tabindex="0" und tabindex="-1" sind unbedenklich und werden nicht gezählt. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Niedrig, weil die Elemente erreichbar bleiben. Positive Werte ziehen sie aber in der Tastaturreihenfolge vor alle anderen, unabhängig von ihrer Position auf der Seite.

Warum

Wer mit der Tab-Taste bedient, erwartet die Reihenfolge, in der die Elemente sichtbar sind. Positive tabindex-Werte springen davon ab, und der Fokus wandert scheinbar zufällig über die Seite. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Entfernen Sie positive tabindex-Werte und ordnen Sie die Elemente im HTML in der gewünschten Reihenfolge an. Für Elemente, die zusätzlich fokussierbar sein sollen, genügt tabindex="0".

Nebenwirkung: Nach dem Entfernen ändert sich die Tastaturreihenfolge. Prüfen Sie mit der Tab-Taste, ob alle Bedienelemente in sinnvoller Folge erreichbar sind, besonders in Formularen.

Codebeispiel

HTML

<!-- vorher -->
<input type="text" name="name" tabindex="2">
<input type="email" name="email" tabindex="1">

<!-- nachher: Reihenfolge im HTML bestimmt die Tab-Folge -->
<input type="email" name="email">
<input type="text" name="name">

Weiterführende Quellen

• https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex