title: Is it accessible to wrap a whole 'card' in an <a> tag?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/Ex0e1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ex0e1.png" alt="enter image description here"></a></p>
  
  <p>I want the whole card to be clickable (which should be a link to another page).</p>
  
  <p>At the moment, I have the top level element as an <code>&lt;a&gt;</code> tag and use <code>aria-label</code> and <code>aria-describedby</code> so it's read correctly by a screen reader.</p>
  
  <pre><code>&lt;a
     href="/some-url"
     aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
     aria-describedby="description-1"
     &gt;
    &lt;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" /&gt;
  
    &lt;p&gt;Honda VFR&lt;/p&gt;
  
    &lt;div&gt;
      &lt;p&gt;$10,000&lt;/p&gt;
      &lt;p&gt;Kms: 10,000&lt;/p&gt;
      &lt;p&gt;Date listed: yesterday&lt;/p&gt;
      &lt;p id="description-1"&gt;This bike is pretty great and a lot of other details go here&lt;/p&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I considered doing <code>aria-labelledby="title-id-1 price-id-1 distance-id-1"</code> but I found it read better by explicitly creating a summary sentence.</p>
  
  <p>I am relying on the fact that the screen reader will ignore everything inside the <code>&lt;a&gt;</code> tag (if I have an <code>aria-label</code>). Is this a safe bet?</p>
  
  <p>This all <em>seems</em> a bit strange, but I would like to know if there's any specific reason that I shouldn't do this.</p>
  
  <p>Unfortunately the design dictates that the whole card is clickable, so just making only specific parts links is not an option.</p>
  
  <p>The other option is to use a div, <a href="https://www.w3.org/TR/wai-aria-practices/examples/link/link.html" rel="noreferrer">aria roles like this</a> and JavaScript, which feels like a step in the wrong direction.</p>
  
  <p>Any help is much appreciated.</p>
  
  <p>jsbin: <a href="https://output.jsbin.com/kusawu" rel="noreferrer">https://output.jsbin.com/kusawu</a></p>