nav li:first-of-type u. nav li:last-of-type

[Rolf B]

Hallo Gustav,

zielführend? erlaubt?

Erlaubt sicherlich, aber zielführend? Ich habe nochmal geschaut, was Gunnar so zum Thema visuelles Versteckspiel geschrieben hat, und habe auch nach font-size:0 gegoogelt.

Ergebnis: Manche Browser erlauben es, eine Mindestschriftgröße zu setzen. font-size:0 würde damit ignoriert.

Der von Gunnar verlinkte Vorschlag ist:

.visually-hidden {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Da wird aus einigen Kanonen auf einen einsamen Spatzen geschossen, aber vermutlich trifft jede Kanone einen anderen potenziellen Fluchtweg des Vögelchens. Beispielsweise white-space: nowrap. Renée Beach erzählt, dass ein Screenreader den visuell versteckten Text "show more reactions" als "showmorereactions" zusammennuschelte. Als Ursache dafür stellte sich width:1px heraus, das zu einem Zeilenumbruch an den Leerstellen führte, und der Screenreader ignorierte Zeilenumbrüche, als wären sie nicht da. Das nowrap behob das Problem.

Also: font-size - besser ist die oben gezeigte Definition. Setze sie in dein CSS und gib dem Span die Klasse visually-hidden.

Rolf