Block Links Are a Pain (and Maybe Just a Bad Idea)

As our comprehensive guide explains, while you can wrap any HTML segment within an <a href=""></a> tag (let's call this a "block link"), linking an entire content "Card" to create a large clickable area isn't ideal.

<a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e">
  <div>
    <h2 id="Card">Card</h2>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Block Links Are a Pain (and Maybe Just a Bad Idea) "><p>Content</p>
  </div>
</a>

Adrian Roselli highlights a significant accessibility issue: wrapping the entire block in a link causes screen readers to announce the entire content as a single, lengthy link, significantly impacting usability.

Therefore, avoid this approach. A better alternative is to link only the header:

<div>
  <h2 id="a-href-https-www-php-cn-link-bc-ceec-e-cd-a-a-b-e-Article-a"><a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e">Article</a></h2>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Block Links Are a Pain (and Maybe Just a Bad Idea) "><p>Content</p>
</div>

Expanding the clickable area to encompass the entire card can be achieved using CSS:

.card {
  position: relative;
}
.card h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This addresses the accessibility problem, but introduces another: text selection becomes cumbersome. A simple click initiates the link, preventing natural text selection within the card. While not entirely blocking selection, it's significantly less user-friendly.

A JavaScript solution to detect text selection before triggering the link is conceivable, but feels like an overly complex and potentially unreliable workaround.

Refer to Heydon's insightful discussion on "The redundant click event" in his Cards article for further context.

In conclusion, block links present considerable challenges. While a perfect solution remains elusive, the drawbacks outweigh the benefits in most scenarios. We encourage alternative approaches to achieve large clickable areas.

The above is the detailed content of Block Links Are a Pain (and Maybe Just a Bad Idea). For more information, please follow other related articles on the PHP Chinese website!