Barrierefreie Fußnoten in TYPO3

Eine eigene Extension für Stadtwerke Elbtal

Wer kennt das nicht: Eine Webseite zeigt hochgestellte Ziffern, doch wohin sie führen, bleibt unklar. Für sehende Nutzende ist das lästig. Für Menschen, die auf einen Screenreader angewiesen sind, wird es zum echten Problem.

Genau das war die Ausgangssituation bei unserem Kunden Stadtwerke Elbtal, einem Energieversorger für den Raum Radebeul und Coswig.

Grafik für eine stilisierte Darstellung eines Fußnoten-Modals

Das Problem: Fußnoten ohne Verbindung

Auf der Website der Stadtwerke Elbtal gab es Fußnoten an mehreren Stellen, jedoch ohne klaren Bezug zum jeweiligen Hinweistext. Konkret fehlte jede technische Verknüpfung zwischen der hochgestellten Ziffer und dem dazugehörigen Erklärungstext. Für sehende Nutzende mag das noch überbrückbar sein, sie können scrollen, suchen, kombinieren. Für Screenreader- und kognitiv eingeschränkte Nutzende hingegen war die Situation schlicht unzumutbar: Eine Fußnote taucht auf, aber welcher Hinweis dazu gehört, lässt sich nicht ermitteln. Die Information bleibt verschlossen.

Das Ziel war klar: Wir brauchten eine Lösung, die Fußnoten korrekt auszeichnet, mit Hinweistexten verknüpft, tastaturbedienbar ist und sehbeeinträchtigten Nutzenden eine eindeutige Zuordnung von Zusatzinformationen ermöglicht.

Die Lösung: Eine eigene TYPO3-Extension

Statt auf eine bestehende Lösung zu setzen, entwickelten wir unsere eigene Extension snm_footnotes für TYPO3, welche exakt auf die Anforderungen zugeschnitten ist.

Die Extension stellt eine eindeutige und konsistente Verknüpfung zwischen Fußnote und Hinweistext sicher. Für Screenreader-Nutzende wird ein sr-only-Text ausgespielt, während die sichtbare hochgestellte Zahl und der zugehörige Text mit aria-hidden="true" versehen werden. So gibt es keine Redundanzen, und assistive Technologien erhalten genau die Informationen, die sie brauchen – klar strukturiert und ohne Dopplungen.

Screenshot eines Fußnoten-Modal der Website "Stadtwerke Elbtal"

So funktioniert die Extension im Alltag

Die Redaktion pflegt die Fußnoten zentral in einem Ordner im TYPO3-Backend und kann die Fußnoten sowohl an Überschriften (H1 bis H6) als auch im Fließtext über den Texteditor hinterlegen. Auf der Webseite erfolgt die Ausgabe vollautomatisch chronologisch: Jede Seite beginnt mit Ziffer 1, die Nummerierung läuft fortlaufend durch, unabhängig von der Datenbankreihenfolge.

Bei Klick auf eine Fußnote öffnet sich ein Modal-Dialog mit dem entsprechenden Hinweistext zur Fußnote. Gleichzeitig sind am Ende des Inhaltsbereichs alle auf der Seite vorhandenen Fußnoten inklusive ihrer Texte aufgelistet für maximale Transparenz und Zugänglichkeit.

Beispiel: Fußnote im Abschnitt Preise

Der Weg zur fertigen Extension

Als Ausgangspunkt diente die Open-Source-Extension happy_feet, die Fußnoten aus dem CKEditor ermöglicht. In einem ersten Schritt testeten wir, ob sich happy_feet so erweitern lässt, dass Fußnoten auch aus Überschriften von Inhaltselementen eingefügt werden können.

Das Ergebnis war ernüchternd: Es funktionierte nicht zuverlässig. Hinzu kam, dass happy_feet seit TYPO3 v11 kaum noch weiterentwickelt wurde. Ein Update auf TYPO3 v13 war nicht zu erwarten.

Dennoch war der Test wertvoll: Wir hatten verstanden, wie die Integration der Fußnoten technisch in den CKEditor funktionierte. Auf dieser Grundlage entwickelten wir snm_footnotes als Eigenentwicklung.

Version 1 sammelte Fußnoten aus CKEditor und Inhaltselement-Überschriften und gab sie am Seitenende durchnummeriert aus. Ein Manko blieb: Das Einfügen einer Fußnote im CKEditor war umständlich, da zunächst ein Text verlinkt werden musste, bevor die Fußnote über den Linkbrowser ausgewählt werden konnte.

Version 2 die finale Version löste dieses Problem mit einem dedizierten Fußnoten-Button direkt im CKEditor. Ein Klick genügt und die Fußnote lässt sich gezielt einfügen.

Stolpersteine auf dem Weg

Wer glaubt, die größten Hürden liegen im Konzept, unterschätzt die Tücken der Umsetzung.

Drei Herausforderungen haben uns besonders beschäftigt:

Die korrekte Nummerierung war anspruchsvoller als erwartet. Die Fußnoten dürfen nicht einfach nach ihrer Datenbankreihenfolge nummeriert werden, sie müssen in der Reihenfolge erscheinen, in der sie auf der jeweiligen Seite auftreten, beginnend bei 1.

Der dedizierte Button im CKEditor brachte ein subtiles Problem mit sich: Beim Einfügen einer Fußnote muss die korrekte ID aus der Datenbank ausgespielt werden. Ist kein Text verlinkt, schreibt TYPO3 schlicht den rohen Link in den Editor, was zu fehlerhaften Ausgaben führt. Außerdem musste sichergestellt werden, dass ein Klick auf den Button den richtigen Tab im Linkbrowser öffnet.

Der vielleicht überraschendste Stolperstein: zweistellige Fußnoten-IDs. Unser regulärer Ausdruck zur Erkennung von Fußnoten-IDs hatte zunächst nur einstellige Zahlen berücksichtigt. Sobald die ID in der Datenbank größer als 9 war, stieß die Logik an ihre Grenzen. Eine Anpassung genügte, und am Ende konnte Sandstein^NM alle Stolpersteine aus dem Weg räumen.

Wir unterstützen Sie gern!

Sandstein^NMverfügt über langjährige Erfahrung im Umgang mit TYPO3. Mit unserem Know-how übernehmen wir für Sie Projekte auf Basis von TYPO3, inklusive der Umsetzung barrierefreier Standards. So sorgen wir für einen reibungslosen und zugänglichen Ablauf.