Einfache Fußnoten für Webseiten (barrierefrei)

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

Einführung

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.

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.

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>

Der HTML-Code

Der HTML-Code für die Fußnoten besteht aus einem sehr kleinen Stück Code, das den Inhalt der Fußnote umschließt. Er ist identisch für alle Fußnoten. Das bedeutet, Sie können ihn als Code-Schnipsel speichern und immer wieder verwenden.

<span class="footnote"> FOOTNOTE CONTENT HERE </span>
	

Pseudo-Elemente werden verwendet, um vor dem Fußnotentext „(Fußnote:“ und danach „)“ anzuzeigen. So sind die Fußnoten auch sichtbar und klar erkennbar, wenn JavaScript deaktiviert ist. Wenn JavaScript aktiviert ist, werden diese Pseudo-Elemente nicht angezeigt.

In der Regel möchte man kein Leerzeichen zwischen Text und Fußnotenzahl. Damit das so ist, darf es kein Leerzeichen zwischen dem Text und dem <span class="footnote"> geben, mit dem die Fußnote beginnt.

Wenn ich zwei Fußnotenzahlen direkt nacheinander setze, füge ich ein Leerzeichen dazwischen ein. So kann der Leser besser die richtige Fußnote anklicken. Damit dabei kein Zeilenumbruch passiert, verwende ich das geschützte Leerzeichen   zwischen den beiden Fußnoten.

Für den Ort, an dem die Fußnoten stehen, gibt es eine einfache HTML-Zeile. Diese kann ebenfalls als Code-Schnipsel gespeichert werden: Der versteckte Text wird durch ein Pseudo-Element ersetzt. Der sichtbare Inhalt kommt aus dem CSS-Code.

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

Beachten Sie: Es kann mehrere Fußnotengruppen an verschiedenen Stellen auf der Webseite geben. Um das zu ermöglichen, fügen Sie einen eindeutigen Zusatz zur Klasse " footnote " jedes Fußnoten- span ein. Verwenden Sie denselben Zusatz auch im ID-Wert " Footnotes " des Artikels <article> , in dem die Fußnoten stehen sollen.

Beachten Sie: In den oben gezeigten Code-Schnipseln müssen Sie die Zusätze von Hand ergänzen.  Alternativ können Sie auch weitere Code-Schnipsel anlegen, wenn Sie die Methode regelmäßig verwenden.

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.

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.

Sie können Kopien der Demodateien hier herunterladen:

• HTML-Code herunterladen: footnotes-demo.html
• Lade das Basis-CSS herunter: footnotes-demo.css
• Lade das optimierte CSS herunter: footnotes-demo-pretty.css
• Lade den JavaScript-Code herunter: footnotes-demo.js

Verwandte Beiträge