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

[Gunnar Bittersmann]

@@Matthias Scharwies

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

Hast du den ersten Schritt übersprungen: zu hirnen, ob man Fußnoten in HTML umsetzt?

Bei einer Seite Totholz ist das Auge ja schnell von der ⁴² zum Seitenende gesprungen. Und wer sich in weiser Voraussicht die Stelle im Text gemerkt hat, findet den Weg auch wieder zurück.

(Blöd sind da Bücher, wo die Fußnoten nicht am jeweiligen Seitenende, sondern gesammelt am Ende des Buches sind. Noch blöder sine da Bücher, wo die Fußnoten am Ende des jeweiligen Kapitels stehen. Viel Spaß beim Blättern!)

Auf einer Webseite befindet sich der Bereich mit den Fußnoten womöglich außerhalb des Sichtbereichs. Klar kann man das mit seiteninternen Links machen – und auch für den Sprung zurück.

Am Anfang sollte aber die Überlegung stehen, ob man das tun sollte oder ob es nicht besser wäre, die Information gleich im Text unterzubringen.

b. Kitty Giraudel verwendete 2015 Links mit aria-labels, die aber nur auf die Fußnotenübersicht und nicht die jeweilige Fußnote verweisen.

Ohne das jetzt ausprobiert zu haben würde ich denken, ein Screenreader liest dann bei allen Referenzen auf Fußnoten jeweils sämtliche Fußnoten vor. Nicht das, was man will.

Aber auch bei

<p>
  <a href="#css" aria-describedby="css-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">
      <span id="css-label">Cascading Style Sheets</span>
      <a href="#css-ref" aria-label="Back to content">↩</a>
    </li>
  </ol>
</footer>

würde ein Screenreader sowas wie „Link: CSS, Cascading Style Sheets“ vorlesen, d.h. die Fußnote gleich mit? Wozu (für diese Nutzerinnen^[1]) dann noch ein Link, wo nichts weiter als nochmals „Cascading Style Sheets“ dahintersteckt?

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

Mir scheint das mit <aside id="fn01" role="doc-footnote"> sinnvoller zu sein. Die Nutzerin^[1:1] kann selbst entscheiden, ob sie zur Fußnote springen will oder nicht.

😷 LLAP

---

1. Generisches Femininum; männliche Nutzer sind mitgemeint. ↩︎ ↩︎

[Rolf B]

Hallo Gunnar, hallo @Christian Kruse

OT: Warum spielt die zweite Nutzerin ein Unentschieden?! Das Markdown ist für beide Nutzerinnen gleich 🤔

AT: Gunnar, du bezweifelst den Sinn von Fußnoten in Online-Texten, setzt aber auch gleich selbst 2. Warum hast Du diese Information nicht im Text untergebracht? Genau. Weil es den Lesefluss noch mehr gestört hätte. In der Wikipedia werden alle Quellenverweise als Fußnoten abgebildet. Ähnliches ergibt auch im Selfwiki Sinn. Die Existenzberechtigung von Fußnoten würde ich daher nicht verneinen.

Rolf

[JürgenB]

Hallo Rolf,

Die Existenzberechtigung von Fußnoten würde ich daher nicht verneinen.

alles, was den Besucher zum hin- und herscrollen zwingt, sollte man vermeiden.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Rolf B

Die Existenzberechtigung von Fußnoten würde ich daher nicht verneinen.

Habe ich auch nicht. „Ob man Fußnoten in HTML umsetzt“ heißt nicht, dass man keine Fußnoten in HTML umsetzt.

Sondern es heißt abzuwägen. Und die Abwägung kann je nach Text(länge) unterschiedlich ausfallen.

Und sie kann für einen Text auf einer Webseite anders ausfallen als für denselben Text auf Papier.

---

OT: Warum spielt die zweite Nutzerin ein Unentschieden?! Das Markdown ist für beide Nutzerinnen gleich 🤔

Beide Referenzen verweisen auf dieselbe Fußnote. Für den Rücksprung müssen die Referenzen aber verschieden sein. Ob man dies auch mit [1:1] sichtbar machen sollte …?

So oft wird der Fall, auf eine Fußnote mehrfach zu verweisen, aber wohl nicht auftreten. Ich sehe da keinen zwingenden Handlungsbedarf.

