Is it accessible to wrap a whole 'card' in an <a> tag?

Question

In my website I have 'cards', each one with many elements (image, text, dates, etc.). It's kind of like a tweet card in twitter:

I want the whole card to be clickable (which should be a link to another page).

At the moment, I have the top level element as an <a> tag and use aria-label and aria-describedby so it's read correctly by a screen reader.

<a
   href="/some-url"
   aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
   aria-describedby="description-1"
   >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/1983_Honda_Interceptor_VF750F.jpg/300px-1983_Honda_Interceptor_VF750F.jpg" alt="Honda VFR picture" height="100" />

  <p>Honda VFR</p>

  <div>
    <p>$10,000</p>
    <p>Kms: 10,000</p>
    <p>Date listed: yesterday</p>
    <p id="description-1">This bike is pretty great and a lot of other details go here</p>
  </div>
</a>

I considered doing aria-labelledby="title-id-1 price-id-1 distance-id-1" but I found it read better by explicitly creating a summary sentence.

I am relying on the fact that the screen reader will ignore everything inside the <a> tag (if I have an aria-label). Is this a safe bet?

This all seems a bit strange, but I would like to know if there's any specific reason that I shouldn't do this.

Unfortunately the design dictates that the whole card is clickable, so just making only specific parts links is not an option.

The other option is to use a div, aria roles like this and JavaScript, which feels like a step in the wrong direction.

Any help is much appreciated.

jsbin: https://output.jsbin.com/kusawu

Answer 1

Is it accessible to wrap a whole 'card' in an tag?

"Accessibility" is a wild concept.

For instance, if you have low vision and use a screenreader to help you read the text inside your "card". Having the aria-label may prevent the screenreader from reading the content you can partly read. Which means : you know there's a content, you can quite read it, but your screenreader reads another thing different.

That being said, within your examples, it seems that it improves accessibility : user have access to the same content, but in plain english, which is appreciable.

So I don't see it as a problem.