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>

<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>

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

Comments

Updates

Back to top