😷 LLAP

[Matthias Scharwies]

Servus!

Vielen Dank an alle Beitragenden!

Am Anfang sollte aber die Überlegung stehen, ob man das tun sollte oder ob es nicht besser wäre, die Information gleich im Text unterzubringen.

AT: Gunnar, du bezweifelst den Sinn von Fußnoten in Online-Texten, setzt aber auch gleich selbst 2. Warum hast Du diese Information nicht im Text untergebracht? Genau. Weil es den Lesefluss noch mehr gestört hätte. In der Wikipedia werden alle Quellenverweise als Fußnoten abgebildet. Ähnliches ergibt auch im Selfwiki Sinn. Die Existenzberechtigung von Fußnoten würde ich daher nicht verneinen.

Genau, es ist nicht üblich, da die Seiten im Allgemeinen nicht paginiert sind, Bei Wikipedia, im SELF-Wiki und auch im Forum gibt es jedoch Anwendungsfälle.

Bei einer Seite Totholz ist das Auge ja schnell von der ⁴² zum Seitenende gesprungen. Und wer sich in weiser Voraussicht die Stelle im Text gemerkt hat, findet den Weg auch wieder zurück.

Dafür gibt es Backlinks, die an die passende Urpungsstelle zurückleiten.

@JürgenB Ja, Tooltipps gibt es auch und sie haben ihren Anwendungsfall (wobei ich da heute eher eine Infobox mit details/summary realisieren würde).

Mir geht's drum das bestehende und aus 2011 stammende Auto-Footnoter-Tutorial durch etwas zeitgemäßes zu ersetzen.

In einer Woche stell ich Euch's vor!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

@JürgenB Ja, Tooltipps gibt es auch und sie haben ihren Anwendungsfall (wobei ich da heute eher eine Infobox mit details/summary realisieren würde).

Äh nein, wozu das denn? Wenn das Auge der Nutzerin schon in der Infobox angekommen ist, ist sie schon aus dem Lesefluss raus. Wozu dann noch eine Interaktion zum Öffnen der Infobox erzwingen?

Da man bei breiten Bildschirmen den Text sowieso nicht über die volle Breite laufen lassen kann (es sei denn, man heißt Wikipedia und schert sich einen Dreck um Lesbarkeit), hat man neben dem Text Platz, um die Infoboxen an passender Stelle untezubringen. Zu sehen bspw. in diesem Artikel. (Bei meiner Übersetzung sind zu den im Original vorhandenen Infoboxen noch ein paar dazugekommen.)

😷 LLAP

[Matthias Scharwies]

Servus!

Da man bei breiten Bildschirmen den Text sowieso nicht über die volle Breite laufen lassen kann (es sei denn, man heißt Wikipedia und schert sich einen Dreck um Lesbarkeit), hat man neben dem Text Platz, um die Infoboxen an passender Stelle untezubringen. Zu sehen bspw. in diesem Artikel. (Bei meiner Übersetzung sind zu den im Original vorhandenen Infoboxen noch ein paar dazugekommen.)

Sieht gut aus!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Zu sehen bspw. in diesem Artikel. (Bei meiner Übersetzung sind zu den im Original vorhandenen Infoboxen noch ein paar dazugekommen.)

„Anmerkung des Übersetzers: Im Deutschen gibt es keinen anderen gängigen Begriff für „Vorname“ (wie „given name“ im Englischen). Bedenken Sie, dass der Vorname entgegen seiner Bezeichnung auch hinter anderen Namensteilen stehen kann.“

Genau deshalb sagt man ja statt Familienname sehr sehr häufig auch Hintername. scnr

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Hintername

Was ist das – Ame?

SCNR2

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Was ist das – Ame?

Ame du cul – Tu ne connais pas?

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

non. Pas du tout. Mein Französisch ist zu alt. Google Translate übersetzt ame als Seele und cul als Arsch 😲. Deepl meint immerhin Eselsseele. Was soll es nun sinnvollerweise bedeuten?

Rolf

[Matthias Apsel]

Hallo Rolf B,

Seele des A.

Bis demnächst
Matthias

[MudGuard]

Hi,

Zu sehen bspw. in diesem Artikel. (Bei meiner Übersetzung sind zu den im Original vorhandenen Infoboxen noch ein paar dazugekommen.)

