Baseline Widely available
Das tabindex globale Attribut ermöglicht es Entwicklern, HTML-Elemente fokussierbar zu machen, sie in die sequenzielle Fokussierung (normalerweise mit der Tab-Taste, daher der Name) einzubeziehen oder auszuschlieÃen und ihre relative Reihenfolge für die sequenzielle Fokusnavigation zu bestimmen.
<p>Click anywhere in this pane, then try tabbing through the elements.</p>
<label>First in tab order:<input type="text" /></label>
<div tabindex="0">Tabbable due to tabindex.</div>
<div>Not tabbable: no tabindex.</div>
<label>Third in tab order:<input type="text" /></label>
p {
font-style: italic;
font-weight: bold;
}
div,
label {
display: block;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
div:focus {
font-weight: bold;
}
Es akzeptiert einen ganzzahligen Wert, wobei je nach Wert unterschiedliche Ergebnisse erzielt werden:
Hinweis: Wenn ein HTML-Element gerendert wird und das tabindex-Attribut mit einem gültigen ganzzahligen Wert gesetzt ist, kann das Element mit JavaScript (durch Aufrufen der focus()-Methode) oder visuell durch einen Mausklick fokussiert werden. Der spezifische tabindex-Wert steuert, ob das Element tabbable ist (d.h. mit der sequenziellen Tastaturnavigation, normalerweise mit der Tab-Taste, erreichbar ist).
Ein negativer Wert (der genaue negative Wert ist eigentlich egal, normalerweise tabindex="-1") bedeutet, dass das Element nicht über die sequenzielle Tastaturnavigation erreichbar ist.
Hinweis: tabindex="-1" kann nützlich für Elemente sein, die nicht direkt mit der Tab-Taste navigiert werden sollen, aber dennoch eine Tastaturfokussierung benötigen. Beispiele sind ein auÃerhalb des Bildschirms befindliches modales Fenster, das fokussiert werden soll, wenn es sichtbar wird, oder eine Fehlermeldung bei der Formularübermittlung, die sofort fokussiert werden soll, wenn ein fehlerhaftes Formular übermittelt wird.
tabindex="0" bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein sollte, nach allen positiven tabindex-Werten. Die Fokusnavigationsreihenfolge dieser Elemente wird durch ihre Reihenfolge im Dokumentquelltext definiert.
Ein positiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, wobei die Reihenfolge durch den Zahlenwert definiert wird. Das heiÃt, tabindex="4" wird vor tabindex="5" und tabindex="0" fokussiert, jedoch nach tabindex="3". Wenn mehrere Elemente denselben positiven tabindex-Wert haben, folgt ihre Reihenfolge relativ zueinander ihrer Position im Dokumentquelltext. Der maximale Wert für tabindex ist 32767.
Wenn das tabindex-Attribut ohne Wert gesetzt ist, wird durch den Benutzeragenten bestimmt, ob das Element fokussierbar ist.
Warnung: Es wird empfohlen, nur 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie die Verwendung von tabindex-Werten gröÃer als 0 und CSS-Eigenschaften, die die Reihenfolge der fokussierbaren HTML-Elemente ändern können (Reihenfolge von Flex-Elementen). Dadurch wird es für Personen, die auf die Tastaturnavigation oder unterstützende Technologien angewiesen sind, schwierig, die Seite zu navigieren und zu bedienen. Schreiben Sie stattdessen das Dokument in einer logischen Reihenfolge der Elemente.
Einige fokussierbare HTML-Elemente haben standardmäÃig einen tabindex-Wert von 0, der vom Benutzeragenten festgelegt wird. Diese Elemente sind ein <a> oder <area> mit href-Attribut, <button>, <frame> Veraltet , <iframe>, <input>, <object>, <select>, <textarea>, und SVG <a>-Element oder ein <summary>-Element, das eine Zusammenfassung für ein <details>-Element darstellt. Entwickler sollten diesen Elementen das tabindex-Attribut nicht hinzufügen, es sei denn, sie ändern das Standardverhalten (zum Beispiel wird durch EinschlieÃen eines negativen Wertes das Element aus der Fokusnavigationsreihenfolge entfernt).
Warnung: Das tabindex-Attribut darf nicht auf dem <dialog>-Element verwendet werden.
Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das interaktiv sein soll, durch Tastatureingaben fokussierbar zu machen. Ein Beispiel hierfür wäre die Verwendung eines <div>-Elements zur Beschreibung eines Buttons anstelle des <button>-Elements.
Interaktive Komponenten, die mit nicht-interaktiven Elementen erstellt wurden, werden nicht im Barrierefreiheit-Baum aufgeführt. Dadurch wird es unterstützenden Technologien unmöglich, auf diese Komponenten zu navigieren und sie zu manipulieren. Der Inhalt sollte semantisch mit interaktiven Elementen beschrieben werden (<a>, <button>, <details>, <input>, <select>, <textarea> usw.). Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, der ansonsten von ARIA verwaltet werden müsste.
HTMLElement.tabIndex, das dieses Attribut widerspiegelttabindex: siehe Don't Use Tabindex Greater than 0 von Adrian RoselliRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4