HTML/Tutorials/Listen/Fußnoten mit CSS

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Listen
Wechseln zu: Navigation, Suche

Bei Druckerzeugnissen werden Anmerkungen oft aus dem Fließtext in Fußnoten ausgelagert, um den Text flüssig lesbar zu gestalten. Diese Anmerkungen können Legenden, Quellenangaben oder weiterführende Erklärungen enthalten. Nach Din 5008 wird hinter das zu erklärende Wort eine Anmerkungsziffer gesetzt, die auf eine Erklärung am Seitenende verweist.[1]

Auf Webseiten sind Fußnoten eigentlich nicht nötig, da es einerseits keine feste Paginierung (Seiteneinteilung) gibt, sodass auch längere Texte in einem Dokument zusammengefasst werden können und andererseits ein Hyperlink direkt zu einer Anmerkung oder Quelle verweisen kann. Des Weiteren können Sie mit einem Tooltip eine Kurzinfo zur Verfügung stellen.

Trotzdem kann es eine Webseite aufwerten, wenn Sie Fußnoten setzen, die einen seiteninternen Link von der Textstelle zur Fußnote und wieder zurück bieten.

Fußnoten mit CSS

Ziel unseres Anwendungsbeispiels soll es sein, dass auch Benutzer mit Screenreadern die Zusammenhänge zwischen Link und Fußnote erkennen können. Kitty Giraudel stellte 2015 zugängliche Fußnoten mit CSS vor[2], die Screenreadern durch ARIA-Attribute weitere Informationen über die Linkbeziehungen zu den Fußnoten zu geben. Falls ein Text viele Fußnoten, bzw. aria-Labels enthält, verkehrt sich dies jedoch ins Gegenteil, wenn der Textfluss durch das Vorlesen der zahlreichen aria-Hinweise unterbrochen wird.

Was oft vergessen wird: Es gibt nur sehr wenig völlig Blinde, die auf Screenreader angewiesen sind, jedoch viele eingeschränkt Sehende. Für sie wird z. B. bei Buttons eine Mindestgröße von 44 x 44px empfohlen, damit sie noch gut erkenn- und klickbar sind. Fußnoten unterschreiten diesen Wert bei Weitem.

zugängliches Markup

Dieses Beispiel arbeitet mit document structure roles, die „normalen“ HTML-Elementen eine zusätzliche Semantik geben.[3]

zugängliches Markup - Links im Haupttext 
Fußnoten-Stichwort <a href="#fn01" role="doc-noteref">[1]</a>

<footer>
  <h2 id="footnote-label">Fußnoten</h2>
  <ol>
    <li id="fn01" role="doc-footnote">Fußnoteninhalt</li>
    ...
  </ol>
</footer>

Links, die auf Fußnoten verweisen, erhalten ein role-Attribut mit dem Wert doc-noteref. So wird klar, dass es keine externen Links sind.

Auch die Fußnote selbst wird so als role="doc-footnote" ausgezeichnet. Daneben enthält die Fußnoten-Referenz im Haupttext ein href-Attribut auf die entsprechende id der Fußnote.

Der Footer, in dem unsere Fußnoten aufgelistet werden, erhält eine id footnote-label.

Backlinks einrichten

Gerade bei längeren Texten (und besonders für Screenreader-Nutzer) ist es oft schwierig von der Fußnote wieder zurück zur passenden Stelle im Hauptteil zu gelangen. Ein „Back-to-Content“-Link macht dieses Beispiel nun wirklich zugänglich.

Backlink, um in den Haupttext zurückzuspringen ansehen …
Fußnoten-Stichwort <a href="#fn01" id="fnref01" role="doc-noteref">[1]</a>

<footer>
  <h2 id="footnote-label">Fußnoten</h2>
  <ol>
    <li id="fn01" role="doc-footnote">
      Fußnoteninhalt
      <a role="doc-backlink" href="#fnref01">1.</a>
    </li>
    ...
  </ol>
</footer>

Jeder Verweis auf eine Fußnote erhält nun eine id, die zur Kennzeichnung den String fnref- erhält.

Am Ende jeder Fußnote wird nun ein Link angefügt, der als Linktext das Backlink Unicode Icon (↩) enthält. Um den Link genauer zu beschreiben, erhält er zusätzlich ein role="doc-backlink".

Anmerkungsziffern automatisch erstellen

Im obigen Beispiel wurden die einzelnen Fußnoten fest nummeriert – bei einer Änderung im Text müssen unter Umständen alle Nummern händisch geändert werden.

CSS-Counter erlauben das Erstellen und Kontrollieren automatischer Nummerierungen, die sich bei Änderung des Markups dynamisch anpassen. Für jeden Link auf eine Fußnote, der ein role="doc-noteref"-Attribut besitzt, soll nun eine inkrementelle Zahl ermittelt werden, die dann in einem :after-Pseudoelement dargestellt wird.

Das HTML bleibt unverändert, außer, dass bei den Fußnoten-Referenzen der Linktext leer ist.

Anmerkungsziffern mit CSS-Counters erstellen ansehen …
body {
  counter-reset: footnotes;
}

