Webanimationen mit Drupal: Performance und Barrierefreiheit
Zuletzt aktualisiert: März 2026 · Lesezeit: 4 Minuten
Eine Animation entsteht, wenn Einzelbilder mit mindestens 24 Bildern pro Sekunde abgespielt werden und so eine fluessige Bewegung erzeugen. Im Web funktioniert das Prinzip über CSS-Transitions, JavaScript- Animationen oder das Web Animations API.
Der Einsatzzweck geht weit über Dekoration hinaus: Micro-Interactions geben Nutzern Feedback, Scroll-Animationen lenken den Blick, und animierte Datenvisualisierungen machen komplexe Zusammenhänge greifbar.
Warum Animationen eure Performance gefährden können
Jede Animation kostet Rechenleistung. CSS-Animationen auf transform und opacity sind GPU-beschleunigt und performant. Animationen auf width, height oder top erzwingen Layout- Neuberechnungen und blockieren den Main Thread.
In Drupal-Projekten setzen wir auf drei Prinzipien: Nur GPU-freundliche Properties animieren, Animationen per Intersection Observer erst bei Sichtbarkeit starten, und prefers-reduced-motion konsequent respektieren.
Animationen und Barrierefreiheit
WCAG 2.1 verlangt, dass Nutzer Animationen stoppen, pausieren oder ausblenden können (Erfolgskriterium 2.3.1). Das ist keine optionale Empfehlung, sondern ab Juni 2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Angebote verpflichtend.
Drupal unterstützt das über die Media Query prefers-reduced-motion. Themes und Module, die arocom entwickelt, respektieren diese Einstellung standardmäßig.
Animationen in eurem Drupal-Projekt?
Findet heraus, ob eure Animationen Performance und Barrierefreiheit erfüllen — mit dem Zukunfts-Check.
Welche Animationen sind performant?
CSS-Animationen auf transform und opacity sind GPU-beschleunigt und beeinträchtigen die Core Web Vitals nicht. JavaScript-basierte Animationen auf Layout-Properties wie width oder top sind dagegen teuer und blockieren den Rendering-Prozess.
Unterstützt Drupal prefers-reduced-motion?
Drupal selbst liefert keine Animationen aus. Die Verantwortung liegt beim Theme und den eingesetzten Modulen. arocom achtet in allen Projekten darauf, dass prefers-reduced-motion respektiert wird.
Weiterlesen
- WCAG 2.1 erklärt — Der Accessibility-Standard
- Barrierefreiheit — Unsere Leistungen
- Zukunfts-Check (Audit) — Unabhängige Analyse
Entdeckt einen zufälligen Artikel
Wie steht es um Drupal auf eurer Website? Der Zukunfts-Check zeigt in 2–4 Wochen, wo die größten Hebel liegen.
Drupal Zukunfts-Check
Checkliste: Ist eure Drupal-Installation zukunftsreif? 15 Prüfpunkte.
Kopiert diesen Prompt und fügt ihn in ChatGPT, Claude oder eine andere KI ein — ihr bekommt einen persönlichen Lernplan zu „Webanimationen mit Drupal: Performance first“.
Du bist ein erfahrener Coach für Drupal. Ich möchte das Thema "Webanimationen mit Drupal: Performance first" verstehen u...War dieser Artikel hilfreich?