ARIA: scrollbar-Rolle

Ein scrollbar ist ein Bereich, der steuert, welcher Teil des Inhalts eines Ansichtsfensters derzeit im Rahmen des Ansichtsfensters sichtbar ist; unabhängig davon, ob das Ansichtsfenster die volle Browsergröße hat, ein iframe oder ein beliebiges Element im Block-Formatierungskontext ist.

Viele Anwendungen bieten native Scrollleisten, wenn der Inhaltsbereich größer als das Anwendungsfenster ist. Scrollleisten erscheinen in der Regel rechts oder unten im Anzeigebereich. Native Scrollleisten erscheinen als dünne rechteckige Bereichsmarkierungen in der Länge des von ihnen gesteuerten Ansichtsfensters mit einem UI-Element namens Daumen oder Scroller, das entlang einer Spur gezogen werden kann, um den zugehörigen Inhalt innerhalb des Ansichtsfensters zu bewegen. Einige Scrollleisten haben Pfeile an jedem Ende der Spur, die das Scrollen des Ansichtsfensters um eine kurze Distanz ermöglichen, wenn sie aktiviert werden.

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

Scrollleisten können auch in Ansichtsfenstern erscheinen, die Unterabschnitte des gesamten Browserfensters sind. Setzen wir dieses Dokument als Beispiel fort: Wenn dieser Inhalt in einem <iframe> oder einem <object> eingebettet ist, wird die native vertikale Scrollleiste die Höhe des Rahmens haben. Eine Scrollleiste hat in der Regel die Länge des Ansichtsfensters, muss dies jedoch nicht zwingend haben.

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

Es ist immer am besten, native Scrollleisten zu verwenden. Sie können die CSS-Eigenschaft overflow verwenden, um das Erscheinen von nativen Scrollleisten sicherzustellen. Eine CSS-Spezifikation für Scrollleisten wird entwickelt. Einige Browser erlauben die Gestaltung von Scrollleisten über prefixierte Pseudoelemente.

Da die Gestaltung von nativen Scrollleisten historisch begrenzt war, könnte Ihnen eine in JavaScript implementierte Scrollleiste begegnen, die Sie unterstützen und vollständig zugänglich machen müssen. Dafür können Sie die Rolle scrollbar verwenden, um Hilfstechnologien mitzuteilen, dass ein UI-Element 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 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 gesteuerten, scrollbaren Bereichs. 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 der Scrollleiste gesetzt werden, wenn der minimale Wert der scrollbar nicht 0 oder der maximale Wert nicht 100 ist. Der Wert von aria-valuenow muss immer zwischen dem minimalen und maximalen Wert liegen, oder zwischen 0 und 100, wenn die minimalen und maximalen Werte standardmäßig 0 und 100 sind. aria-valuenow kommuniziert, wie nah das Ansichtsfenster am unteren Ende des Dokuments ist. Denken Sie daran wie an eine Fortschrittsanzeige, bei der der Anfang des Dokuments der minimale Wert ist und das Ende des Dokuments der maximale Wert.

Eine scrollbar repräsentiert den aktuellen Wert und den Bereich möglicher Werte über die Größe der Scrollleiste und die Position des Daumens im Hinblick auf den sichtbaren Bereich der Orientierung (horizontal oder vertikal), die sie steuert. Mit anderen Worten: Die Länge (Höhe oder Breite) der scrollbar repräsentiert den gesamten Inhalt innerhalb eines Ansichtsfensters. Der Wert aria-valuemin repräsentiert den Anfang des Inhalts und der Scrollleiste, der Wert aria-valuemax repräsentiert das Ende des Inhalts und der Scrollleiste. Der Wert aria-valuenow repräsentiert den Inhalt, der derzeit im Ansichtsfenster sichtbar ist und die aktuelle Position oder den Wert des beweglichen Daumens. Der Wert aria-valuenow wird in der Regel als Prozentsatz zwischen aria-valuemin und aria-valuemax angegeben, berechnet von Hilfstechnologien.

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

Wenn Sie eine Maus verwenden, muss der Benutzer in der Lage sein, die scrollbar zu aktivieren, indem er auf die Bildlauffelder an beiden Enden der Scrollleiste klickt, falls vorhanden, auf einen leeren Teil der Spur klickt sowie den Scroll-Daumen klickt und zieht.

Die Tastaturnavigation muss ebenfalls unterstützt werden. Wenn sich der Fokus innerhalb des durch eine scrollbar gesteuerten Ansichtsfensters befindet, sollten die Tasten Pfeil nach oben und Pfeil nach unten (oder Pfeil nach links und Pfeil nach rechts für eine horizontale Scrollleiste) den Scrollleiste-Daumen proportional bewegen. Zusätzlich müssen die Tasten Bild auf, Bild ab, Leertaste und Umschalt + Leertaste den Inhalt und den Scrollleiste-Daumen um die Höhe (oder Breite) des Ansichtsfensters für jeden Tastendruck verschieben, bis das Ende oder der Anfang (oder links oder rechts) des Inhalts sichtbar ist.

JavaScript muss verwendet werden, um die Aktion der scrollbar in Scroll-Befehle zu übersetzen, und Sie sollten dem Benutzer Feedback geben, indem Sie:

