• Home
• News
• HTML 5: Accessibility / UI Design Breakthrough

Wednesday 19th August 2009

HTML 5: <a> Tags: A Great Accessibility Breakthrough

W3C have finally managed to sort out the existing shortcomings of the <a> element in the new HTML 5 specification. Here's what the new spec says:

"The <a> element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link"

What shortcomings?

In HTML 4.01, if you wanted to mark up a list style nav with a heading, thumbnail, short description and "More..." link, you might use markup like this:

<ul>
  <li>
    <h3><a href="link.html">Heading</a></h3>
    <a href="link.html"><img src="image.png" alt="Alt text" /></a>
    <p>Short description <a href="link.html">More</a></p>
  </li>
</ul>

There are several problems with the above:

1. We have several links to the same content, all with different captions.
2. One of the links is directly adjacent to another with no seperating text (the image and heading link).
3. One of the links is on an image with potentially misleading alt text.
4. One of the links is on the word "More" with no additional descriptive text about the destination of the link.
5. The short description is not a link: only specific areas of the list entry are actually clickable.

The HTML 5 <a> Solution

In HTML 5, we can markup the link as follows:

<ul>
  <li>
    <a href="link.html">
      <h3>Heading</h3>
      <img src="image.png" alt="Alt text" />
      <p>Short description <span>More</span></p>
    </a>
  </li>
</ul>

As you can see: not only is this code shorter and cleaner, its also makes the entire list element into a clickable link. this makes a lot more sense from a user interface point of view, and makes the code much more usable for those using assistive technology (such as screen readers) to access this code.