Marquee for 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. Die marquee-Extension für TYPO3 liefert ein Content-Element, das diesen Effekt über JavaScript rendert. Gosign empfiehlt stattdessen eine rein CSS-basierte Lösung, die ohne Extension, ohne JavaScript und ohne Update-Pflicht auskommt.

Der Unterschied ist messbar: Die Extension lädt JavaScript, registriert ein Content-Element im TCA und braucht Fluid-Templates. 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.

Typical use cases include 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.

Technical architecture der Extension ist ein JavaScript-gesteuertes Content-Element

Die marquee-Extension registriert ein Content-Element im TYPO3-TCA, das Felder für Text, Geschwindigkeit, Richtung und Wiederholung enthält. Das Fluid-Template rendert ein Container-Element, und eine JavaScript-Datei initialisiert die Animation. Die Konfiguration (Geschwindigkeit, Pause bei Hover, Endlos-Wiederholung) wird über data-Attribute am Container-Element an das JavaScript übergeben.

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%); } }

Common problems include 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 Extension bietet eine Pause-bei-Hover-Funktion, aber keinen Stop-Button. Die CSS-Lösung respektiert automatisch die prefers-reduced-motion-Einstellung, was die Extension nicht tut.

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 ausschliesslich im Ticker.

Ein viertes Problem: Barrierefreiheits-Konformität bei öffentlichen Einrichtungen. Das BFSG und die EN 301 549 verlangen, dass Animationen pausierbar und stoppbar sind. Ein Marquee ohne Stopp-Button oder Pause-Mechanismus verstösst 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

Die marquee-Extension hat keine offizielle Unterstützung für TYPO3 v12 oder v13. 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 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 Extension, die für einen Effekt ein komplettes TCA-Feld, ein Fluid-Template und eine JavaScript-Datei mitbringt. Bei Gosign setzen wir den CSS-Ansatz in allen Projekten ein, die einen Ticker oder Lauftext benötigen.