CSS/Anwendung und Praxis/Fußnoten mit CSS

Aus SELFHTML-Wiki
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 ein 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, die aber auf mobilen Geräten nicht dargestellt wird.

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. Man kann einen Auto-Footnoter mit JavaScript realisieren, im vorliegenden Fall soll jedoch nur mit CSS gearbeitet werden.

Anwendungsbeispiel[Bearbeiten]

Information

Bei diesem Anwendungsbeispiel handelt es sich um eine überarbeitete Übernahme des Artikels: Accessible Footnotes with CSS von Hugo Giraudel.


zugängliches Markup[Bearbeiten]

Ziel unseres Anwendungsbeispiels soll es sein, dass auch Benutzer mit Screenreadern die Zusammenhänge zwischen Link und Fußnote erkennen können.

Beispiel: zugängliches Markup - der Footer
<footer>
  <h2 id="footnote-label">Fußnoten</h2>
  <ol>
    ...
  </ol>
</footer>
Der Footer, in dem unsere Fußnoten aufgelistet werden, erhält eine id footnote-label.

Bei Elementen, die anders als sonst üblich verwendet werden, kann man Screenreadern durch ein ARIA-Attribut weitere Informationen über die hier verwendete Funktion geben.

Beispiel: zugängliches Markup - Links im Haupttext
<p>
  <a href="#footnotes" aria-describedby="footnote-label" id="footnotes-ref">Fußnoten</a>
  manuell einzufügen ...
</p>
Links, die auf Fußnoten verweisen, erhalten ein aria-describedby-Attribut. So wird klar, dass es keine externen Links sind.

Anmerkungsziffern automatisch erstellen[Bearbeiten]

CSS-Counters 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 aria-describedby-Attribut besitzt, soll nun eine inkrementelle Zahl ermittelt werden, die dann in einem :after-Pseudoelement dargestellt wird.

Beispiel: Anmerkungsziffern mit CSS-Counters erstellen ansehen …
 /**
 * Initialisieren eines `footnotes` counters
 */
article {
  counter-reset: footnotes;
}

/**
 * Inline footnotes Referencen
 * 1. Inkrementiere (erhöhe um 1) den counter bei jedem neuen Verweis
 * 2. Links normalisieren, damit sie als regulärer Text erscheinen */

a[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

/**
 * Anmerkungsziffern
 * 1. aktuellen Wert des counters anzeigen (z.B. `[1]`)
 * 2. Text wird hochgestellt 
 * 3. Textgrösse verkleinert (da sie ja hochgestellt ist)
 * 4. kleine Verschiebung vom Text weg
 * 5. Aufheben der Linknormalisierung, damit die Zahl als Link erkennbar wird 
 */
a[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.5em; /* 3 */
  margin-left: 2px; /* 4 */
  color: blue; /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

/**
 * Resetting the default focused styles on the number
 */
a[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}
Hinter jedem Verweis auf eine Fußnote erscheint nun eine Zahl. Während der Linktext als normaler Text erscheint, wird diese Zahl als Link gestylt.

Backlinks einrichten[Bearbeiten]

Gerade bei längeren Texten 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.


Beispiel ansehen …
<p>
  <a href="#css" aria-describedby="footnote-label" id="css-ref">CSS</a> 
  ermöglicht es aber ...
  ...
</p>
 <footer>
    <h2 class="visually-hidden" id="footnote-label">Fußnoten</h2>
    <ol>
      <li id="css">Cascading Style Sheets <a href="#css-ref" aria-label="Back to content"></a></li>
      ...
  </ol>
  </footer>
Jeder Verweis auf eine Fußnote erhält nun eine id, die zur Kennzeichnung die Endung -ref 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 aria-label "Back To content".

Quellen[Bearbeiten]

  1. Wikipedia: DIN 5008

Weblinks[Bearbeiten]