Ab Chrome 124 sind Scroller standardmäßig über die Tastatur fokussierbar, wenn sie keine untergeordneten Elemente haben, die über die Tastatur fokussierbar sind.
Hintergrund
Scroller sind überall. Möglicherweise finden Sie sie im Feld „Nutzungsbedingungen“, wo Sie ganz nach unten scrollen müssen, um auf die Schaltfläche „Senden“ zu klicken. Oder Sie stoßen auf eine vertikale Menüleiste mit vielen Symbolen, aus denen Sie auswählen können.
In solchen Fällen verwenden viele Webnutzer die Aufwärts-/Abwärtsbewegungen ihrer Maus oder ihres Touchpads, um über das Element zu scrollen. Zeigegeräte, Touchpads oder Touchscreens sind jedoch nicht für jeden Nutzer die optimale Methode, um auf einer Seite zu navigieren. Manche Nutzer verwenden lieber die Tastatur, um durch eine HTML-Seite zu navigieren und auf alle fokussierbaren Elemente zuzugreifen. Dies kann verschiedene Gründe haben. Von Personen, die ein Zittern oder andere Probleme haben, die die Bedienung der Maus erschweren, Personen, die Schwierigkeiten bei der optischen Lokalisierung des Mauszeigers haben, oder andere, die einen einzigen Schalter oder eine einzige Sprachsteuerung verwenden.
In den Best Practices für Barrierefreiheit wird empfohlen, dass alle Funktionen über eine Tastatur verfügbar sein müssen. So können alle das Web so nutzen, wie es für sie am besten ist.
2.1.1 Tastatur: Alle Funktionen des Inhalts sind über eine Tastaturoberfläche nutzbar, ohne dass ein bestimmtes Timing für einzelne Tastenanschläge erforderlich ist. Ausgenommen hiervon sind Eingaben, die von der Bewegungspfad des Nutzers und nicht nur von den Endpunkten abhängen. (Konformitätsstufe A)
Vor dieser Änderung: Fokus bei Scrollern
Bisher konnte ein Scroller-Element nur dann auf den Tab fokussiert werden, wenn der Tabindex explizit auf 0 oder höher gesetzt ist. Verwenden Sie beispielsweise den folgenden CSS- und HTML-Code. Versuchen Sie dann, mit der Tabulatortaste von der ersten Schaltfläche zum Scroller-Element zu wechseln.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Bei Verwendung eines negativen tabindex wie im folgenden HTML-Code wird der Scroller übersprungen.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Wenn Sie keinen Wert für „tabindex“ festlegen, kann es für den Nutzer schwierig sein, über die sequenzielle Fokusnavigation auf den Scroller zuzugreifen. Das kann für Nutzer ohne Maus sehr frustrierend sein.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Ein Scroller mit fokussierbaren untergeordneten Elementen, wie im folgenden HTML-Code, kann bereits aufgerufen werden, da die Pfeiltasten das Scrollen ermöglichen, wenn die fokussierbaren untergeordneten Elemente fokussiert sind. In diesem Fall wird die Funktionsweise nicht geändert.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Ab Chrome 124 mit fokussierbaren Scrollern
Mit dieser Funktion können Scroller ohne Wert für „tabindex“ und ohne fokussierbare untergeordnete Elemente über die Tastatur fokussierbar sein. Dadurch können Nutzer, die keine Maus verwenden können, Inhalte mit der Tabulatortaste und den Pfeiltasten auf der Tastatur fokussieren.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Beachten Sie, dass dieses Verhalten nur auftritt, wenn der Scroller keine fokussierbaren untergeordneten Elemente hat. Wenn der Scroller beispielsweise bereits eine Schaltfläche enthält, wird der Scroller durch den Tabfokus übersprungen und der Fokus liegt direkt auf der Schaltfläche. In diesem Fall kann der Scroller-Inhalt bereits mit den Pfeiltasten aufgerufen werden, sobald die Schaltfläche hervorgehoben ist. Aufgrund dieser Regel verhält sich die Standardeinstellung möglicherweise nicht immer optimal, wenn solche untergeordneten Elemente vorhanden sind. Wenn das Scrollerelement selbst in diesem Fall über die Tastatur fokussierbar sein soll, sollte der tabindex-Wert 0 oder höher festgelegt werden.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Mit dieser Funktion können Scroller standardmäßig über die Tastatur aufgerufen werden, was Webnutzern eine reibungslosere Navigation durch Tabs bietet.