Block Links Sind Ein Ärgernis (und Vielleicht Einfach Eine Schlechte Idee)

Wie wir in unserem vollständigen Leitfaden bemerkt haben, können Sie <a href=""> Links um beliebige HTML-Blöcke legen. Nennen wir das einen „Block-Link“. So wie Sie einen ganzen „Card“-Inhalt verlinken möchten, weil er ein großes klickbares Ziel darstellt.

<a href="/article/"> <!-- display: block; -->
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>

Dazu, Adrian Roselli

Das Schlimmste, was man für einen Block-Link tun kann, ist wahrscheinlich, alles in den <a href> zu packen.

[…] für einen Screenreader-Benutzer wird die gesamte Zeichenkette vorgelesen, wenn durch die Steuerelemente getappt wird. Im folgenden Beispiel enthält der erste Link die Überschrift, das Bild (ohne es als Bild zu deklarieren) und einen Textblock, der etwa 25 Sekunden zum Vorlesen benötigt, bevor er als Link angekündigt wird. Beim Tippen weiß man nicht immer den Steuerelementtyp, bis der zugängliche Name vollständig ist.

(Das Beispiel ist eine ziemlich normal aussehende Karte mit einer Überschrift, einem Bild und einem Absatz.)

Tun Sie das also nicht.

Die Alternative ist, den Link „normal“ zu lassen, wie nur die Überschrift.

<div class="card">
  <h2><a href="/article/">Article</a></h2>
  <img src="..." alt="...">
  <p>Content</p>
</div>

Die Erweiterung des „klickbaren Bereichs“ des Links, um den gesamten Bereich abzudecken.

.card {
  position: relative;
}
.card h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Das funktioniert für den klickbaren Bereich und löst die Beeinträchtigung für Screenreader-Benutzer.

Aber es gibt noch ein weiteres Problem, das beide Lösungen beeinträchtigt, und das ist die **Textauswahl**. Sie können nicht einfach Ihren Cursor irgendwo in die Karte setzen und Text normal auswählen. Der Klick aktiviert den Link und wartet darauf, dass Sie mouseup ausführen, solange Sie sich noch über dem Link befinden, um ihn auszulösen. Sie erhalten nicht die Möglichkeit, innere Textteile auszuwählen, wie Sie es wahrscheinlich erwarten würden. Es verhindert die Textauswahl überhaupt nicht, macht sie aber umständlich und ärgerlich.

Ich bin mir nicht sicher, ob das leicht zu lösen ist. Vielleicht gibt es eine exotische JavaScript-Lösung, die erkennen kann, ob Sie mit der Textauswahl begonnen haben, und dann keinen Klick auslöst, aber wenn Sie klicken, ohne zu ziehen, dann geht es zum Link. Etwas daran ist für mich jedoch verdächtig.

Update: Schauen Sie sich Heydons „The redundant click event“ section in seinem Artikel über Cards an.

Alles in allem würde ich sagen, dass Block-Links einfach eine schlechte Idee sind. Aber ich würde mich gerne eines Besseren belehren lassen und eine wirklich gute Implementierung sehen, die all diese Probleme löst.