Gunnar Bittersmann: ganze Box verlinken

Beitrag lesen

@@marctrix

Übrigens habe ich im Gegensatz zu Gunnar gar kein Problem damit die ganze Box zu verlinken. Ein simples aria-hidden genügt, um den Content in Screenreadern nicht ausgeben zu lassen, so dass SR-Nutzern nur die Überschrift vorgelesen wird.

Nö. Das ist nicht der Sinn der Sache. Ein Screenreader soll ja den gesamten Inhalt der Box vorlesen – nur halt nicht als Linktitel beim Navigieren von Link zu Link.

Ich hab die drei Varianten mal gegenübergestellt:

  1. Kirk: Verlinkung der gesamten Box mit CSS per darüber absolut positioniertem Pseudoelement.

    Dadurch lässt sich Text in der Box nicht markieren/kopieren. (Kirk hat seit dem Transporterunfall in Folge „Kirk : 2 = ?“ sowieso von der Kopiererei die Schnauze voll.)

  2. Spock: Verlinkung der gesamten Box mit JavaScript, der Click auf die Box wird einfach ans a-Element durchgereicht.

  3. Pille: Verlinkung der gesamten Box mit HTML, d.h. der gesamte Boxinhalt im a-Element.

    Zusätzliches Markup (ein Element mit aria-hidden-Attribut; oder wolltest du dieses Attribut an alle Kindelemente außer dem einen vergeben?), Verletzung der Ersten Direktive: Verwende kein ARIA, wenn du nicht musst.

    Zusätzliches CSS, um alle Kindelemente außer dem einen nicht als Linktext erscheinen zu lassen (nicht farbig, nicht unterstrichen).

    Der Text lässt sich auch hier schwer markieren/kopieren. (Pille mochte den Transporter noch nie.)

    Der Text „DeForest Kelley as Dr. Leonard ‘Bones’ McCoy, chief medical officer“ wird im Screenreader überhaupt nicht vorgelesen, sondern lediglich „read more about Bones“. Soll das so? Ich denke, nein.

    Eine bittere Pille.

LLAP 🖖

-- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
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