Referenzieren in HTML - "hin" ist simpel, doch wie "zurück"...?
bearbeitet von
@@curtis
> Es geht um Fußnoten. Ja, Fußnoten, weil in den entsprechenden Texten Quellenangaben gemacht werden müssen oder eben weiterführende Erläuterungen zu den entsprechenden Textstellen nötig sind.
Fußnoten sind bei Drucksachen brauchbar, aber auf Webseiten nicht die beste Idee. Warum das Hoch- und Runtergespringe, anstatt den Inhalt direkt einzubinden? (Das `aside`-Element könnte dafür passend sein. Und ein Stil, der den Einschub vom Haupttext unterscheidet: kleinere Schrift bspw.)
> Das „Hin“-Verweisen ist überhaupt kein Problem, doch wie gestalte ich den Verweistext dergestalt, dass ich von dort wieder zurück an die entsprechende Stelle im Text springen kann?
>
> Ist das mit HTML machbar, oder benötigt es dazu zwangsläufig CSS?
Ich wüsste nicht, wie das mit CSS machbar sein sollte.
Du kannst dir ja mal ansehen, wie das hier im Forum funktioniert.[^1]
[^1]: Wie Fußnoten ersellt werden, findest du in der [Hilfe](https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Fu.C3.9Fnoten).
Der Link, der zur Fußnote führt, hat auch eine ID, sodass von der Fußnote wieder dorthin zurückgesprungen werden kann.
Kitty Giraudel hat einen [Artikel](https://www.sitepoint.com/accessible-footnotes-css/) zu Fußnoten, in dem dey auch auf den Link zurück eingeht.
Und auf die Benutzbarkeit der Links. Die ist hier im Forum nicht gegeben: den Links fehlt ein zugänglicher Linktitel.[^2] Statt `aria-label` ist dafür aber ein [visuell verstecktes](https://www.a11yproject.com/posts/how-to-hide-content/) `span`-Element besser:
```html
<a href="#1" id="back1"><span class="visually-hidden">Fußnote</span> 1</a>
⋮
<ol>
<li id="1">
Das Kleingedruckte.
<a href="back1">
<span class="visually-hidden">zurück zur Stelle im Haupttext</span>
<span aria-hidden="true">←</span>
</a>
</li>
</ol>
```
[^2]: Ich werde CK mal ein Bugticket schreiben.
🖖 Живіть довго і процвітайте
{:@uk}
--
*Ad astra per aspera*{:@la}