Ab Chrome 130 können Scroller standardmäßig mit der Tastatur fokussiert werden, wenn sie keine untergeordneten Elemente haben, die mit der Tastatur fokussiert werden können.
Hintergrund
Scroller sind überall. Möglicherweise finden Sie sie in einem Feld mit den Nutzungsbedingungen, in dem Sie ganz nach unten scrollen müssen, um auf die Schaltfläche „Senden“ zu klicken. Möglicherweise sehen Sie auch eine vertikale Menüleiste mit vielen Symbolen, aus denen Sie auswählen können.
In solchen Fällen verwenden viele Webnutzer die Maus oder das Touchpad, um durch das Element zu scrollen. Ein Zeigegerät, Touchpad oder Touchscreen ist jedoch nicht für jeden Nutzer die optimale Navigation auf einer Seite. Manche Nutzer bevorzugen es, sich auf einer HTML-Seite nur mit der Tastatur zu bewegen und auf jedes fokussierbare Element zuzugreifen. Das kann verschiedene Gründe haben. Nutzer, die ein Zittern oder andere Probleme haben, die die Bedienung der Maus erschweren, Personen, die Schwierigkeiten haben, den Mauszeiger visuell zu finden, und andere, die einen einzelnen Schalter oder eine einzelne Sprachsteuerung verwenden.
Gemäß den Best Practices für Barrierefreiheit müssen alle Funktionen über eine Tastatur zugänglich sein. So kann jeder das Web auf die für ihn am besten geeignete Weise nutzen.
2.1.1 Tastatur: Alle Funktionen des Inhalts können über eine Tastaturschnittstelle bedient werden, ohne dass bestimmte Zeitabstände für einzelne Tastenanschläge erforderlich sind, es sei denn, die zugrunde liegende Funktion erfordert eine Eingabe, die vom Pfad der Nutzerbewegung und nicht nur von den Endpunkten abhängt. (Konformitätsstufe A)
Vor dieser Änderung: Fokus auf Scroller
Vor dieser Änderung konnte ein Scrollerelement nur dann durch die Tabulatortaste fokussiert werden, wenn der Tabindex explizit auf 0 oder höher festgelegt war. Verwenden Sie dazu beispielsweise das folgende CSS und HTML. Versuchen Sie dann, mit der Tabulatortaste von der ersten Schaltfläche zum Scroller-Element zu gelangen.
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>
Wenn Sie einen negativen Tabindex wie im folgenden HTML-Code verwenden, 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 Tabindex-Wert festlegen, kann es für Nutzer schwierig sein, über die sequenzielle Fokusnavigation auf den Scroller zuzugreifen. Das kann für Nutzer, die keine Maus haben, 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, der untergeordnete Elemente enthält, die fokussiert werden können, wie im folgenden HTML-Code, ist bereits barrierefrei, da mit den Pfeiltasten gescrollt werden kann, wenn die fokussierbaren untergeordneten Elemente den Fokus haben. Das Verhalten ändert sich in diesem Fall nicht.
<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 130 mit fokussierbaren Scrollern
Mit dieser Funktion können Scroller ohne festgelegten Tabindex-Wert und ohne untergeordnete fokussierbare Elemente mit der Tastatur fokussiert werden. So können Nutzer, die keine Maus verwenden können oder möchten, 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>
Dieses Verhalten tritt nur auf, wenn der Scroller keine untergeordneten Elemente hat, die fokussiert werden können. Wenn der Scroller beispielsweise bereits eine Schaltfläche enthält, überspringt der Fokus der Tabulatortaste den Scroller und fokussiert direkt die Schaltfläche. In diesem Fall kann der Scroller-Inhalt bereits über die Pfeiltasten aufgerufen werden, sobald die Schaltfläche im Fokus ist. Aufgrund dieser Regel verhält sich das Standardelement möglicherweise nicht immer optimal, wenn solche untergeordneten Elemente vorhanden sind. Wenn Sie möchten, dass das Scrollelement selbst in dieser Situation über die Tastatur fokussiert werden kann, wird empfohlen, einen Tabindex-Wert von 0 oder höher festzulegen.
<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 in allen Fällen über die Tastatur zugänglich gemacht werden. Das erleichtert die Navigation auf Webseiten.