Combine adjacent links pointing to the same page

When several links pointing to the same page are grouped together, they should be combined in a single tag <a>.

Here is an example of coding for an image, a title, a date and an introduction serving as a link to the details of a news item that we do not recommend:

<a href="…">
   <img src="people-in-the-snow.jpg" alt="Winter weather just getting started across Canada" />
</a>
<h2><a href="…">Winter weather just getting started across Canada</a></h2>
<p class="date">
   <a href="…">12/12/2016</a>
</p>
<p class="intro">
   <a href="…">Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</a>
</p>

And here is a more accessible coding:

<a href="…">
   <img src="people-in-the-snow.jpg" alt="" />
   <h2>Winter weather just getting started across Canada</h2>
   <p class="date">12/12/2016</p>
   <p class="intro">Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</p>
</a>

Note

This recommendation also applies to <button> tags.

Here is an example of coding of a grouped icon and text serving as an Add bookmark button that we do not recommend:

<button>
   <img src="heart.png" alt="Add to my bookmarks" />
</button>
<button>Add to my bookmarks</button>

And here is a more accessible coding:

<button>
   <img src="heart.png" alt="" />
   Add to my bookmarks
</button>

Tip

It’s also possible to put the link on a single element, then extend the click zone via CSS to allow the mouse to activate the link by clicking anywhere on the news card.

Example:

<div class="block">
   <img src="people-in-the-snow.jpg" alt="" />
   <h2><a href="…">Winter weather just getting started across Canada</a></h2>
   <p class="date">12/12/2016</p>
   <p class="intro">Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</p>
</div>

Related CSS code:

.block a[href]::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

When using this technique, make sure that the element carrying the link is sufficiently explicit, otherwise complete it by using the aria-label or title attribute.

Comments

Add a comment

All fields are mandatory.

Updates

20 August 2024
Added technique for extending the click zone.

Back to top