How do you create an accessible card where the whole card is clickable?

Is there a standard way to structure a promo card so the whole thing is clickable, duplicate links are avoided, and there is the option for a call to action button?

Answer

Here is a solution that uses some JS to make the background clickable, but has a solid HTML structure that works even if the JS doesn't for any reason.

https://gitlab.blendinteractive.com/chad.thoreson/a11y-cards

<div class="card">
   <img src="../images/286x180.png" alt="" class="card-img-top">
   <div class="card-body">
      <h2><a href="/first" aria-described-by="desc-a-card">The First Test Card</a</h2>
      <p>Test content here in this card. Test content here in this card. Test content here in this card. Test content here in this card.</p>
   </div>
   <div class="card-footer">
      <span class="btn btn-primary" aria-hidden="true" id="desc-a-card">Read more</span>
   </div>
</div>

Features of note:

• The title contains the link.
• JS extend the clickable area to cover the full dimensions of the card.
• The text is still selectable.
• Additional links within the content still work.
• The "Read more" link is just a visual prompt. It is hidden from the accessibility tree and isn't even a real link.
• The styles give the entire card a focus state to help clarify the way it functions.