Der Fokus ist der Zustand, in dem ein Element die Tastatureingabe entgegennimmt. Genau ein Element einer Seite hat ihn, und jede Eingabe geht an dieses Element.
- Fokus
Der Zustand, in dem ein Element die Tastatureingabe entgegennimmt.
Beispiel: „Der Fokus steht nach dem Laden der Seite am Anfang des Dokuments.“Abgrenzung zum Fokusindikator: Der Fokus ist der Zustand, der Fokusindikator seine sichtbare Darstellung. Ohne Indikator ist der Fokus trotzdem vorhanden, nur eben unsichtbar.
Abgrenzung zum Hover: Der Hover-Zustand folgt dem Mauszeiger und kann an vielen Stellen gleichzeitig entstehen. Der Fokus gehört immer genau einem Element und bleibt dort, bis er weitergegeben wird.
Abgrenzung zur Markierung: Markierter Text lässt sich kopieren, nimmt aber keine Eingabe entgegen. Beides kann gleichzeitig bestehen und wird oft verwechselt.
Was den Fokus bekommen kann
Von Haus aus alles, was bedient wird: Verweise mit Ziel, Schaltflächen, Eingabefelder, Auswahllisten, Textbereiche. Andere Elemente lassen sich mit einem Attribut dazu bringen, und dabei entscheidet der Wert über die Art.
<!-- nimmt den Fokus in der normalen Reihenfolge auf -->
<div tabindex="0">eigenes Bedienelement</div>
<!-- nur programmatisch fokussierbar, nicht per Tabulator -->
<div tabindex="-1">Ziel eines Sprungs</div>Warum er nie verloren gehen darf
Zwei Kriterien sichern das ab. 2.1.2 „No Keyboard Trap“ verlangt auf Stufe A, dass sich der Fokus von jedem Element, das ihn bekommen kann, mit der Tastatur auch wieder wegbewegen lässt; braucht es dafür mehr als Tabulator und Pfeiltasten, muss der Weg angesagt werden.
Neu in der Fassung 2.2 ist 2.4.11 auf Stufe AA: Das fokussierte Element darf durch Inhalte der Seite nicht vollständig verdeckt werden. Das Wort vollständig ist dabei genau gemeint, denn teilweise verdeckt ist auf dieser Stufe noch erlaubt.
Wo er im Projekt auffällt
An fixierten Kopfzeilen. Wer sich mit dem Tabulator durch eine lange Seite bewegt, landet irgendwann auf einem Element, das die Kopfzeile gerade überdeckt, und sieht nicht mehr, wo er ist. Dasselbe gilt für Leisten am unteren Rand und für Chat-Fenster.
Aus unserer Arbeit an über 2.500 Website-Projekten hilft dagegen ein kurzer Zusatz im Stylesheet, der beim Springen zu einem Anker genug Abstand nach oben lässt. Das kostet eine Zeile und löst den häufigsten Fall.