Verschachtelte Links

Neulich habe ich ein Bild gepostet, ganz wörtlich als Gedankenexperiment, darüber, wie man „verschachtelte“ Links erreichen könnte. Das heißt, ein großer Container, der mit einer URL verknüpft ist und darin einen kleineren Container oder Textlink enthält, der zu einer anderen URL führt. Das ist schwieriger, als es auf den ersten Blick scheint. Der Hauptgrund ist, dass…

<!-- this is invalid and won't render as expected -->
<a href="#one">
  Outside
  <a href="#two">
    Inside
  </a>
</a>

Eric Meyer forderte einst mehr flexible Verknüpfungen, aber selbst das behandelt nicht ganz eine Situation, in der ein Link in einen anderen verschachtelt ist.

Hier ist übrigens, was mit diesem HTML passiert

Meine erste Idee wäre, die Links einfach nicht im Markup zu *verschachteln*, sondern sie optisch *verschachtelt erscheinen* zu lassen. Einige Leute antworteten auf den Tweet, darunter Nathan Smith, der denselben Gedanken teilte: einen relativ positionierten Elternelement zu haben und beide Links absolut zu positionieren. Der größere könnte den gesamten Bereich ausfüllen und der kleinere könnte darauf sitzen.

Siehe den Pen „Nested“ Links von Nathan Smith (@nathansmith) auf CodePen.

Es ist knifflig, da Sie bis zu einem gewissen Grad magische Zahlen benötigen, um Abstände und variable Inhalte zu handhaben.

Meine zweite Idee wäre, es mit JavaScript zu lösen.

<div 
  onclick="window.location='https://codepen.io'"
  style="cursor: pointer;"
  tabindex="1"
>
  Outside
  <a href="https://css-tricks.de">
    Inside
  </a>
</div>

Ich habe buchstäblich keine Ahnung, wie koscher das aus Sicht der Barrierefreiheit ist. Es sieht für mich hässlich aus, daher gehe ich einfach davon aus, dass es schlechte Nachrichten sind.

Apropos Barrierefreiheit: Heydon Pickering hat einen ganzen Artikel über Kartenkomponenten, ein beliebtes Designmuster, bei dem diese Situation häufig auftritt. Seine Lösung besteht darin, ein relativ positioniertes Elternelement zu haben, dann einen normal platzierten und funktionalen Hauptlink. Dieser erste Link hat ein absolut positioniertes Pseudoelement, das die gesamte Karte abdeckt. Alle Unterlinks sind relativ positioniert und kommen nach dem ersten Link, sodass sie durch z-index auf dem ersten Link sitzen würden.

Und apropos Stapel von Pseudoelementen, das ist der Ansatz, den Sean Curtis hier verfolgt

Siehe den Pen Pretend nested links von Sean Curtis (@seancurtis) auf CodePen.

Andere Lösungen im „raffinierten“ Bereich könnten sein

• Die Verwendung eines <form>-Elements, bei dem das action-Attribut als Link fungiert.
• Die Verwendung eines <object>-Elements, um den inneren Link zu umschließen.

Sara Soueidan antwortete mit ihrem eigenen Beitrag!

Ich hatte vor ein paar Jahren dieselbe Anforderung, als ich die Frontend-Grundlagen für Smashing Magazine erstellte. Also dachte ich, ich schreibe meine Antwort auf Chris' Thread in Form eines Blogbeitrags auf.

Sara hat darüber mit viel mehr Details und Sorgfalt geschrieben, als ich es hier getan habe, also schaut es euch unbedingt an. Es sieht so aus, als hätten sie und Heydon sich auf fast dieselbe Lösung geeinigt, wobei das Pseudoelement die Abdeckung enthält, die Unterlinks nach Bedarf darüber hinausragen lässt.

Hast du es schon mal anders gemacht? Viel UX und Barrierefreiheit zum Nachdenken!