Combine successive elements being links (or buttons) with the same destination as one single link (or one button)

When several successive buttons or links have the same function, they must be considered as one single link or button (using a single <a> or <button> tag).

Example 1

Here is an example of non recommended coding for an icon and text that serve together as a button to add the page to my bookmarks:

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

Here is an example of more accessible coding for the same icon and text that serve together as a button to add the page to my bookmarks:

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

Example 2

Here is an example of incorrect coding for an image, a title, a date and an introduction serving as a link to the details of a news item:

<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 finally, more accessible coding of the same image, title, date and introduction serving as a link to the details of a news item:

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

Comments

Add a comment

Required fields are marked *.

Back to top