Fertiges Beispiel ohne Bootstrap

[Bernd]

„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:

Erledigt

Mit JavaScript könnte man dafür sorgen, dass die gesamte Box verlinkt ist. Aber bitte nicht den gesamten Boxinhalt ins a-Element packen;

Ebenfalls erledigt

„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.

Was ist jetzt schlimm dran, wenn der Inhalt länger wird?
https://codepen.io/anon/pen/wNweWB Schöner wäre zwar wenn die Links alle auf gleicher Höhe wären, aber damit kann man sehr gut leben.

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

Irgendwo muss man Kompromisse eingehe. Da man solche Boxen meistens selbst in der Hand hat, ist das Risiko dass es zu solchen unschönen Darstellungen kommt sehr gering.

Ich verwende als Beispieltext gern die Allgemeine Erklärung der Menschenrechte; deren 30 Artikel sind verschieden lang.

Ich werde mich hüten irgendwelche politische Texte zu nehmen.