HTML-Markup für Fußnoten

[Matthias Scharwies]

Servus!

Ich bin grad am Hirnen wie man Fußnoten in HTML umsetzt:

a. ein neues Element:

https://www.davidmacd.com/blog/html51-footnotes.html David MacDonald schlägt <note>und <noteref>vor.

b. Kitty Giraudel verwendete 2015 Links mit aria-labels, die aber nur auf die Fußnotenübersicht und nicht die jeweilige Fußnote verweisen. CSS-Counter zählte Nummern automatisch; die ids und href-Attribute mussten aber jeweils händisch gesetzt werden; Die Fußnote ist im Markup von der Referenz getrennt.

<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>

Übrigens ist dort nicht nur die Referenz, sondern auch der vorherstehende Begriff („CSS“) aktiv - ähnlich wie ein Tooltip. Würdet ihr das von einer Fußnote erwarten?

c. role-Attribute

Hier https://www.w3.org/TR/dpub-aria-1.0/#doc-noteref habe ich folgendes gefunden.

<a href="fn01" id="fnref01" role="doc-noteref">[1]</a>


<aside id="fn01" role="doc-footnote">
   <a role="doc-backlink" href="#fnref01">1.</a>
   Additional results of this study and
   similar studies can be found at …
</aside>

Was ist jetzt besser - aria oder role? oder beides?

Ich könnte mir vorstellen, dass man in einer Komfort-Version Referenzen wie in der Mediawiki - Software mit <x-ref> ... </x-ref> auszeichnet und dann mit JS in das passende Markup umwandelt.

Ich freu mich schon auf Eure Meinungen.

Herzliche Grüße

Matthias Scharwies