Marquee für TYPO3

Lauftexte und Ticker-Bänder brauchen keine Extension, CSS löst das in 20 Zeilen

Das Marquee-Element kennt jeder aus den Anfängen des Webs: Scrollender Text, der von rechts nach links über die Seite läuft. Das HTML-<marquee>-Tag ist seit Jahren deprecated, aber der Effekt bleibt gefragt. News-Ticker, Hinweis-Banner (“Wartungsarbeiten am Samstag”) und Event-Ankündigungen nutzen Lauftexte als Aufmerksamkeits-Mechanismus. Eine marquee-Extension für TYPO3 ist weder im TER noch auf Packagist veröffentlicht; was sie mitbringt, lässt sich deshalb nicht prüfen. Gosign empfiehlt stattdessen eine rein CSS-basierte Lösung, die ohne Extension, ohne JavaScript und ohne Update-Pflicht auskommt.

Der Unterschied ist grundsätzlich: Jede Extension ist eine zusätzliche Abhängigkeit, die bei jedem TYPO3-Upgrade mitgezogen werden muss. Die CSS-Alternative ist eine einzige CSS-Animation (20 Zeilen) auf einem normalen Text-Content-Element. Performance, Barrierefreiheit und Wartungsaufwand sprechen klar für den CSS-Ansatz.

Typische Einsatzszenarien sind Wartungshinweise, Aktions-Banner und Sportergebnisse

Das häufigste Szenario ist der Hinweis-Banner auf Unternehmenswebsites. “Unser Büro ist vom 24.12. bis 02.01. geschlossen” oder “Jetzt anmelden: Webinar am 15. März”. Der scrollende Text zieht Aufmerksamkeit auf sich, ohne ein Popup zu sein. Redakteure pflegen den Text im TYPO3-Backend und aktivieren oder deaktivieren den Banner über ein Start- und Enddatum.

Zweites Szenario: News-Ticker auf Nachrichtenportalen und Intranet-Startseiten. Die letzten drei bis fünf Schlagzeilen laufen als Ticker über den oberen Seitenrand. Jede Schlagzeile ist ein Link zur vollständigen Meldung. Die Geschwindigkeit ist so eingestellt, dass der Text lesbar bleibt (empfohlen: 30 bis 50 Pixel pro Sekunde).

Drittes Szenario: Sportergebnisse auf Vereinswebsites. Am Spieltag zeigt ein Ticker die aktuellen Ergebnisse aller Mannschaften. Die Daten kommen aus einer TYPO3-Tabelle oder einem externen Feed und werden als scrollender Text dargestellt. Die Kombination aus Lauftext und automatischer Aktualisierung (per AJAX alle 60 Sekunden) macht den Ticker zum Echtzeit-Informationskanal ohne die Komplexität einer vollständigen Liveticker-Extension.

Technische Architektur der CSS-Alternative kommt ohne Content-Element aus

Eine öffentliche Version der marquee-Extension gibt es weder im TER noch auf Packagist, ihr Aufbau lässt sich also nicht prüfen. Die CSS-Alternative braucht dagegen kein eigenes Content-Element, kein Fluid-Template und kein JavaScript: Geschwindigkeit, Pause bei Hover und Endlos-Wiederholung stecken in der CSS-Animation.

Die CSS-Alternative funktioniert so: Ein normales Text-Content-Element bekommt eine CSS-Klasse (z.B. “marquee”), und die CSS-Animation @keyframes scroll verschiebt den Text von rechts nach links. Die Animation ist endlos, pausiert bei Hover (über :hover) und respektiert die prefers-reduced-motion-Einstellung des Betriebssystems, was für Barrierefreiheit relevant ist. Der gesamte Code:

.marquee { overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 20s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; } }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

Häufige Probleme sind Barrierefreiheit, mobile Darstellung und SEO-Relevanz

Problem eins: Barrierefreiheit. Bewegte Inhalte sind für Menschen mit kognitiven Einschränkungen oder Epilepsie problematisch. Die WCAG 2.1 verlangt, dass Animationen pausierbar, stoppbar oder ausblendbar sind. Die CSS-Lösung pausiert bei Hover und respektiert automatisch die prefers-reduced-motion-Einstellung; einen Stop-Button braucht aber auch sie.

Problem zwei: Mobile Darstellung. Auf Smartphones ist der verfügbare Platz für scrollenden Text minimal. Ein Ticker, der auf dem Desktop gut lesbar ist, rauscht auf dem Handy so schnell vorbei, dass niemand mitlesen kann. Die Lösung: Auf Mobilgeräten den Ticker durch einen statischen Banner ersetzen, der die wichtigste Meldung zeigt, ohne Animation.

Problem drei: SEO-Relevanz. Scrollender Text wird von Suchmaschinen zwar indexiert, aber die UX-Signale (kurze Verweildauer auf dem Ticker, keine Klicks) können sich negativ auf die Seitenqualität auswirken. Ticker-Inhalte sollten immer auch als normale Seiteninhalte verfügbar sein, nicht ausschließlich im Ticker.

Ein viertes Problem: Barrierefreiheits-Konformität bei öffentlichen Einrichtungen. Die BITV 2.0 des Bundes und die Landesgesetze zur EU-Richtlinie 2016/2102 verlangen über die EN 301 549, dass Animationen pausierbar und stoppbar sind. Ein Marquee ohne Stopp-Button oder Pause-Mechanismus verstößt gegen WCAG 2.2.2 (Pause, Stop, Hide). Die CSS-Lösung mit prefers-reduced-motion und :hover-Pause erfüllt diese Anforderung teilweise, ein expliziter Pause-Button wäre für volle Konformität nötig.

Die Extension ist für aktuelle TYPO3-Versionen überflüssig

Eine öffentliche Version der marquee-Extension, die TYPO3 v12 oder v13 unterstützt, gibt es nicht. Da die CSS-Alternative in 15 Minuten implementiert ist und keine Extension-Abhängigkeit erzeugt, empfiehlt Gosign bei jeder Migration den Wechsel. Der Redakteur nutzt ein normales Text-Content-Element mit einer speziellen CSS-Klasse, die im Site-Package definiert ist. Das ist wartungsfrei, performant und, mit einem Pause-Button ergänzt, barrierefrei.

Für Projekte, die mehrere Meldungen im Ticker rotieren lassen wollen, reicht eine erweiterte CSS-Animation, die mehrere Textblöcke nacheinander durchlaufen lässt. Alternativ kann ein minimales JavaScript (unter 20 Zeilen) die Texte aus einer JSON-Quelle nachladen und die Animation steuern. Beides ist architektonisch sauberer als eine eigene Extension für einen einzigen Effekt. Bei Gosign setzen wir den CSS-Ansatz in allen Projekten ein, die einen Ticker oder Lauftext benötigen.