ARIA: Rolle scrollbar

Beschreibung

Eine scrollbar ist ein Bereich, der steuert, welcher Teil des Inhalts eines Ansichtsbereichs derzeit im Rahmen des Ansichtsbereichs sichtbar ist; unabhängig davon, ob der Ansichtsbereich die volle Browsergröße, ein iframe oder ein beliebiges Element im Blockformatierungskontext ist.

Was ist eine Scrollleiste?

Viele Anwendungen bieten native Scrollleisten, wenn der Inhaltsbereich größer ist als das Anwendungsfenster. Scrollleisten erscheinen in der Regel rechts oder unten im Anzeigebereich. Native Scrollleisten erscheinen als dünne rechteckige Bahnflächen in der Länge des gesteuerten Ansichtsbereichs mit einem UI-Element, das als Daumen oder Schieber bezeichnet wird und entlang einer Bahn gezogen werden kann, um den zugehörigen Inhalt innerhalb des Ansichtsbereichs zu bewegen. Einige Scrollleisten haben Pfeile an jedem Ende der Bahn, die beim Aktivieren den Ansichtsbereich über eine kurze Distanz scrollen lassen.

Nehmen Sie dieses Dokument als Beispiel: Wenn der Ansichtsbereich das gesamte Browserfenster ist und der Inhalt höher als der Ansichtsbereich ist, repräsentiert in den meisten Browsern die Scrollleiste am rechten Rand des Fensters die Gesamtlänge der Seite und der Bildlauf-Daumen repräsentiert den Teil des Seiteninhalts, der derzeit im Ansichtsbereich ist.

Scrollleisten können auch in Ansichtsbereichen erscheinen, die Unterabschnitte des gesamten Browserfensters sind. In Fortführung dieses Inhalts als Beispiel, wenn dieser Inhalt in ein <iframe> oder <object> eingebettet ist, wird die native vertikale Scrollleiste die Höhe des Rahmens haben. Eine Scrollleiste ist in der Regel die Länge des Ansichtsbereichs, muss es jedoch nicht zwingend sein.

Wenn Sie derzeit keine Scrollleiste sehen, kann dies daran liegen, dass Ihr Browser die Scrollleiste nur beim Scrollen oder nur dann anzeigt, wenn der Inhalt eines Elements zu groß ist, um in seinen Blockformatierungskontext zu passen. Abhängig von Browser und Betriebssystem können Scrollleisten so eingestellt werden, dass sie auch dann sichtbar sind, wenn der Inhalt in den Ansichtsbereich passt und kein Scrollen erforderlich oder gar möglich ist.

ARIA-scrollbar

Es ist immer am besten, native Scrollleisten zu verwenden. Sie können die CSS-Eigenschaft overflow verwenden, um das Erscheinungsbild der nativen Scrollleisten sicherzustellen. Eine CSS-Spezifikation für Scrollleisten wird entwickelt. Einige Browser erlauben das Styling von Scrollleisten über vorangestellte Pseudo-Elemente.

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

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

Das scrollbar-Element hat zwei erforderliche Attribute: aria-controls und aria-valuenow. Das aria-controls-Attribut verweist auf die id des steuerbaren Scrollbereichs. Die Eigenschaft aria-valuenow definiert den aktuellen Wert der Scrollleiste.

Während aria-valuenow immer erforderlich ist, müssen die Eigenschaften aria-valuemin und aria-valuemax nur für die Rolle scrollbar gesetzt werden, wenn der Mindestwert der scrollbar nicht 0 oder der Maximalwert nicht 100 ist. Der Wert von aria-valuenow muss immer zwischen den eingeschlossenen Mindest- und Maximalwerten liegen oder zwischen 0 und 100 eingeschlossen, wenn die Mindest- und Maximalwerte standardmäßig auf 0 und 100 gesetzt sind. aria-valuenow kommuniziert, wie nah der Ansichtsbereich dem Ende des Dokuments ist. Man kann es sich wie eine Fortschrittsleiste vorstellen, bei der der Anfang des Dokuments der Mindestwert und das Ende des Dokuments der Maximalwert ist.

