Einscrollbar ist ein grafisches Objekt, das das Scrollen von Inhalten innerhalb eines Ansichtsbereichs steuert.

Beschreibung

Einscrollbar ist ein Bereich, der steuert, welcher Teil des Inhalts eines Viewports derzeit im Rahmen des Viewports sichtbar ist; egal ob der Viewport die vollständige Browsergröße, einiframe oder ein beliebiges Element desBlockformatierungskontextes ist.

Was ist eine Scrollleiste?

Viele Anwendungen bieten native Scrollleisten an, wenn der Inhaltsbereich größer ist als das Anwendungsfenster. Scrollleisten erscheinen im Allgemeinen auf der rechten oder unteren Seite des Ansichtsbereichs. Native Scrollleisten erscheinen als dünne rechteckige Bahnflächen in der Länge des von ihnen kontrollierten Viewports mit einem Stück Benutzeroberfläche, das als Daumen oder Schieber bezeichnet wird und entlang einer Bahn gezogen werden kann, um den zugehörigen Inhalt innerhalb des Viewports zu bewegen. Einige Scrollleisten haben Pfeile an jedem Ende der Bahn, die es ermöglichen, den Viewport um eine kurze Distanz zu scrollen, wenn sie aktiviert werden.

Nehmen wir dieses Dokument als Beispiel: Wenn der Viewport das vollständige Browserfenster ist und der Inhalt größer ist als der Viewport, repräsentiert in den meisten Browsern die Scrollleiste am rechten Rand des Fensters die gesamte Länge der Seite und der Scroll-Daumen repräsentiert den Teil des Seiteninhalts, der sich gerade im Viewport befindet.

Scrollleisten können auch auf Viewports erscheinen, die Unterabschnitte des vollständigen Browserfensters sind. Wenn dieser Inhalt beispielsweise in einem<iframe> oder<object> eingebettet ist, ist die native vertikale Scrollleiste so hoch wie der Rahmen. Eine Scrollleiste ist im Allgemeinen so lang wie der Viewport, muss es aber nicht unbedingt sein.

Wenn Sie derzeit keine Scrollleiste sehen, kann das daran liegen, dass Ihr Browser die Scrollleiste nur beim Scrollen anzeigt oder nur, wenn der Inhalt eines Elements zu groß ist, um in den Block-Formatierungskontext zu passen. Abhängig vom Browser und Betriebssystem können Scrollleisten sichtbar gemacht werden, selbst wenn der Inhalt im Viewport passt und kein Scrollen erforderlich oder möglich ist.

ARIAscrollbar

Es ist immer am besten, native Scrollleisten zu verwenden. Sie können die CSS-Eigenschaftoverflow verwenden, um das Erscheinen nativer Scrollleisten sicherzustellen. EineCSS-Scrollleisten-Spezifikation wird derzeit entwickelt. Einige Browser erlauben dasStyling von Scrollleisten über präfixierte Pseudoelemente.

Da das Styling nativer Scrollleisten historisch begrenzt war, könnten Sie auf eine in JavaScript implementierte Scrollleiste stoßen, die Sie unterstützen und vollständig zugänglich machen müssen. Dafür können Sie diescrollbar-Rolle verwenden, um unterstützende Technologien darüber zu informieren, dass ein UI-Steuerelement eine interaktive Scrollleiste ist.

Ein Element mit der Rollescrollbar ist ein grafisches Objekt, das das Scrollen von Inhalten innerhalb eines Ansichtsbereichs steuert; es ist die ARIA-Rolle, die angibt, dass ein Element eine Scrollleiste ist. Das HTML-Element, das dem am ähnlichsten ist, ist derrange<input> Typ,<input type="range">.

Dasscrollbar-Element hat zwei erforderliche Attribute:aria-controls undaria-valuenow. Dasaria-controls-Attribut verweist auf dieid des von ihm gesteuerten scrollbaren Bereichs. Diearia-valuenow-Eigenschaft definiert den aktuellen Wert der Scrollleiste.

Währendaria-valuenow immer erforderlich ist, müssen die Eigenschaftenaria-valuemin undaria-valuemax nur für die Rolle der Scrollleiste festgelegt werden, wenn der Mindestwert derscrollbar nicht 0 oder der Höchstwert nicht 100 ist. Der Wert vonaria-valuenow muss immer zwischen den minimalen und maximalen Werten einschließlich liegen, oder zwischen0 und100, wenn die minimalen und maximalen Werte standardmäßig0 und100 sind.aria-valuenow kommuniziert, wie nah der Viewport am unteren Ende des Dokuments ist. Denken Sie daran wie an einen Fortschrittsbalken, bei dem der Anfang des Dokuments der Mindestwert und das Ende des Dokuments der Höchstwert ist.

