Einführung

Der Keyboard-Fokus beschreibt, welches GUI-Element momentan Tastatureingaben entgegennimmt. Standardmäßig sind Steuerelemente wie Buttons und Eingabefelder per Tastatur fokussierbar, statische Elemente wie Absätze und auch div-Elemente hingegen nicht. Es gibt unterschiedliche Möglichkeiten, um die Tastaturnavigation einer Webseite und den aktuellen Fokus zu beeinflussen.

Der Tabindex (HTML5)

Das Wichtigste vorab

• Vermeiden Sie die Verwendung von Tabindex-Werten größer als 0!
• Wenn eine Webpage so groß ist, dass das Fokussieren des ersten interaktiven Elements dazu führen kann, dass der Anfang des Inhalts der Seite nicht mehr angezeigt wird, empfiehlt es sich, ein statisches Element am oberen Rand des Dialogfelds (z. B. den Dialogtitel oder den ersten Absatz) mit tabindex=-1 zu versehen und es nach dem Laden der Seite mit JavaScript zu fokussieren.
• Wenn ein Dialogfeld geöffnet wird, muss der Fokus auf das erste Element im Dialogfeld gesetzt werden (Beispielsweise durch die Verwendung des HTML5 Attributs „autofocus“).

Allgemeines

Das tabindex-Attribut legt fest, dass ein Element fokussiert werden kann. Sein Wert gibt an, ob und an welcher Stelle es an der sequenziellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).

Das Attribut akzeptiert einen Integer als Wert. Es kann für alle Arten von HTML-Elementen vergeben werden, was besonders hilfreich ist, wenn man vom Standardverhalten eines Elements abweichen will.

Wert für tabindex	Aufnahme in Tab-Reihenfolge	Fokussierbar mit element.focus()
Kein tabindex	Links und Steuerelemente entsprechend ihrer Reihenfolge im Quelltext	Links und Steuerelemente
0	Elemente werden entsprechend ihrer Reihenfolge im Quelltext in die Tab-Reihenfolge aufgenommen. Sie sind Elementen mit Tabindex > 0 nachgestellt.	Elemente können mit JavaScript fokussiert werden.
-1	Elemente werden nicht in die Tab-Reihenfolge aufgenommen.	Elemente können mit JavaScript fokussiert werden.
1 … 32.767	Elemente werden entsprechend ihrem Wert aufsteigend der Tab-Reihenfolge hinzugefügt. Elemente mit gleichem Tabindex-Wert werden entsprechend ihrer Reihenfolge im Quelltext angesprungen.	Elemente können mit JavaScript fokussiert werden.

Weitere Informationen zum Tab-Index finden Sie hier: https://wiki.selfhtml.org/wiki/HTML/Attribute/tabindex
Weitere Informationen zum Autofokus finden Sie hier: https://wiki.selfhtml.org/wiki/HTML/Attribute/autofocus

ARIA

Die aria-activedescendant Eigenschaft bietet eine alternative Methode zum Kennzeichnen der Auswahl für interaktive Elemente, die mehrere navigierbare Nachkommen enthalten können, z. B. Menüs, Raster und Symbolleisten. Das interaktive Container-Element (z. B. das Menü) erhält dabei den Tastatur-Fokus sowie das Attribut aria-activedescendant mit der ID des „virtuell“ ausgewählten Kindelements (z. B. des gerade gewählten Menüeintrags).
Wichtig: Die Technik zeigt nur einem Screenreader den aktuell aktiven Nachkommen an und hat keinen Einfluss auf die allgemeine Tastaturnavigation; die eigentliche Funktionalität muss per JavaScript implementiert werden. Es sollte immer sichergestellt werden, dass der aktuell aktive Nachkomme sichtbar ist, wenn dieser mit aria-activedescendant angesteuert wird.

Focus (JavaScript)

Die Methode focus() setzt den Cursor bzw. den Fokus auf das betreffende Element. Voraussetzung dafür ist, dass dieses Element fokussierbar ist.

Syntax: attribut = element.focus();

Stand: 09.01.2024