Fokussierbare Scroller mit Tastatur

Ab Chrome 130 sind Scroller standardmäßig per Tastatur fokussierbar, wenn keine Tastatur-fokussierbare untergeordnete Elemente.

Hintergrund

Scrollr sind überall. Sie finden sie möglicherweise in den Feld, bis 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. Dafür kann es verschiedene Gründe geben. Von Personen, die Zittern oder andere Probleme, die die Bedienung einer Maus erschweren. Schwierigkeiten haben, den Mauszeiger visuell zu orten, sowie andere, die einen oder Sprachsteuerung verwenden.

In den Best Practices für die Barrierefreiheit wird empfohlen, dass alle Funktionen eine Tastatur verwenden. So kann jeder das Web optimal nutzen. für sie.

2.1.1 Tastatur: Alle Funktionalität 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 Scroller-Element nur auf Tabs fokussiert werden, wenn der Tabindex explizit auf 0 oder höher festgelegt ist. Verwenden Sie beispielsweise die folgenden CSS- und HTML-Elemente. 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 Bildlaufleister ü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, ihn zu verwenden. Sequentielle Fokusnavigation, um 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. In diesem Fall wird das Verhalten 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 130 mit fokussierbaren Scrollern

Diese Funktion ermöglicht Scroller ohne festgesetzten tabindex-Wert 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, wird der Fokus des Tabs überspringen Sie den Scroller und konzentrieren Sie sich direkt auf 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 die Standardeinstellung möglicherweise nicht immer wenn solche untergeordneten Elemente existieren. Wenn Sie möchten, dass das Scroller-Element in dieser Situation per Tastatur fokussierbar sein, wird empfohlen, 0 oder höher ist.

<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>

Dank dieser Funktion können Scroller standardmäßig in allen Fällen per Tastatur zugänglich gemacht werden. So können Web-Nutzende beim Wechseln zwischen auf einer Seite.