Einfache Fußnoten für Webseiten (barrierefrei)

4 Minuten Lesezeit

Übersetzt und gekürzt von Easy Footnotes for Web Pages (Accessibility friendly) von James R Meyer.

Diese Seite zeigt, wie man Fußnoten in Webseiten auf sehr einfache Weise einfügen kann – so, dass sie einfach einzubauen und zu pflegen sind. Wenn du eine Fußnote bearbeiten, hinzufügen oder löschen willst oder die Position des Verweises im Text ändern möchtest, ist das mit diesem System – insbesondere mit der neuen Version – besonders einfach.

Für alle, die bereits die vorherige Version verwenden: Das Update ist einfach. Siehe Zusammenfassung der Anforderungen für das Update.

Vielleicht möchtest du Fußnoten in deine Webseiten einbauen, aber findest es zu mühsam, die Nummerierung korrekt zu halten. Dann ist diese Seite genau richtig für dich – sie zeigt dir, wie man Fußnoten einfügt, ohne sich um die Nummerierung kümmern zu müssen.

Info

Eine Fußnote ist eine Anmerkung, die am Ende einer Seite nach dem Haupttext eingefügt wird. Sie kann für Leser hilfreich sein, um zusätzliche Informationen bei Bedarf nachzulesen. Traditionell werden Fußnoten durch eine Zahl in eckigen Klammern gekennzeichnet. Diese Seite bezeichnet diese als „Fußnotenverweise“. Die eigentlichen Fußnoten erscheinen am Seitenende in derselben Reihenfolge wie die Verweise im Text.

Siehe auch: Was sind Fußnoten? (plagiarism.org)

Siehe auch Fußnoten-Demo!

Grundkenntnisse in HTML sind notwendig. Die JavaScript-Datei kann direkt verwendet werden. Die CSS-Datei ebenfalls, oder sie kann angepasst werden. Gute Einstiegstutorials findest du z. B. auf W3Schools HTML, CSS und JavaScript.

Das Hauptproblem bei Fußnoten besteht darin, dass sie nummeriert sind. Wird eine Fußnote hinzugefügt oder gelöscht, müssen alle nachfolgenden Nummern angepasst werden – sowohl in den Verweisen als auch in den Fußnoten selbst.

Zusätzlich gibt es bei klickbaren Verweisen zwischen Text und Fußnote mehrere nummerierte IDs und Links (für Hin- und Rückverweise), die traditionell alle manuell gepflegt werden. Das ist fehleranfällig und aufwendig.

Ich habe online nach einer fertigen Lösung gesucht, aber keine passende gefunden. Zwar gibt es Methoden wie bei Footnotes on Web Pages, Web Experience Toolkit oder Accessible Footnotes with CSS, doch sie waren zu kompliziert oder unflexibel.

Deshalb habe ich eine einfache Methode implementiert: Jede Fußnote wird im HTML an der Stelle eingefügt, an der der Verweis erscheinen soll, umgeben von einem <span> mit einer entsprechenden Klasse. JavaScript erledigt dann den Rest: Es erkennt die span-Elemente, versteckt sie, erstellt die Verweise und sammelt die Fußnoten in einem <div>. Es ist keine manuelle Nummerierung nötig – alles wird automatisch erstellt.

Das System unterstützt auch:

Tooltips beim Klick auf Fußnotenverweise
Anzeige am Ende der Seite oder an anderer Stelle
Verschiedene Gruppen von Fußnoten mit eigenem Stil

Dieses Prinzip erinnert an das, was LaTeX für Fußnoten verwendet.

Beispiel für HTML

<span class="footnote">Dies ist eine Fußnote.</span>

Platzhalter für Fußnoten

<article id="Footnotes"></article>

Barrierefreiheit

Das System ist so gestaltet, dass es für Screenreader möglichst zugänglich ist. Zwar gibt es kein ARIA-Protokoll speziell für HTML-Fußnoten, aber jeder Fußnote wird die ARIA-Rolle note zugewiesen.

Verweise im Text enthalten unsichtbaren Text „Footnote“ vor der sichtbaren Zahl, und jede Fußnote enthält ebenfalls vorangestellten, versteckten Text. Das hilft Screenreadern, Kontext zu liefern.

Im Fußnotenbereich gibt es einen versteckten Link, um den Bereich zu überspringen. Jeder Rückverweis zur Textstelle hat versteckten Text „Footnote location“ vor der Nummer.

In früheren Versionen war die Aktivierung per Tastatur (Enter) nicht möglich – das wurde nun ergänzt, um vollständige Tastaturnavigation zu ermöglichen.

Einbindung von JavaScript

<script src="Pfad/zu/footnotes-demo.js"></script>
  <script>document.documentElement.className = 'hasJS';</script>

CSS-Design

Die Fußnoten können nach Belieben gestaltet werden – z. B. kleinere Schrift, Tooltip-Hintergründe, Druckoptimierung. Hier ein Beispiel:

span[class^="footnote"] {
    font-size: 80%;
    position: relative;
    top: -0.4em;
  }

Kompatibilität

Das System wurde in aktuellen Browsern getestet. Auch wenn JavaScript oder CSS deaktiviert sind, bleiben Fußnoten im Klartext sichtbar und korrekt im Text eingebettet.

Du kannst Kopien der Demodateien hier herunterladen:

Anhang: Update-Anleitung für bestehende Nutzer (vor Februar 2025)

Verwende die neue JavaScript-Datei footnotes-demo.js

Füge folgende CSS-Regeln hinzu:

 span[class^="footnote"]::before {
        content: "(Fussnote: "
      }
      span[class^="footnote"]::after {
        content: ")"
      }
      *[id^="Footnotes"]::before {
        content: "Fussnoten: ";
        /* für Screenreader versteckt */
      }

Ersetze vorhandene Fußnoten durch:

<span class="footnote">INHALT DER FUSSNOTE</span>

Letzte Änderung am 18.10.2025