2015-10-02 7 views
42

Was ist das tabindex Attribut in Bootstrap 3 für?Was ist der Tabindex = "- 1" im Bootstrap für

Seine Dokumentation sagt nichts über sie aus, obwohl sie sie praktisch in allen Modalitäten verwenden.

Ich habe nur diese im Hinblick auf seine Verwendung finden, das nicht wirklich viel sagen

Accessible Tooltips für Tastatur und unterstützende Technologien Benutzer

Für Benutzer mit einer Tastatur navigieren, und in Bei bestimmten Benutzern assistiver Technologien sollten Sie toolfits nur tastaturfokussierbare Elemente wie Links, Formularsteuerelemente oder beliebige Elemente mit dem Attribut tabindex = "0" hinzufügen.

Und ich fand I can't press esc to hide a modal if the tabindex attribute is not -1 heraus.

Antwort

60

tabindex Das Attribut definiert explizit die Navigationsreihenfolge für fokussierbare Elemente (typischerweise Verbindungen und Form Kontrollen) 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. Ein Wert von 0 gibt an, dass das Element in der Standardnavigationsreihenfolge platziert werden soll. Dadurch können Elemente, die nicht nativ fokussierbar sind (wie <div>, <span> und <p>), den Tastaturfokus erhalten. Natürlich sollte man generell Links und Formular-Steuerelemente für alle interaktiven Elemente verwenden, aber dies erlaubt anderen Elementen, fokussierbar zu sein und eine Interaktion auszulösen.

A tabindex="-1" Wert entfernt das Element aus dem Standard-Navigationsfluss (dh ein Benutzer nicht Tab), aber es ermöglicht es programmatischen Fokus, erhält Fokus Bedeutung, die er von einer Verbindung gesetzt werden kann, oder mit Scripting. ** Dies kann sehr nützlich sein für Elemente, die nicht mit Registerkarten sein sollten, aber die müssen möglicherweise Fokus auf sie gesetzt haben.

Ein gutes Beispiel ein modalen Dialogfenster sind - beim Öffnen Fokus sollte auf den Dialog gesetzt werden, um einen Bildschirmleser Lese beginnen und die Tastatur im Dialog der Navigation beginnen. Da das Dialogfeld (wahrscheinlich nur ein <div>-Element) standardmäßig nicht fokussierbar ist, kann es beim Zuweisen von tabindex="-1" darauf festgelegt werden, dass der Fokus bei der Präsentation mit Skript festgelegt wird.

kann ein Wert von -1 auch in komplexen Widgets und Menüs nützlich sein, die Pfeiltasten oder andere Tastenkombinationen verwenden, um sicherzustellen, dass nur ein Element innerhalb des Widgets mit der Tabulatortaste navigierbar ist, aber immer noch Fokus erlaubt gesetzt werden auf andere Komponenten innerhalb des Widgets.

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

diesem Grund sollten Sie tabindex="-1" auf den Modal <div> müssen, so dass die Benutzer gemeinsame Maus und Tastaturbefehle zugreifen können. Ich hoffe, das hilft.

+0

Das Attribut ist Teil von HTML, es hat nichts speziell mit Bootstrap zu tun. –

+5

Ja, das ist genau das, was hier gesagt wird, dass es eine "eindeutige Funktionalität in HTML" ist und nichts mit Bootstrap zu tun hat. –