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="https://www.google.com/" aria-label="link to google">
<div class="card">
<h2>Google</h2>
<p>A popular search engine.</p>
</div>
</a>
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">
<h2>
<a href="https://www.google.com/" aria-label="link to google">Google</a>
</h2>
<p>A popular search engine.</p>
</div>
.card a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}