Bitte nicht als Kritik, sondern nur als Hinweis auffassen: da sind noch ein paar Teile des englischen Originals drin.

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

Bitte nicht als Kritik[...] auffassen

Warum nicht? Kritik an sich ist nichts Negatives. Es sei denn sie ist nur negativ und unkonstruktiv…

Gruß
Kalk

[Gunnar Bittersmann]

@@MudGuard

Bitte nicht als Kritik, sondern nur als Hinweis auffassen: da sind noch ein paar Teile des englischen Originals drin.

Ja, hab den gelben Kasten oben auch gesehen. Da sind zwei kleine Absätze im Original hinzugekommen. Ans Werk …

😷 LLAP

[MudGuard]

Hi,

Ja, hab den gelben Kasten oben auch gesehen. Da sind zwei kleine Absätze im Original hinzugekommen. Ans Werk …

Ich hab 4 Stellen gesehen.

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Gunnar,

Da man bei breiten Bildschirmen den Text sowieso nicht über die volle Breite laufen lassen kann (es sei denn, man heißt Wikipedia und schert sich einen Dreck um Lesbarkeit), hat man neben dem Text Platz, um die Infoboxen an passender Stelle untezubringen. Zu sehen bspw. in diesem Artikel. (Bei meiner Übersetzung sind zu den im Original vorhandenen Infoboxen noch ein paar dazugekommen.)

und wo kommt die Box hin, wenn der Bildschirm schmal ist? Beim w3 quetscht sich alles neben- und dann auch übereinander.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

und wo kommt die Box hin, wenn der Bildschirm schmal ist? Beim w3 quetscht sich alles neben- und dann auch übereinander.

Ja, das Layout da ist nicht wirklich responsiv. *seufz*

Unterhalb einer gewissen Breite ist untereinander statt nebeneinander angesagt.

Und dann kann man bei längeren Fußnoten evtl. auch über Auf-/Zuklappen nachdenken.

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ja, das Layout da ist nicht wirklich responsiv. *seufz*

*g*

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

so ein Setup habe ich auch, aber die Bildschirme sind noch abweichender kalibriert als Deine. Das ist schlecht für die Augen.

Ich hadere noch mit den Kosten für... (vor allem weiß ich nicht ob ich dann auch eine neue GraKa brauche)

Rolf

[Tabellenkalk]

Hallo,

Ich hadere noch mit den Kosten für... (vor allem weiß ich nicht ob ich dann auch eine neue GraKa brauche)

Vielleicht gibt’s Rabatt, wenn du zwei nimmst?

Gruß
Kalk

Edith schlug vor, nur das zu verlinken, was gewollt war…

[Der Martin]

Hallo Rolf,

so ein Setup habe ich auch, aber die Bildschirme sind noch abweichender kalibriert als Deine.

das muss nicht unbedingt so sein: Die Monitore stehen in einem gewissen Winkel zueinander, der Betrachtungswinkel auf den rechten und den linken Bildschirm ust also leicht verschieden. Das genügt oft schon für eine etwas unterschiedliche Farb- oder Helligkeitswahrnehmung.

Das ist schlecht für die Augen.

How so?

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

How so?

Sagt unser Betriebsarzt. Wir dürfen im Betrieb nur zwei exakt gleiche Monitore nutzen. Schon gleicher Hersteller, gleiches Modell, aber verschiedene Modellgenerationen wurden bemängelt. Es heißt, die nötige Anpassung der Augen beim Blickwechsel zum anderen Monitor wäre schädlich. Hier zu Hause hab ich meinen alten Samsung und denn Dell von meiner Frau, den sie zur Zeit nicht braucht. Sehr verschieden. Deswegen will ich ja was unternehmen.

Allerdings las ich gerade auch auf der Seite von BenQ einen Artikel, dass man bei curved Monitoren exakt im Hotspot sitzen müsse, andernfalls sähe es schei... aus. Und der Hotspot ist eigentlich zu nahe am Bildschirm, das sei auch schlecht für die Augen. Und die Bild-/Videobearbeitung würde dadurch negativ beeinträchtigt (Verzerrung, Farbtreue). Hmmm. Entweder wollen die damit davon ablenken, dass ihre Curved Screens nichts taugen, oder es ist was dran. Muss also nochmal gut überlegen.

