FigmaOpenCode

Loader

Synonyme: Ladeanzeige, Loading Indicator, Spinner, Wartekreisel, Spinning Wheel, Loading Spinner
Ähnliche Komponenten: Progress

Kurzbeschreibung

Ein Loader ist ein animiertes, sich drehendes Symbol, das die Nutzenden darauf hinweist, dass ein Inhalt geladen wird.

Beispiel

Code anzeigen

<div class="kern-loader kern-loader--visible" role="status">
<span class="kern-sr-only">Wird geladen...</span>
</div>

Beschreibung

Ein Loader zeigt an, dass ein Lade- oder Rechenprozess im Gange ist. Der Loader ist ein durchgehend animiertes Symbol. Es signalisiert dem Nutzenden, dass die Anfrage bearbeitet wird.

Verwendungsregeln

Verwende einen Loader dann, wenn die zu erwartende Wartezeit nicht genau bekannt ist, sie aber voraussichtlich über einer Sekunde betragen wird. Bei Anwendung wird der Komponente ein transparenter weißer Hintergrund (Farb- und Transparenz-Token in Figma) hinterlegt, so dass der Loader gut sichtbar ist.

Beispiele

• Abrufen neuer oder aktualisierter Suchergebnisse.
• Einloggen in geschützte Bereiche.
• Download von Inhalten.
• Laden von umfangreichen Inhalten, z. B. Videos.

Dos und Don’ts

• Verwende keine Ladeanzeige, wenn die Wartezeit weniger als eine Sekunde beträgt
• Verwende nicht mehrere Loader gleichzeitig

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 2.2.1

Lange Ladezeiten haben Timeout-Warnung

Implementierungsabhängig

WCAG 2.2.2

Loader-Animation ist steuerbar

Implementierungsabhängig

WCAG 2.3.3

Loader-Animation respektiert Nutzer-Präferenzen

Implementierungsabhängig

WCAG 4.1.3

Loader-Updates werden an Screenreader übermittelt

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.1.1

Loader hat aussagekräftige Beschreibung

Bestanden

WCAG 1.3.1

Loader-Status ist programmatisch erkennbar

Bestanden

WCAG 1.4.1

Loader-Zustand wird nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.11

Loader hebt sich mit mindestens 3:1 Kontrast ab