Fertiges Beispiel ohne Bootstrap

[Gunnar Bittersmann]

@@Matthias Apsel

https://codepen.io/MatthiasApsel/pen/QzeeOB

Dazu ein paar Anmerkungen:

• „Mehr erfahren“ ist kein sinnvoller Linktext; genauso wenig wie „hier“. Einem Screenreader-Nutzer ist wenig geholfen, wenn sie beim Durchtabben „Mehr erfahren, Link – Mehr erfahren, Link – Mehr erfahren, Link – Mehr erfahren, Link – …“ angesagt bekommt. In den Linktitel muss mit rein, worüber man mehr erfahren kann. Eventuell den Teil visuell verstecken:

<li>…
	<a href="">Mehr erfahren <span class="visually-hidden">über Digitale Strategie</span></a>
</li>
<li>…
	<a href="">Mehr erfahren <span class="visually-hidden">über Wirksames Design</span></a>
</li>

• „Lorem ipsum …“ ist kein sinnvoller Blindtext – nicht, wenn in jeder Box dasselbe steht. Es ist überhaupt nicht erkennbar, wie sich das Layout bei verschieden langen Textinhalten verhält. Ich verwende als Beispieltext gern die Allgemeine Erklärung der Menschenrechte; deren 30 Artikel sind verschieden lang. Beispiel

  Natürlich vor allem auch, um darauf hinzuweisen, dass die Menschenrechte auch 70 Jahre nach der Unterzeichnung der Allgemeinen Erklärung noch keine Selbstverständlichkeit sind.

• Mit JavaScript könnte man dafür sorgen, dass die gesamte Box verlinkt ist. Aber bitte nicht den gesamten Boxinhalt ins a-Element packen; ellenlange Linktitel sind für Screenreader-Nutzer auch nicht brauchbar. Man könnte auch mit CSS dafür sorgen (a::after), nur ist dann der Text nicht mehr kopierbar.

• Das skaliert nicht; wenn es noch mehr Boxen werden, bereiten die Nummern ein Problem:

  

• </li>-End-Tags wegzulassen ist doch sonst nicht dein Stil?

LLAP 🖖