Wie ignoriere ich ein HTML-Element aus tabindex?

Gibt es in HTML eine Möglichkeit, den Browser anzuweisen, die Tab-Indizierung für bestimmte Elemente nicht zuzulassen?

Auf meiner Seite gibt es zwar eine Nebenschau, die mit jQuery gerendert wird. Wenn Sie diese durchblättern, werden Sie häufig auf die Tabulatoren gedrückt, bevor das Tabulatorsteuerelement zum nächsten sichtbaren Link auf der Seite wechselt, da alle Dinge, durch die die Tabulatoren geführt werden, ausgeblendet sind der Benutzer visuell.

Sie können verwenden tabindex="-1".

Die W3C HTML5-Spezifikation unterstützt negative tabindexWerte:

Wenn der Wert eine negative Ganzzahl ist
Der Benutzeragent muss das tabindex-Fokusflag des Elements setzen, darf jedoch nicht zulassen, dass das Element mithilfe der sequentiellen Fokusnavigation erreicht wird.

Beachten Sie jedoch, dass dies eine HTML5-Funktion ist und möglicherweise nicht mit alten Browsern funktioniert.
Um mit dem W3C HTML 4.01-Standard (ab 1999) kompatibel zu sein, müsste tabindex positiv sein.

Beispielnutzung unten in reinem HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Vergessen Sie nicht, dass diese Eigenschaft tabindexin Javascript / DOM aufgerufen wird , obwohl in den Spezifikationen und im HTML-Code alles in Kleinbuchstaben geschrieben ist tabIndex.

Verlieren Sie nicht den Verstand, um herauszufinden, warum das Aufrufen Ihrer programmgesteuert geänderten Tab-Indizes element.tabindex = -1nicht funktioniert. Verwenden Sie element.tabIndex = -1.

Wenn dies natürlich Elemente in der Tab-Reihenfolge sind, wie Schaltflächen und Anker, ist das Entfernen aus der Tab-Reihenfolge mit tabindex = -1 eine Art Zugänglichkeitsgeruch. Wenn sie doppelte Funktionen bereitstellen, ist es in Ordnung, sie aus der Tabulatorreihenfolge zu entfernen. Fügen Sie diesen Elementen aria-hidden = true hinzu, damit unterstützende Technologien sie ignorieren.

Wenn Sie in einem Browser arbeiten, der dies nicht unterstützt tabindex="-1", können Sie möglicherweise davonkommen, indem Sie nur den Dingen, die übersprungen werden müssen, einen wirklich hohen Tabulatorindex geben . Verschiebt beispielsweise tabindex="500"die Registerkartenreihenfolge des Objekts grundsätzlich an das Ende der Seite.

Ich habe dies für ein langes Dateneingabeformular mit einem Knopf in der Mitte getan. Es ist keine Schaltfläche, auf die die Leute sehr oft klicken, also wollte ich nicht, dass sie versehentlich darauf klicken und die Eingabetaste drücken. disabledwürde nicht funktionieren, weil es ein Knopf ist.

Ein solcher Hack wie "tabIndex = -1" funktioniert bei Chrome v53 nicht.

Dies funktioniert für Chrome und die meisten Browser:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Der Weg, dies zu tun, ist durch Hinzufügen tabindex="-1". Wenn Sie dies einem bestimmten Element hinzufügen, ist es für die Tastaturnavigation nicht mehr erreichbar . Es ist ein großer Artikel hier , die Sie weiter verstehen helfen tabindex .

Fügen Sie einfach das Attribut disabledzum Element hinzu (oder verwenden Sie jQuery, um dies für Sie zu tun). Deaktiviert verhindert, dass der Eingang fokussiert oder überhaupt ausgewählt wird.