Eine scrollbar stellt den aktuellen Wert und die Bandbreite der möglichen Werte durch die Größe der Scrollleiste und die Position des Daumens in Bezug auf den sichtbaren Bereich der gesteuerten Orientierung (horizontal oder vertikal) dar. Mit anderen Worten, die Länge der scrollbar (Höhe oder Breite) repräsentiert alle Inhalte innerhalb eines Ansichtsbereichs. Der aria-valuemin-Wert repräsentiert den Anfang des Inhalts und der Scrollleiste, der aria-valuemax-Wert repräsentiert das Ende des Inhalts und das Ende der Scrollleiste. Der aria-valuenow repräsentiert den derzeit im Ansichtsbereich sichtbaren Inhalt und die aktuelle Position oder den Wert des beweglichen Daumens. Der aria-valuenow-Wert wird im Allgemeinen als Prozentsatz zwischen aria-valuemin und aria-valuemax durch unterstützende Technologien berechnet.

Wie bei einer nativen Scrollleiste interagieren Benutzer direkt oder indirekt mit scrollbar-Elementen über Maus, Touchpad, Tastatur und Spracheingaben. Implementierungen der Rolle scrollbar müssen auch all diese Interaktionsmethoden unterstützen.

Wenn eine Maus verwendet wird, muss der Benutzer die scrollbar aktivieren können, indem er die Bildlaufpfeile an jedem Ende der Bildlaufleiste anklickt, wenn vorhanden, einen leeren Teil der Bildlaufspur anklickt sowie den Scroll-Daumen klickt und zieht.

Auch das Scrollen mit der Tastatur muss unterstützt werden. Wenn der Fokus innerhalb des vom scrollbar gesteuerten Ansichtsbereichs liegt, sollten die Tasten Pfeil nach oben und Pfeil nach unten (oder Pfeil nach links und Pfeil nach rechts für eine horizontale Scrollleiste) den Scrollleisten-Daumen proportional bewegen. Darüber hinaus müssen die Tasten Bild aufwärts, Bild abwärts, Leertaste und Umschalt + Leertaste den Inhalt und den Scroll-Daumen der Höhe (oder Breite) des Ansichtsbereichs für jeden Tastendruck bewegen, bis der untere oder obere (oder linke oder rechte) Rand des Inhalts sichtbar ist.

JavaScript muss verwendet werden, um die Aktion der scrollbar in Scrollbefehle zu übersetzen und dem Benutzer Rückmeldungen zu geben durch:

1. Das visuelle Aktualisieren des scrollbar-Elements,
2. Das Scrollen des Inhalts des Ansichtsbereichs, und
3. Das Aktualisieren des aria-valuenow-Eigenschaftswerts.

Die Standardorientierung der Rolle scrollbar ist vertikal. Die Einbeziehung von aria-orientation="vertical" ist in diesem Fall optional. Die Orientierung stellt die Ausrichtung der Scrollleiste und den durch die Scrollleiste gesteuerten Scrolleffekt im Anzeigebereich dar. Wenn das Scrollen von links nach rechts oder von rechts nach links, und nicht von oben nach unten erfolgt, fügen Sie aria-orientation="horizontal" bei dem Element mit der Rolle scrollbar hinzu.

Alle Nachkommen sind präsentational

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Zugangs-API dargestellt werden, nur Text enthalten können. Zugangs-APIs haben keine Möglichkeit, semantische Elemente in einer scrollbar darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines jeden scrollbar-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgende scrollbar-Element, das eine Überschrift enthält.

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

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

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

Aus Sicht des Benutzers unterstützender Technologien existiert die Überschrift nicht, da die vorherigen Codefragmente dem folgenden im Zugänglichkeitsbaum entsprechen:

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

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

aria-controls (Erforderlich)

Identifiziert den Ansichtsbereich über die id, dessen Inhalt von der Scrollleiste gesteuert wird.

aria-valuenow (Erforderlich)

Wird auf einen Dezimalwert zwischen 0 oder aria-valuemin, falls vorhanden, und aria-valuemax gesetzt, der den aktuellen Wert der Scrollleiste angibt.

aria-valuetext

Unterstützende Technologien präsentieren den Wert von aria-valuenow oft als Prozentsatz. Wenn dies nicht hilfreich wäre, verwenden Sie diese Eigenschaft, um den Wert der Scrollleiste für Benutzer verständlicher zu machen.

aria-valuemin

Wird auf einen Dezimalwert gesetzt, der den Mindestwert darstellt und kleiner ist als aria-valuemax. Wenn nicht vorhanden, beträgt der Standardwert 0.

aria-valuemax