Einscrollbar repräsentiert den aktuellen Wert und den Bereich möglicher Werte durch die Größe der Scrollleiste und die Position des Daumens im Hinblick auf den sichtbaren Bereich der Orientierung (horizontal oder vertikal), die er steuert. Mit anderen Worten, diescrollbar-Länge (Höhe oder Breite) repräsentiert alle Inhalte innerhalb eines Viewports. Deraria-valuemin-Wert repräsentiert den Beginn des Inhalts und der Scrollleiste, deraria-valuemax-Wert repräsentiert das Ende des Inhalts und das Ende der Scrollleiste. Deraria-valuenow repräsentiert den Inhalt, der derzeit im Viewport sichtbar ist und die aktuelle Position oder den Wert des beweglichen Daumens. Deraria-valuenow-Wert wird im Allgemeinen als Prozentsatz zwischenaria-valuemin undaria-valuemax angezeigt, berechnet durch unterstützende Technologien.

Wie bei einer nativen Scrollleiste interagieren Benutzer direkt oder indirekt mitscrollbar-Elementen unter Verwendung von Maus, Touchpad, Tastatur und Spracheingabe. Implementierungen der Rollescrollbar müssen auch alle diese Interaktionsmethoden unterstützen.

Bei der Verwendung der Maus muss der Benutzer in der Lage sein, diescrollbar durch Klicken auf die Scroll-Pfeile an jedem Ende der Scrollleiste, falls vorhanden, durch Klicken auf einen leeren Teil der Scrollbahn sowie durch Klicken und Ziehen des Scroll-Daumens zu aktivieren.

Die Tastaturnavigation muss ebenfalls unterstützt werden. Wenn sich der Fokus innerhalb des von einerscrollbar kontrollierten Viewports befindet, sollten die TastenPfeil nach oben undPfeil nach unten (oderPfeil nach links undPfeil nach rechts für eine horizontale Scrollleiste) den Scrollbalken-Daumen proportional verschieben. Darüber hinaus müssen die TastenBild auf,Bild ab,Leertaste undUmschalt + Leertaste den Inhalt und den Scroll-Daumen um die Höhe (oder Breite) des Viewports bei jedem Tastendruck verschieben, bis der untere oder obere (oder linke oder rechte) Rand des Inhalts sichtbar wird.

JavaScript muss verwendet werden, um diescrollbar-Aktion in Scrollbefehle zu übersetzen und dem Benutzer Feedback zu geben durch:

1. Visuelles Aktualisieren desscrollbar-Elements,
2. Scrollen des Inhalts des Viewports und
3. Aktualisieren des Wertes deraria-valuenow-Eigenschaft.

Die Standardausrichtung der Rollescrollbar ist vertikal. Das Einfügen vonaria-orientation="vertical" ist in diesem Fall optional. Die Orientierung repräsentiert die Ausrichtung der Scrollleiste und den Bildlaufeffekt auf den durch die Scrollleiste kontrollierten Ansichtsbereich. Wenn das Scrollen von links nach rechts oder von rechts nach links und nicht von oben nach unten erfolgt, verwenden Siearia-orientation="horizontal" auf dem Element mit der Rollescrollbar.

Alle Nachkommen sind präsentational

Es gibt einige Arten von Benutzeroberflächenkomponenten, die bei Darstellung in einer Plattform-Zugänglichkeits-API nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente in einerscrollbar darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rollepresentation auf alle Nachkommenelemente eines jedenscrollbar-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Zum Beispiel, betrachten Sie das folgendescrollbar-Element, das eine Überschrift enthält.

<div role="scrollbar"><h3>Title of my scrollbar</h3></div>

Da Nachkommen vonscrollbar präsentational sind, ist der folgende Code äquivalent:

<div role="scrollbar"><h3 role="presentation">Title of my scrollbar</h3></div>

Aus der Perspektive des Benutzers mit unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codebeispiele dem folgenden imZugänglichkeitsbaum entsprechen:

<div role="scrollbar">Title of my scrollbar</div>

Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften

aria-controls (Erforderlich)

Identifiziert den Viewport über dieid, deren Inhalte durch die Scrollleiste gesteuert werden.

aria-valuenow (Erforderlich)

Auf einen Dezimalwert zwischen0, oderaria-valuemin gesetzt, wenn vorhanden, undaria-valuemax eingestellt, der den aktuellen Wert der Scrollleiste angibt.

aria-valuetext

Unterstützende Technologien geben den Wert vonaria-valuenow oft als Prozentsatz wieder. Wenn dies nicht hilfreich wäre, verwenden Sie diese Eigenschaft, um den Scrollleistenwert den Benutzern verständlicher zu machen.