Rolf

[Der Martin]

Hallo,

How so?

Sagt unser Betriebsarzt.

soso.

Wir dürfen im Betrieb nur zwei exakt gleiche Monitore nutzen. Schon gleicher Hersteller, gleiches Modell, aber verschiedene Modellgenerationen wurden bemängelt.

naja, das möchte man ja eigentlich auch. Aber selbst wenn man zwei Monitore exakt desselben Typs hat, weichen sie doch immer ein bisschen voneinander ab. Fertigungstoleranzen, inhomogene Lichtverhältnisse im Raum, abweichende Monitoreinstellungen für Helligkeit, Kontrast, Farbsättigung, Farbtemperatur. Nicht zu vergessen der schon erwähnte leicht unterschiedliche Blickwinkel.

Es heißt, die nötige Anpassung der Augen beim Blickwechsel zum anderen Monitor wäre schädlich.

Wundert mich eigentlich, denn sonst ermuntert man die Leute, ihren Augen doch bitte immer wieder wechselnde und gerade nicht eintönige Bedingungen anzubieten. Abwechslung ist die Devise.

Hier zu Hause hab ich meinen alten Samsung und denn Dell von meiner Frau, den sie zur Zeit nicht braucht. Sehr verschieden. Deswegen will ich ja was unternehmen.

Zuhause habe ich auch zwei ähnliche, aber im Detail merklich verschiedene Monitore. Das stört aber überhaupt nicht. Es würde möglicherweise stören, wenn ich bildschirmübergreifende Fenster hätte. Aber im Normalfall bilden die beiden Bildschirme zwei optisch getrennte Anzeigen.

Allerdings las ich gerade auch auf der Seite von BenQ einen Artikel, dass man bei curved Monitoren exakt im Hotspot sitzen müsse, andernfalls sähe es schei... aus.

Betrachtungswinkel, sag ich doch.

Und der Hotspot ist eigentlich zu nahe am Bildschirm, das sei auch schlecht für die Augen.

Sind diese Monitore so stark gekrümmt? Ich habe solche Dinger bisher nur im Laden stehen gesehen, habe aber den Eindruck, der Krümmungsradius sei mindestens einen Meter, eher mehr.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

habe aber den Eindruck, der Krümmungsradius sei mindestens einen Meter, eher mehr.

Wenn ich hier zum Beispiel die Angabe 1800R richtig deute, ist es 1,80 Meter. Eigentlich ja noch zu flach, wie man auch auf dem Top-Down Foto dort sieht. Aber man will ja auch nicht den Schirm um den Kopf wickeln...

Also vielleicht doch nur Ablenkungsgelaber.

Rolf

[Matthias Apsel]

Hallo Der Martin,

so ein Setup habe ich auch, aber die Bildschirme sind noch abweichender kalibriert als Deine.

das muss nicht unbedingt so sein: Die Monitore stehen in einem gewissen Winkel zueinander, der Betrachtungswinkel auf den rechten und den linken Bildschirm ust also leicht verschieden. Das genügt oft schon für eine etwas unterschiedliche Farb- oder Helligkeitswahrnehmung.

Es ist in dem Fall eine Mischung aus beidem. Leider lässt sich der linke Monitor nicht an den rechten anpassen und ich habe schon den Eindruck, dass er ein schlechteres Bild liefert als der rechte.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Rolf B,

Ich hadere noch mit den Kosten für... (vor allem weiß ich nicht ob ich dann auch eine neue GraKa brauche)

Für das Fenstermanagement wäre mir wichtig, dass das Betriebssystem (oder wer auch immer) den großen Monitor wie zwei getrennte behandelt.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

statt deine Frage zu beantworten, mache ich das, was man uns hier immer vorwirft: ich rate davon ab. Gunnar hat ja schon begründet, warum.

Auf einer Seite von mir benötigt ein Begriff eine Erklährung. Ich habe daher hinter den Begriff einen Button gesetzt, und bei Klick auf diesen wird eine Info eingeblendet.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

ist das dann nicht die HTML-geeignete Implementierung eine Fußnote?

Rolf

[JürgenB]

Hallo Rolf,

ist das dann nicht die HTML-geeignete Implementierung eine Fußnote?

eben, eine Fußnote ohne Fuß.

Gruß
Jürgen