Wird auf einen Dezimalwert gesetzt, der den Maximalwert darstellt und größer als aria-valuemin ist. Wenn nicht vorhanden, beträgt der Standardwert 100.

aria-labelledby

Wenn kein natives Formularsteuerungselement verwendet wird und daher die Scrollleiste nicht mit einem <label> verknüpft werden kann, setzen Sie, falls sichtbarer Text verfügbar ist, der den erforderlichen zugänglichen Namen bereitstellen kann, diesen auf die id eines Elements, das als Label dient. Andernfalls verwenden Sie aria-label.

aria-label

Wenn kein <label> verwendet werden kann und kein sichtbarer Text vorhanden ist, der durch aria-labelledby referenziert werden kann, geben Sie den Zeichenfolgenwert an, der das scrollbar-Element benennt und den erforderlichen zugänglichen Namen bereitstellt.

aria-orientation

Standardmäßig ist die Orientierung vertical. Die Eigenschaft kann enthalten und auf horizontal, undefined (der Standard für alle Rollen, sofern nicht anders angegeben) oder vertical gesetzt werden.

Tastaturinteraktionen

Pfeil nach oben

Der Inhalt im Ansichtsbereich bewegt sich um eine Zeile nach oben, wobei der Daumen proportional nach oben über den Bildlaufleisten-Schieber bewegt wird, bis das obere Ende des Inhalts und der Bildlaufleiste erreicht ist.

Pfeil nach unten

Der Inhalt im Ansichtsbereich bewegt sich um eine Zeile nach unten, wobei der Daumen proportional nach unten über den Bildlaufleisten-Schieber bewegt wird, bis das untere Ende des Inhalts und der Bildlaufleiste erreicht ist.

Pfeil nach links

Bei horizontalem Scrollen bewegt sich der Inhalt im Ansichtsbereich um die Breite eines Zeichens nach links, wobei der Daumen proportional nach links über den Bildlaufleisten-Schieber bewegt wird, bis die linke Kante des Inhalts auf das linke Ende des Ansichtsbereichs trifft und der Daumen am linken Ende der Scrollleiste ausgerichtet ist.

Pfeil nach rechts

Bei horizontalem Scrollen bewegt sich der Inhalt im Ansichtsbereich um die Breite eines Zeichens nach rechts, wobei der Daumen proportional nach rechts über den Bildlaufleisten-Schieber bewegt wird, bis die rechte Kante des Inhalts auf das rechte Ende des Ansichtsbereichs trifft und der Daumen am rechten Ende der Scrollleiste ausgerichtet ist.

Bild aufwärts und Umschalt + Leertaste

Der Inhalt im Ansichtsbereich bewegt sich nach oben um die Höhe eines Ansichtsbereichs, wobei der Daumen proportional nach oben über den Bildlaufleisten-Schieber bewegt wird, bis das obere Ende des Inhalts und der Bildlaufleiste erreicht ist.

Bild abwärts und Leertaste

Der Inhalt im Ansichtsbereich bewegt sich nach unten um die Höhe eines Ansichtsbereichs, wobei der Daumen proportional nach unten über den Bildlaufleisten-Schieber bewegt wird, bis das untere Ende des Inhalts und der Bildlaufleiste erreicht ist.

Beispiele

Das folgende ist ein Beispiel für ein Wort, das wahrscheinlich zu lang für ein übergeordnetes Container-Element ist.

<div id="pi-label">Pi</div>
<div id="pi">
  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 id="thumb"></div>
</div>

Wenn anstelle von nativen UI-Funktionen ARIA-Rollen verwendet werden, muss CSS verwendet werden, um die Scrollleiste und den Daumen zu gestalten, und JavaScript muss verwendet werden, um alle Tastatur- und Zeigerereignisse zu behandeln.

CSS könnte verwendet werden, um sicherzustellen, dass der überlaufende Wert von PI eine native Scrollleiste hat:

<h3 id="PI">Pi</h3>
<p class="pi" 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 Ansichtsbereich des Absatzes interagiert, wenn die Länge des längsten Wortes im Absatz breiter als das umgebende Box des Absatzes ist. Das Attribut tabindex wurde hinzugefügt, um es Menschen, die eine Tastatur benutzen, zu ermöglichen, zum überfüllten Inhalt zu navigieren und ihn zu scrollen.

Spezifikationen

Siehe auch

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