@@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](https://a11yproject.com/posts/how-to-hide-content/): ~~~html <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](https://codepen.io/gunnarbittersmann/pen/xabZwO) 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`{:.language-css}), nur ist dann der Text nicht mehr kopierbar. * Das skaliert nicht; wenn es noch mehr Boxen werden, bereiten die Nummern ein Problem: {:width="200"} * `</li>`{:.language-html}-End-Tags wegzulassen ist doch sonst nicht dein Stil? LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@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 brim 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](https://a11yproject.com/posts/how-to-hide-content/): ~~~html <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](https://codepen.io/gunnarbittersmann/pen/xabZwO) 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`{:.language-css}), nur ist dann der Text nicht mehr kopierbar. * Das skaliert nicht; wenn es noch mehr Boxen werden, bereiten die Nummern ein Problem: {:width="200"} * `</li>`{:.language-html}-End-Tags wegzulassen ist doch sonst nicht dein Stil? LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann