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

    Screenshot: Nummer überdeckt Text

  • </li>-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
freiwillige Angabe, für jeden sichtbar
freiwillige Angabe, für jeden sichtbar
freiwillige Angabe, für jeden sichtbar

Vorschau (Nachricht wird im Forum „SELF-Forum“ erscheinen)

  • Keine Tag-Vorschläge verfügbar
  • keine Tags vergeben

abbrechen

0119

Navigation nachbauen

  1. 0
    1. -1
      1. 1
        1. 0
          1. 1
            1. 0
              1. 1
            2. 0
              1. 1
                1. 0
                  1. 0
                2. 0
              2. 2
                1. 1
                  1. 0
                2. 0
                  1. 0
                  2. 0
              3. 1
          2. 1
            1. -1
              1. 1
                1. -1
                  1. 0
                    1. 0
                      1. 0
                        1. 0
                    2. 3
                      1. 0
                        1. 1
                          1. 0
                            1. 2
                              1. 0
                                1. -3
                                  1. 4

                                    Politische Ränder

                                2. 2
                                3. 0
                                  1. 0
                                    1. 0

                                      Viel Ehr ...

                                  2. 0
                                    1. 0
                  2. 2

                    Bitte nicht so. Danke!

            2. 0
              1. 0
              2. 3
                1. 0
                  1. 1
                    1. 0
                  2. 1
          3. 2
            1. 0
              1. -1
                1. 0
                  1. -1
                    1. 1
                      1. 0
                        1. 1
                          1. 0
                            1. 0
                        2. 2
                          1. 0
                          2. 0
                            1. 1
                              1. -2
                                1. 1
                                  1. 0
                                    1. 0
                                      1. 0
                                        1. 1
                                          1. 0
                                            1. 0
                                              1. 0
                                                1. 0
                                                  1. 0
                                                    1. 0
                                                      1. 0
                                                        1. 0
                                                          1. 0
                                                          2. 0
                                                            1. 0
                                            2. 0

                                              Fertiges Beispiel ohne Bootstrap

                                              1. 1
                                                1. 0
                                                  1. 1
                                                    1. 0
                                                  2. 0
                                                2. 0
                                                  1. 0
                                                    1. 1
                                                      1. 0
                                                        1. 0
                                                        2. 0
                                                          1. 1

                                                            ganze Box verlinken

                                                            1. 0
                                                            2. 0
                                                              1. 0
                                                                1. 0
                                                                2. 0
                                                              2. 1
                                                                1. 0
                                        2. 0
                                      2. 0
                                        1. 0
                                          1. 0
                                  2. 0
                            2. 1
                              1. 0
                          3. 1
                            1. 0
                              1. 0
                                1. 0
                                  1. 1
                                    1. 0
                                      1. 0
                      2. 0
                        1. 0
                        2. 0

                          Aufträge aus moralischen Gründen abzulehnen ...

                    2. 1