Barrierefreier CSS-Spinner Generator

Was das generierte CSS abdeckt und was nicht

Das Tool liefert den visuellen Teil: einen umrandeten Kreis und eine Drehung. Ein rein visueller Loader hat für unterstützende Technologien keine Bedeutung, weil das Element leer ist. Die Barrierefreiheit entsteht durch das Markup und durch eine zusätzliche CSS-Regel, die Sie darum herum ergänzen.

Markup, das den Status ankündigt

<div class="loader" role="status" aria-label="Ergebnisse werden geladen"></div>

role="status" kennzeichnet das Element als Live-Region, daher kündigen viele Screenreader das Label an, sobald es erscheint. Das aria-label sollte beschreiben, was geladen wird, etwa „Ergebnisse werden geladen“ oder „Wird gespeichert“, und nicht nur ein allgemeines Wort. Entfernen Sie das Element, wenn der Vorgang abgeschlossen ist, und zeigen Sie den neuen Inhalt an.

Sie können auch sichtbaren Text neben dem Ring platzieren. Sichtbarer Text hilft allen, auch Menschen, die die Bewegung schlecht wahrnehmen.

Reduzierte Bewegung berücksichtigen

Manche Besucher aktivieren eine Systemeinstellung, die Websites bittet, Animationen zu begrenzen. Berücksichtigen Sie diese mit einer Media Query, die nach dem generierten CSS steht:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Das verlangsamt die Drehung, statt sie zu entfernen. Der Loader wirkt damit weiterhin aktiv, ohne schnelle Bewegung. Wenn Sie ein statisches Signal bevorzugen, verwenden Sie animation: none; und zeigen Sie den Text „Wird geladen“ neben dem Ring an.

Checkliste für Kontrast und Größe

Grenzen

• Der Generator wählt die Farbe der Spur (#eee) für Sie. Ändern Sie sie im eingefügten CSS, wenn der Seitenhintergrund ähnlich ist.
• Ein sehr kleiner Geschwindigkeitswert lässt den Ring flackern. Vermeiden Sie Werte unter etwa 0,5 Sekunden.
• Verlassen Sie sich bei langen Wartezeiten nicht allein auf den Spinner. Erklären Sie im Text, was gerade passiert.

Schnell testen

Aktivieren Sie die Option für reduzierte Bewegung in Ihrem Betriebssystem und laden Sie die Seite neu: Der Ring sollte sich langsamer drehen. Navigieren Sie danach mit der Tastatur durch die Seite und prüfen Sie, ob der Spinner den Fokus nie vom Steuerelement wegnimmt, das der Besucher gerade nutzt. Schalten Sie zum Schluss einen Screenreader ein und lösen Sie den Ladezustand einmal aus. So hören Sie, ob das Label beim Erscheinen des Elements angekündigt wird und ob der neue Inhalt danach erreichbar ist.