Wofür ist der tabindex = "- 1" im Bootstrap?

100

Wofür ist das tabindexAttribut in Bootstrap 3?

Die Dokumentation sagt nichts über sie aus, obwohl sie praktisch in allen Modalitäten verwendet werden.

Ich habe dies nur in Bezug auf seine Verwendung gefunden, was nicht wirklich viel aussagt

Zugängliche Tooltips für Benutzer von Tastaturen und unterstützenden Technologien

Für Benutzer, die mit einer Tastatur navigieren, und insbesondere für Benutzer unterstützender Technologien, sollten Sie QuickInfos nur zu tastaturfokussierbaren Elementen wie Links, Formularsteuerelementen oder beliebigen Elementen mit dem Attribut tabindex = "0" hinzufügen.

Und ich habe herausgefunden, dass ich nicht drücken kann esc, um ein Modal auszublenden, wenn das tabindexAttribut nicht ist-1 .

twitter-bootstrap twitter-bootstrap-3 bootstrap-modal Alvaro
quelle

Antworten:

158

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.

Quelle: http://webaim.org/techniques/keyboard/tabindex

Aus diesem Grund benötigen Sie tabindex="-1"das Modal <div>, damit Benutzer auf gängige Maus- und Tastaturkürzel zugreifen können. Hoffentlich hilft das.

Kyle Anderson
quelle
1
Das Attribut ist Teil von HTML, es hat nichts speziell mit Bootstrap zu tun.
Lutz Prechelt
8
Ja, genau das wird hier gesagt, dass es sich um eine "eigenständige Funktionalität in HTML" handelt, die nichts mit Bootstrap zu tun hat.
Kyle Anderson
1
Um sich mit JavaScript auf ein <div> konzentrieren zu können, MUSS das tabindex-Attribut für dieses Element definiert werden (alle Werte wie tabindex = -1). Wenn auf dem Div kein Tabindex vorhanden ist, funktioniert die Fokussierung nicht. Aus diesem Grund fügt BS dem modalen Div tabindex = -1 hinzu. Siehe developer.mozilla.org/en-US/docs/Web/Accessibility/… : Wenn tabindex nicht vorhanden ist, folgt das mit JS fokussierbare Element der Plattformkonvention des Elements (ja für Formularsteuerelemente, Links usw.). Dies bedeutet, dass <div> nicht fokussierbar ist, wenn kein Tabindex vorhanden ist.
Kanada Wan
Es lohnt sich hinzuzufügen, dass Elemente mit tabindex = "- 1" auch durch Klicken fokussierbar sind.
Black Mantha
13

Das tabindex- Attribut ist HTML zugeordnet und nicht Bootstrap-spezifisch.

Diese Eigenschaft gibt an, ob ein Element über die Tastaturnavigation erreichbar ist.

Sie müssen nach drei verschiedenen Szenarien Ausschau halten:

  1. Wenn Sie tabindex = "0"einem Element hinzufügen , bedeutet dies, dass es über die Tastaturnavigation erreichbar ist, die Reihenfolge jedoch durch die Reihenfolge der Dokumentquellen definiert wird.

  2. Wenn Sie dem tabindex-Attribut (zum Beispiel ) einen positiven Wert hinzufügen, tabindex = "1", tabindex = "2"sind diese Elemente über die Tastaturnavigation erreichbar, und die Reihenfolge wird durch den Wert des Attributs definiert.

  3. Wenn Sie tabindex (normalerweise ) einen negativen Wert hinzufügen tabindex="-1", bedeutet dies, dass das Element nicht über die Tastaturnavigation erreichbar ist, sondern mithilfe der Fokusfunktion in JS fokussiert werden kann.

Nesha Zoric
quelle