aria-valuemin

Auf einen Dezimalwert gesetzt, der den Mindestwert repräsentiert und geringer alsaria-valuemax ist. Wenn nicht vorhanden, ist der Standardwert0.

aria-valuemax

Auf einen Dezimalwert gesetzt, der den Maximalwert repräsentiert und größer alsaria-valuemin ist. Wenn nicht vorhanden, ist der Standardwert100.

aria-labelledby

Wenn kein nativer Formularsteuerelement verwendet wird und deshalb die Scrollleiste nicht mit einem<label> verbunden werden kann, wenn sichtbarer Text vorhanden ist, der den erforderlichen zugänglichen Namen liefern kann, auf dieid eines Elements gesetzt, das Text enthält, der als Etikett dient. Andernfalls verwenden Siearia-label.

aria-label

Wenn kein<label> verwendet werden kann und kein sichtbarer Text vorhanden ist, der durcharia-labelledby referenziert werden kann, liefert den Zeichenfolgenwert, der dasscrollbar-Element beschriftet und den erforderlichen zugänglichen Namen bereitstellt.

aria-orientation

Standardmäßig ist die Orientierungvertical. Die Eigenschaft kann hinzugefügt und aufhorizontal,undefined (der Standard für alle Rollen, sofern nicht anders angegeben) odervertical eingestellt werden.

Tastatur-Interaktionen

Pfeil nach oben

Der Inhalt im Viewport bewegt sich um eine Zeile nach oben, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach oben bewegt, bis der obere Rand des Inhalts und der Scrollleiste erreicht ist.

Pfeil nach unten

Der Inhalt im Viewport bewegt sich um eine Zeile nach unten, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach unten bewegt, bis der untere Rand des Inhalts und der Scrollleiste erreicht ist.

Pfeil nach links

Beim horizontalen Scrollen bewegt sich der Inhalt im Viewport um die Breite eines Zeichens nach links, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach links bewegt, bis der linke Rand des Inhalts den linken Rand des Viewport anstößt und der Daumen am linken Ende der Scrollleiste ausgerichtet ist.

Pfeil nach rechts

Beim horizontalen Scrollen bewegt sich der Inhalt im Viewport um die Breite eines Zeichens nach rechts, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach rechts bewegt, bis der rechte Rand des Inhalts den rechten Rand des Viewport anstößt und der Daumen am rechten Ende der Scrollleiste ausgerichtet ist.

Bild auf undUmschalt + Leertaste

Der Inhalt im Viewport bewegt sich um die Höhe eines Viewports nach oben, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach oben bewegt, bis der obere Rand des Inhalts und der Scrollleiste erreicht ist.

Bild ab undLeertaste

Der Inhalt im Viewport bewegt sich um die Höhe eines Viewports nach unten, wobei der Daumen proportional die Scrollbalken-Schiebevorrichtung nach unten bewegt, bis der untere Rand des Inhalts und der Scrollleiste erreicht sind.

Beispiele

Das folgende Beispiel zeigt ein Wort, das wahrscheinlich zu lang für ein Elternelement ist.

<div>Pi</div><div>  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</div><div  role="scrollbar"  aria-labelledby="pi-label"  aria-controls="pi"  aria-orientation="horizontal"  aria-valuenow="0"  aria-valuemin="0"  aria-valuemax="100">  <div></div></div>

Wenn die ARIA-Rollen anstelle nativer UI-Funktionen verwendet werden, muss CSS verwendet werden, um die Scrollleiste und den Daumen zu gestalten, und JavaScript muss verwendet werden, um alle Tastatur- und Zeigereignisse zu verarbeiten.

CSS hätte verwendet werden können, um sicherzustellen, dass der überlaufende Wert von PI eine native Scrollleiste hatte:

<h3>Pi</h3><p tabindex="0" aria-labelledby="PI">  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</p>

.pi {  overflow: auto;  max-width: 100%;}

Das obige CSS bedeutet, dass eine native Scrollleiste erscheint, wenn der Benutzer mit dem Viewport des Absatzes interagiert, wenn die Länge des längsten Wortes im Absatz breiter ist als das umschließende Rechteck des Absatzes. Das Attributtabindex wurde hinzugefügt, damit Personen, die eine Tastatur verwenden, zu dem überlaufenen Inhalt navigieren und darin scrollen können.

Spezifikationen

Siehe auch

• <input type="range">,
• HTML<progress>-Element
• HTML<meter>-Element
• Andere Bereichs-Widgets umfassen:
  • meter
  • slider
  • separator (wenn fokussierbar)
  • progressbar
  • spinbutton
• Documentscroll-Ereignis