Ab Chrome 130 sind Scroller standardmäßig per Tastatur fokussierbar, wenn keine Tastatur-fokussierbare untergeordnete Elemente.
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. Oder Sie kann eine vertikale Menüleiste voller Symbole zur Auswahl angezeigt werden.
In solchen Fällen verwenden viele Web-Nutzende die Aufwärts-/Abwärtsbewegungen ihrer Maus oder Touchpad, um über das Element zu scrollen. Ein Zeigegerät, Touchpad oder Der Touchscreen ist nicht für alle Nutzenden die optimale Navigation auf einer Seite. Einige Personen navigieren Sie lieber über eine HTML-Seite und nutzen Sie dabei alle fokussierbaren Elemente mit nur über ihre Tastatur. Das kann verschiedene Gründe haben. Von Personen, die Zittern oder andere Probleme, die die Bedienung einer Maus erschweren. Schwierigkeiten haben, den Mauszeiger visuell zu orten, sowie andere, die einen einfachen oder 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 über eine Tastaturschnittstelle ohne ein bestimmtes Timing für einzelne Tastenanschläge zu erfordern, es sei denn, der zugrunde liegenden Funktion eine Eingabe erfordert, die vom Pfad des Nutzers abhängig ist, und nicht nur die Endpunkte. (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 Scrollelement 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>
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 sehr frustrierend sein für Nutzer, die keine Mauszugriff haben.
<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>
Beachten Sie, dass ein Scroller mit fokussierbaren untergeordneten Elementen wie im folgenden HTML-Code bereits zugänglich ist, da Sie mit den Pfeiltasten scrollen können, wenn die fokussierbaren Kindern zu helfen. 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 Nutzer scrollen, für die kein tabindex-Wert festgelegt ist. dass sie per Tastatur fokussierbar sind. So können Nutzende, die Sie entscheiden, keine Maus zum Fokussieren von Inhalten mit der Tabulatortaste und dem Pfeil der Tastatur zu verwenden Schlüssel.
<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 über keine fokussierbaren untergeordneten Elemente verfügt. 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 zeigt der Scroller Inhalte können bereits mit den Pfeiltasten aufgerufen werden, sobald die Schaltfläche fokussiert sind. 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 Webnutzern die Navigation auf einer Seite.