HTML-Markup für Fußnoten
bearbeitet von Matthias ScharwiesServus!
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. Hugo 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.
~~~ HTML
<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.
~~~ HTML
<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
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“