Alpine Content Link

A frequent component to build is a card. I’ve built many. A common request is to make the card “clickable” — a not so distant relative of “make it pop”. Or, in other words, make the card a link. Click card, something happens.

Usually, developers wrap a card in an a element. Which, if you test it with a screen reader, it will announce it as a link, and then all the content in there: image alt text, text, subtitle, or whatever. That’s not helpful for screen reader users. It will also prevent people from selecting the text or right-clicking on the images to download. And, it looks gross.

<!-- DO NOT DO THIS -->
<ul>
  ...
  <li>
    <a href="/nowhere">
      <img src="blep.jpg" alt="Cat with a blep, holding a pen" />
      <h2>Cat Doctors of Space</h2>
      <p>Something something content content stuff and things, oh yeah.</p>
    </a>
  </li>
  ...
</ul>

Instead, the heading should be the link. I can’t recall who said it, but a card is a mini webpage. You wouldn’t make your entire page a link now, would you? No, you would not do that. However, moving the link to the heading, the card has no clicking powers.

In Heydon Pickering‘s Cards chapter in Inclusive Components, they go over solutions for card links — the book is a valuable resource. I used their solution, but wanted something a little easier to work with. Like, add an attribute, make client happy, dramatically close laptop and walk away.

I use Alpine on pretty much every project. Unless I’m being a snobby purist(?). I usually create a custom Alpine directive in the codebase for card links. This is fine, but wouldn’t it be easier to install a package? Having more dependencies is always a good idea, so I created Alpine Content Link.

Here’s an example of how to use the Alpine content link. For working examples, visit the Code and Work index pages of this site.

<ul>
  ...
  <li x-data x-content-link>
    <img src="blep.jpg" alt="Cat with a blep, holding a pen" />
    <h2><a href="/nowhere">Cat Doctors of Space</a></h2>
    <p>Something something content content stuff and things, oh yeah.</p>
  </li>
  ...
</ul>

Obviously, since this is my first npm package, I’m sure I’m doing something wrong — I ooze confidence. If so, please let me know, just don’t be a wet sock. I obsessively winged it until things worked and were moderately clean. Making mistakes is a great way to learn, as long as no one gets hurt, like in life.

Safe journeys, web fans… wherever you are.