Die standardmäßige TAB-Reihenfolge, die durch die DOM-Position semantischer HTML-Elemente vorgegeben wird, ist
Es kann aber vorkommen, dass Sie die Tab-Reihenfolge ändern müssen. Umzug
-Elemente im HTML-Code ist ideal, aber möglicherweise nicht realisierbar. In diesen Fällen
kann das HTML-Attribut tabindex verwenden, um den Tab eines Elements explizit festzulegen
.
tabindex kann auf jedes Element angewendet werden, ist aber nicht unbedingt
die für jedes Element nützlich ist, und verwendet einen Bereich von ganzzahligen Werten. Mit
tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen
ein ansonsten nicht fokussierbares Element in die TAB-Reihenfolge einfügen und Elemente entfernen
aus der TAB-Reihenfolge. Beispiel:
tabindex="0": Fügt ein Element in die natürliche TAB-Reihenfolge ein. Das Element kann
wird durch Drücken der Tabulatortaste fokussiert. Das Element lässt sich durch Aufrufen des
ihre focus()-Methode.
tabindex="-1": Entfernt ein Element aus der natürlichen TAB-Reihenfolge, aber das Element
weiterhin durch Aufrufen der focus()-Methode fokussiert werden kann.
tabindex="5": Wenn ein Tabindex größer als 0 ist, wird dieses Element in den Vordergrund gestellt.
der natürlichen TAB-Reihenfolge. Wenn es mehrere Elemente mit einem
als 0, beginnt die TAB-Reihenfolge vom niedrigsten Wert, der größer als null ist
und arbeitet sich nach oben vor.
Dies gilt insbesondere für nicht Input-Elemente wie Überschriften, Bilder oder
Titel. Wenn möglich, sollten Sie den Quellcode so anordnen, dass die DOM-Sequenz eine
logische TAB-Reihenfolge. Falls Sie tabindex verwenden, beschränken Sie es auf benutzerdefinierte interaktive Funktionen.
Steuerelemente wie Schaltflächen, Tabs, Drop-down-Menüs und Textfelder also Elemente,
die Nutzende erwarten könnten.
Füge tabindex nur interaktiven Inhalten hinzu. Auch wenn Inhalte wichtig sind, z. B. ein Schlüsselbild, können Nutzer des Screenreaders sie ohne
fokussiert werden.
Fokus auf Seitenebene verwalten
Manchmal ist tabindex für eine nahtlose Nutzererfahrung erforderlich. Beispiel:
wenn ihr eine ausdrucksstarke einzelne Seite mit unterschiedlichen Inhaltsbereichen erstellst,
alle Inhalte gleichzeitig sichtbar sind. z. B. Navigationslinks
den sichtbaren Inhalt ändern, ohne die Seite aktualisieren zu müssen.
Identifizieren Sie in diesem Fall den ausgewählten Inhaltsbereich und weisen Sie ihm das Attribut tabindex
-1 und rufen Sie die zugehörige focus-Methode auf. Dadurch wird sichergestellt, dass die Inhalte nicht
die natürliche TAB-Reihenfolge. Mit dieser Technik, die als Fokusmanagement bezeichnet wird,
den vom Nutzer wahrgenommenen Kontext synchron mit den visuellen Inhalten der Website.
Fokus in Komponenten verwalten
In einigen Fällen müssen Sie den Fokus auch auf Kontrollebene verwalten, z. B. mit benutzerdefinierten Komponenten.
Das Element select kann beispielsweise einen Grundfokus erhalten, aber einmal
können Sie mithilfe der Pfeiltasten weitere auswählbare Optionen einblenden.
Wenn du ein benutzerdefiniertes select-Element erstellst, ist es wichtig, dieses zu replizieren.
sodass Tastaturnutzer weiterhin mit Ihrem Steuerelement interagieren können.
Es kann schwierig sein, zu wissen, welche Tastaturfunktionen zu implementieren sind. Die Accessible Rich Internet Applications (ARIA) Authoring Best Practices enthält die Komponententypen und die unterstützten Tastaturaktionen.
Vielleicht arbeiten Sie an benutzerdefinierten Elementen, Sie ähneln einer Reihe von Optionsfeldern, aber mit Ihrer einzigartigen Darstellung und verhalten.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Um herauszufinden, welche Tastaturunterstützung sie benötigen, ARIA-Entwicklungspraktiken . Abschnitt 2 enthält eine Liste von Designmustern, Eigenschaftentabelle für Radio Gruppen, der vorhandenen Komponente, die dem neuen Element am ehesten entspricht.
Eine der häufigsten Tastaturfunktionen, unterstützt werden. Um dieses Verhalten zum neuen Komponente verwenden wir die Technik namens roving tabindex.
Zum Verwenden von „Tabindex“ wird tabindex für alle untergeordneten Elemente mit Ausnahme der
derzeit aktiv ist.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Die Komponente verwendet einen Tastaturereignis-Listener, um festzustellen, welche Taste der
das Drücken der Nutzenden werden die Einstellungen für das zuvor fokussierte
„tabindex“ wird auf „-1“ gesetzt, die tabindex des Kindes, bei dem der Fokus gelegt werden soll, auf „0“ gesetzt und die Methode
mit der Fokusmethode darauf.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Wenn Nutzende den letzten erreichen (oder das erste, je nachdem, in welche Richtung sie Fokus verschieben) – der Fokus wird wieder zum ersten (oder letzten) Element bewegt Kind.
Versuchen Sie es mit dem folgenden Beispiel. Untersuchen Sie das Element im DevTools aus, um zu beobachten, wie sich der Tabindex von einem Optionsfeld zum nächsten bewegt.
Modalen und Tastaturfallen
Es ist empfehlenswert, den Fokus nicht manuell zu steuern, da dies zu komplizierten Situationen führen kann. Ein Widget für die automatische Vervollständigung, das den Fokus verwaltet und das Verhalten des Tabs, hindert den Nutzer jedoch daran, ihn zu verlassen, bis der Vorgang abgeschlossen ist. Dies wird Tastaturfalle genannt und kann für den Nutzer sehr frustrierend sein.
In Paragraf 2.1.2 der WCAG ist festgelegt, dass der Tastaturfokus nie gesperrt oder die an einem bestimmten Seitenelement gebunden sind. Die Nutzenden sollten in der Lage sein, nur mithilfe der Schaltflächen Tastatur.
Die Ausnahme von dieser Regel sind modale Anzeigen. Sie sollten die Verwendung von
tabindex, wenn Sie ein modales Fenster erstellen. Mit inert können Sie
sicherstellen, dass Nutzende nicht versehentlich mit einem Element (eine absichtliche
Tastaturfalle). Verwenden Sie den <dialog>.
das standardmäßig inaktiv ist, um ein modales Element für Nutzer zu erstellen,
Klicks und Tabs außerhalb des modalen Dialogfelds. So können sich die Nutzenden auf
erforderliche Auswahl.