1. Das scrollbar-Element visuell aktualisieren,
2. Den Inhalt des Ansichtsfensters verschieben und
3. Den Wert der Eigenschaft aria-valuenow aktualisieren.

Die Standardausrichtung der scrollbar-Rolle ist vertikal. Das Einschließen von aria-orientation="vertical" ist in diesem Fall optional. Die Orientierung repräsentiert die Ausrichtung der Scrollleiste und den Scrolling-Effekt auf den Anzeigebereich, der durch die Scrollbar gesteuert wird. 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" dem Element mit der scrollbar-Rolle hinzu.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattformzugänglichkeits-API dargestellt werden, nur Text enthalten können. Zugangs-APIs haben keine Möglichkeit, semantische Elemente, die in einer scrollbar enthalten sind, darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines beliebigen 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 von scrollbar 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 von assistiven Technologien existiert die Überschrift nicht, da die vorherigen Code-Snippets dem folgenden im Zugangsbaum entsprechen:

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

aria-controls (Erforderlich)

Identifiziert das Ansichtsfenster über die id, dessen Inhalt durch die Scrollbar gesteuert wird.

aria-valuenow (Erforderlich)

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

aria-valuetext

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

aria-valuemin

Wird auf einen Dezimalwert gesetzt, der den minimalen Wert darstellt, und ist kleiner als aria-valuemax. Wenn nicht vorhanden, ist der Standardwert 0.

aria-valuemax

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

aria-labelledby

Wenn kein nativer Form-Kontroll verwendet wird und daher keine Möglichkeit besteht, die Scrollbar mit einem <label> zu assoziieren, falls sichtbarer Text vorhanden ist, der den erforderlichen zugänglichen Namen bereitstellen kann, setzen Sie ihn auf die id eines Elements, das als Beschriftung dient. Andernfalls verwenden Sie aria-label.

aria-label

Wenn kein <label> verwendet werden kann und kein sichtbarer Text vorhanden ist, der mit aria-labelledby referenziert werden kann, liefert das String-Wert, das das scrollbar-Element etikettiert, den erforderlichen zugänglichen Namen bereitstellt.

aria-orientation

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

Pfeil nach oben

Der Inhalt im Ansichtsfenster bewegt sich um eine Zeile nach oben, und der Daumen bewegt sich proportional nach oben entlang der Scrollleistenführung, bis das obere Ende des Inhalts und der Scrollleiste erreicht ist.

Pfeil nach unten

Der Inhalt im Ansichtsfenster bewegt sich um eine Zeile nach unten, und der Daumen bewegt sich proportional nach unten entlang der Scrollleistenführung, bis das untere Ende des Inhalts und der Scrollleiste erreicht ist.

Pfeil nach links

Bei horizontalem Scrollen bewegt sich der Inhalt im Ansichtsfenster um die Breite eines Zeichens nach links, und der Daumen bewegt sich proportional nach links entlang der Scrollleistenführung, bis der linke Rand des Inhalts an das linke Ende des Ansichtsfensters stößt und der Daumen am linken Ende der Scrollleiste ausgerichtet ist.

Pfeil nach rechts

Bei horizontalem Scrollen bewegt sich der Inhalt im Ansichtsfenster um die Breite eines Zeichens nach rechts, und der Daumen bewegt sich proportional nach rechts entlang der Scrollleistenführung, bis der rechte Rand des Inhalts an das rechte Ende des Ansichtsfensters stößt und der Daumen am rechten Ende der Scrollleiste ausgerichtet ist.

Bild auf und Umschalt + Leertaste

Der Inhalt im Ansichtsfenster bewegt sich um die Höhe eines Ansichtsfensters nach oben, und der Daumen bewegt sich proportional nach oben entlang der Scrollleistenführung, bis das obere Ende des Inhalts und der Scrollleiste erreicht ist.

Bild ab und Leertaste

Der Inhalt im Ansichtsfenster bewegt sich um die Höhe eines Ansichtsfensters nach unten, und der Daumen bewegt sich proportional nach unten entlang der Scrollleistenführung, bis das untere Ende des Inhalts und der Scrollleiste erreicht ist. Das untere oder obere Ende des Inhalts ist sichtbar.

Das Folgende ist ein Beispiel für ein Wort, das wahrscheinlich zu lang für einen übergeordneten Container 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 Sie die ARIA-Rollen anstelle von nativen UI-Funktionen verwenden, muss CSS verwendet werden, um die Scrollleiste und den Daumen zu gestalten, und JavaScript muss verwendet werden, um alle Tastatur- und Zeigereignisse zu verwalten.

CSS könnte verwendet worden sein, um sicherzustellen, dass der überlaufende Wert von PI eine native Scrollleiste hatte:

<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 Ansichtsfenster des Absatzes interagiert, falls die Länge des längsten Wortes im Absatz breiter ist als der enthaltene Kasten des Absatzes. Das tabindex-Attribut wurde hinzugefügt, um Benutzern, die eine Tastatur verwenden, zu ermöglichen, den überfließenden Inhalt zu navigieren und darzustellen.

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