Versionen dieses Beitrags

Fertiges Beispiel ohne Bootstrap

Gb 80x80 Gunnar Bittersmann
  • Fertiges Beispiel ohne Bootstrap
  • @@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/):
  • * „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:
  • ![Screenshot: Nummer überdeckt Text](/images/a30e7540-bb08-4f47-a303-609b4cdab324.png){: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