Tabindex

Mit dem tabindex Attribut können wir steuern, ob ein Element fokussierbar ist (wir können damit sogar ein <div> fokussierbar machen).
Der tabindex kann drei Werte annehmen:

• Null
• einen positiven Wert
• einen negativen Wert

Null

Wenn wir einem Element einen tabindex="0" mitgeben, wird das Element fokussierbar, sowohl mit der tab-Taste als auch mit der Maus.

<div tabindex="0">Du kannst mich fokussieren!</div>

Tip

Wenn wir vor das Element, das wir fokussieren wollen, klicken, fokussiert der nächste tab das Element.

Positive Tabindex

Der tabindex-Wert gibt die Reihenfolge der Elemente, durch die getabbt werden kann, vor. Ein Wert von Null befördert das Element in die natürliche Tabreihenfolge, das bedeutet, was auch immer im Element als erstes kommt, wird zuerst fokussiert.

Buttons, Links und Formularfelder verhalten sich so, als ob sie ein tabinde="0" hätten.

Elemente mit einem Tabindex größer als 0 werden zuerst abgearbeitet. Anschließend wird in der Dokumentreihenfolge weitergetabbt.

Caution

Positive Tabindex-Werte sind verwirrend. Wir sollten sie niemals benutzen, außer es gibt einen handfesten Grund.

Negative Tabindex

Ein negativer tabindex-Wert verhindert, dass ein Element mit der Tab-Taste fokussiert wird. (Mit der Maus kann trotzdem fokussiert werden!) Wir verwenden den negativen Tabindex, um ein Element gezielt zu fokussieren. Mehr dazu bei der focus()-Methode. Falls mehrere Elemente nicht fokussierbar sein sollen, ist visibility: hidden die bessere Alternative.

Focusability and the ability to interact

Wenn wir ein Element fokussieren können, sollten wir damit auch interagieren können. Wenn wir es nicht fokussieren können, sollten wir damit nicht interagieren können. Das bedeutet:

1. Wenn wir einen Tabindex von 0 setzen, müssen wir sicherstellen, dass der User sowohl mit Enter als auch mit Space damit interagieren kann. Das geht nicht von selbst, das müssen wir aktiv machen:

const element = documemt.querySelecotr('[tabindex="0"]');

element.addEventListener('keydown', event => {
  const { key } = event;
  if (key === ' ' || key === 'enter') {
    // do sth.
  }
});

2. Wir setzen niemals tabindex="0" auf einen Button, einen Link oder ein Formularfeld. User müssen mit diesen Elementen interagieren können.
   Wenn Buttons oder Formularfelder deaktiviert werden sollen, kann man das mit dem Attribut disabled machen. Deaktiverte Buttons oder Formularfelder können weder mit Maus noch mit Tastatur fokussiert werden.

<button disabled>Disabled Button</button>

3. Wir zeigen bei nicht fokussierbaren Elementen keinen Fokus-Style. Nachdem User nicht mit Elementen mit negativem Tabindex interagieren können, sollten diese Elemente keinen Fokus-Style haben.

[tabindex="-1"] {
  outline: none;
}