Making elements clickable and still accessible

If you have an element like a “card” on your webpage, and you want the whole element to be clickable, you might be tempted to wrap the link around the element like this:

<a href="" aria-label="link to google">
  <div class="card">
    <p>A popular search engine.</p>

However, this solution is not ideal for screen readers because the aria-label may prevent the screen reader from reading the contents of the element. Rather than wrapping anchor tags around elements, you can use CSS to make the whole element clickable:

<div class="card">
    <a href="" aria-label="link to google">Google</a>
  <p>A popular search engine.</p>
.card a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;