Enlaces anidados

El otro día publicó una imagen, literalmente como un ejercicio de reflexión, sobre cómo se pueden lograr enlaces “anidados”. Es decir, un contenedor grande que está vinculado a una URL que contiene un contenedor más pequeño o un enlace de texto dentro que va a otra URL. Esto es más difícil de lo que parece una primera vista. La razón principal es que…

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

Eric Meyer una vez pidió enlaces más flexibles, pero ni siquiera eso maneja una situación en la que un enlace está anidado dentro de otro.

Por cierto, esto es lo que sucede con ese HTML:

Mi primera inclinación sería simplemente no anidar los enlaces en el marcado, sino hacer que parezcan anidados visualmente. Algunas personas respondieron al tweet, incluido Nathan Smith, quien compartió esa misma idea: tener un elemento padre posicionado de manera relativa y posicionar absolutamente ambos enlaces. El más grande podría llenar toda el área y el más pequeño podría ubicarse sobre él.

Es complicado, ya que necesitarás números mágicos hasta cierto punto para manejar el espacio y el contenido variable.

Mi segunda inclinación sería tratarlo en JavaScript.

div     tabindex="1"  Outside  a href="https://.com"    Inside  /a/div

Literalmente, no tengo idea de cuán kosher es eso desde una perspectiva de accesibilidad. Me parece asqueroso, así que asumiré que son malas noticias.

Hablando de accesibilidad, Heydon Pickering tiene un artículo completo sobre los componentes de la tarjeta, que es un patrón de diseño popular en el que a menudo surge esta situación. Su solución es tener un elemento padre con una posición relativa, luego un enlace principal funcional y con una posición normal. Ese primer enlace tiene un pseudoelemento con una posición absoluta que cubre toda la tarjeta. Todos los subenlaces tienen una posición relativa y vienen después del enlace inicial, por lo que se ubicarían sobre el primer enlace mediante z-index.

Y hablando de pseudoapilares, ese es el enfoque que utiliza Sean Curtis aquí:

Otras soluciones en el territorio “astuto” podrían ser:

• Utilizando un formelemento donde el actionatributo actúa como enlace.
• Usar un objectelemento para envolver el enlace interno.

¡Sara Soueidan respondió con su propia publicación!

Tenía el mismo requisito hace un par de años cuando estaba construyendo las bases iniciales de Smashing Magazine. Así que pensé en escribir mi respuesta al hilo de Chris en forma de publicación de blog.

Sara ha escrito sobre esto con mucho más detalle y cuidado que yo aquí, así que no dejes de echarle un vistazo. Parece que tanto ella como Heydon han llegado a casi la misma solución, con la cubierta del pseudoelemento que contiene subenlaces que sobresalen por encima según sea necesario.

¿Alguna vez lo has hecho de otra manera? ¡Mucha experiencia de usuario y mucho en qué pensar!