[role="doc-noteref"] {
  counter-increment: footnotes; 
}

[role="doc-noteref"]::after {
  content: '[' counter(footnotes) ']'; 
  vertical-align: super; 
  font-size: smaller; 
}

[role="doc-noteref"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

CSS zählt nun die Fußnoten. Mit counter-reset: footnotes; wird der Zähler auf 0 gesetzt.

[role="doc-noteref"] selektiert nun alle Fußnoten-Referenzen. Bei ihnen wird mit counter-increment die Zählung um 1 erhöht;

[role="doc-noteref"]::after erzeugt nun ein Pseudoelement, das mit content den aktuellen Wert von counter(footnotes) erhält. Es soll hochgestellt dargestellt werden, dies könnte man auch mit dem sup-Element erreichen, was aber zusätzliches Markup bedeuten würde. Deshalb wird hier das Styling von <sup> mit eigenem CSS nachgebildet.

Was sich auf diese Weise leider nicht erreichen lässt, ist ein mehrfacher Verweis auf die gleiche Fußnote. CSS ist ein Layout-Tool, kein Desktop-Publishing System.

Komfort-Version mit JavaScript

Das oben gezeigte Beispiel bietet dem Benutzer Komfort und Zugänglichkeit – für den Entwickler ist das händische Generieren von Fußnoten aufwändig und fehleranfällig.

Die folgende Lösung erlaubt es die Fußnoten direkt im Text zu notieren. Ein Script ersetzt den Text durch den Link zur Fußnote, fügt die Fußnote mit dem Textinhalt und einen Backlink ein.

HTML-Markup

Das HTML-Markup wird nun vereinfacht. Der Fußnoteninhalt schließt sich in einem Custom Element dem Fußnotenstichwort an. Es gibt in HTML weder ein passendes Element für die Fußnoten unten als auch für den Link dahin.[4] David MacDonald schlug ein <noteref> und ein <note>-Element vor.[5]

In Mediawiki wird ein <ref>-Element verwendet, dass dann von der Software in eine Fußnote umgewandelt wird.

ursprüngliches HTML-Markup ansehen …
Fußnoten-Stichwort<x-ref>Fussnoteninhalt</x-ref>

Das x-ref-Element ist durch das vorangestellte x als custom element erkennbar, wird aber normal dargestellt und per CSS gestylt. Falls Javascript deaktiviert ist, verbleiben die Notizen im Kontext.

JavaScript

Das im body geladene Script durchsucht das Dokument nach allen Vorkommen von <x-ref>: 

let xRefs = document.querySelectorAll('x-ref');

Die so entstandene *Live node list* aller Vorkommen wird nun abgearbeitet:

JS-Funktion, die Fußnoten setzt ansehen …
    const xRefs = document.querySelectorAll('x-ref');
    const footnoteList = document.querySelector('footer ol');
    const footnoteLabel = document.getElementById('footnote-label');
    
    xRefs.forEach((xRef, index) => {
      const footnoteNumber = index + 1;
      const footnoteId = 'footnote-' + footnoteNumber;
      const refId = 'ref-' + footnoteNumber;

      // Create the footnote reference link
      const refLink = document.createElement('a');
      refLink.setAttribute('role', 'doc-noteref');
      refLink.setAttribute('href', '#' + footnoteId);
      refLink.setAttribute('id', refId);
      refLink.textContent = '';

      // Replace <x-ref> with the reference link
      xRef.parentNode.replaceChild(refLink, xRef);

      // Create the corresponding footnote entry in the <ol>
      const footnoteItem = document.createElement('li');
      footnoteItem.setAttribute('id', footnoteId);
      footnoteItem.innerHTML = xRef.innerHTML + ` <a href="#${refId}">↩︎</a>`;
      footnoteList.appendChild(footnoteItem);
    });

Mit forEach wird jedem Element der *Live node list* …

  1. eine Zählvariable index zugeordnet
  2. zwei IDs gebildet, die aus den Strings footnote, bzw. ref und der Zählvariable zusammengesetzt werden

Dann wird mit document.createElement('a') ein Link erzeugt, der ein role-Attribut, ein href-Attribut mit der URL zur Fußnote und einer ID als Ziel für den backlink erhält.

Mit xRef.parentNode.replaceChild(refLink, xRef) wird nun das custom element <x-ref> durch den Link ersetzt.

Analog zum Link wird nun der Listeneintrag der Fußnote erzeugt und in die ol eingefügt. Dabei verwenden wir anstelle des eleganteren textContent doch footnoteItem.innerHTML, um eventuelle HTML-Textauszeichnungselemente in den Fußnoten „mitzunehmen“.

Weblinks

  1. ↑ Wikipedia: DIN 5008
  2. ↑ sitepoint.com: Accessible Footnotes with CSS von Kitty Giraudel
  3. ↑ W3C: Digital Publishing WAI-ARIA Module 1.0 W3C Recommendation 14 December 2017
  4. ↑ WHATWG: Footnotes
  5. ↑ CanAdapt: Footnotes and endnotes in HTML.next von David MacDonald
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Listen/Fußnoten_mit_CSS&oldid=98958“