Valid alternative to nested links (a tags) for rich web applications?

Question

I have a rich SPA application with some "material-design cards" (maybe not in the strict sense) like this one:

and I wonder if the "a" html tag is appropriate to handle the click on the card to open the content full-size.

---

As you can see, it's a rich widget on which you can do interactions (as the like/comment/tag buttons). I can have to display a link inside this card (the "source" of the content actually displayed, for example nytimes.com )

When the user click (or touch, because it's also a Cordova/mobile app) the card then we should go to the card item's url and view the card item in full-screen (unless the click is on a card button...)

So I thought about using a link (a tag) as a wrapper around the card, but it seems illegal because I already have the source link inside the card:

You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.

So, how am I supposed to solve this use-case?

A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome... I know I can use history.push but this seems quite annoying or even impossible to reimplement all these defaults in plain JS...

Answer 1

A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome...

First of all, great that you're thinking about this – a large number of developers don't, but just go “Ah, I'll just drop a click handler on it, and then open the URL via location.href , and that's that done & dealt with …”

Giving user's their accustomed browser UI & functionality is a big part of accessibility IMHO.

---

So, since links can not be nested into each other (which makes sense of course, the resulting behavior would just be undefined – do we open the target URL of the inner link, or the outer?), another solution would be to emulate what you want to achieve via a little CSS trickery.

 .card { position: relative; z-index: 1; display: inline-block; width: 100px; padding: 50px; background: #ccc; } .cardlink { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } 

 <div class="card"> <a class="cardlink" href="#fullcardview"></a> <p>Foo bar baz</p> <p> <a href="#like">Like</a> </p> </div> 

A container element for our card, positioned relative (so we can use it as anchor point for absolute positioning of descendant elements).

In that, the first element is our link to the full version of the card (I only used anchor links here, to demonstrate the principle) – but it does not enclose any of the other card content, it is basically just empty. (To take care of accessibility, like putting a descriptive text inside it for screenreader users, and hiding that again for visual devices, I'll leave up to you.) That element gets absolutely positioned, and specifying 0 for all four corners will make it stretch to cover the whole parent element automatically. Plus a z-index: -1 to put it “behind” the rest of the content that follows.

If you check my snippet (or as a fiddle, here: https://jsfiddle.net/Lz4o9114/1/ ), you should be able to hover over the “like” link and see it show ...#like in the browser status bar, whereas hovering the rest of the card should show ...#fullcardview . Opening #like or #fullview in a new tab via context menu should work as expected, as should middle click/ctrl … the whole shebang.

---

Now this is a very basic use of z-index here … depending on your actual card content and structure, you might have to do a little more to get it to work (like giving the rest of the card content a higher z-index than the card link.)

z-index can be a bit of a “fickle mistress” – for more details on stuff like stacking contexts etc., I recommend Philipp Walton's excellent article What No One Told You About Z-Index .

---

Last but not least, I agree somewhat with the concerns Dávid Horváth raised in his comment – it might be unexpected to the user that the whole card acts as a link. They might fe just click somewhere on it, after they selected some text, to remove that selection again … or for whatever other reason. So perhaps only making a portion of the card clickable might be the better choice after all.

(Plus, how this behaves on touch devices, when the user just tries to scroll the page or pinch-zoom, also still needs some investigating/testing for sure.)