Das tabindexAttribut definiert explizit die Navigationsreihenfolge für fokussierbare Elemente (normalerweise Links und Formularsteuerelemente) innerhalb einer Seite. Es kann auch verwendet werden, um zu definieren, ob Elemente fokussierbar sein sollen oder nicht.
[Beide] tabindex="0"und tabindex="-1"haben eine besondere Bedeutung und bieten unterschiedliche Funktionen in HTML. Der Wert von 0gibt an, dass das Element in der Standardnavigationsreihenfolge platziert werden soll. Auf diese Weise können Elemente, die nicht nativ (wie fokussierbar <div>, <span>und <p>) Tastaturfokus zu erhalten. Natürlich sollte man im Allgemeinen Links und Formularsteuerelemente für alle interaktiven Elemente verwenden, aber dies ermöglicht es anderen Elementen, fokussierbar zu sein und Interaktion auszulösen.
Ein tabindex="-1"Wert entfernt das Element aus dem Standardnavigationsfluss (dh ein Benutzer kann nicht darauf zugreifen), ermöglicht es ihm jedoch, programmgesteuerten Fokus zu erhalten , was bedeutet, dass der Fokus über einen Link oder mit Skripten darauf gesetzt werden kann. ** Dies kann sehr sein Nützlich für Elemente, für die keine Registerkarten erstellt werden sollten, für die jedoch möglicherweise der Fokus festgelegt werden muss .
Ein gutes Beispiel ist ein modales Dialogfenster. Beim Öffnen sollte der Fokus auf den Dialog gelegt werden, damit ein Bildschirmleser mit dem Lesen beginnt und die Tastatur innerhalb des Dialogs navigiert . Da der Dialog (wahrscheinlich nur ein <div>Element) standardmäßig nicht fokussierbar ist, kann durch Zuweisen des Dialogfelds tabindex="-1"der Fokus mit Skripten festgelegt werden, wenn er angezeigt wird.
Ein Wert von -1kann auch in komplexen Widgets und Menüs nützlich sein, die Pfeiltasten oder andere Tastenkombinationen verwenden, um sicherzustellen, dass nur ein Element im Widget mit der Tabulatortaste navigiert werden kann, der Fokus jedoch weiterhin auf andere Komponenten im Widget gelegt werden kann.