Do not create empty links

Whenever you put a link on a web page, make sure that it has text content. This may seem incredibly obvious, but it is actually not all that uncommon to find links that do not contain any text at all.

These links usually come in one of the following shapes:

<a href="http://example.com/" accesskey="0"></a>
<a href="http://example.com/"><img src="image.gif" alt=""></a>

In the first case, the link is invisible to everybody, but can be triggered through a keyboard shortcut if you happen to know it and it doesn’t conflict with the shortcuts in your browser or OS. In some browsers you can tab to these links, but you get no visual feedback at all unless you look very carefully at the status bar while tabbing through the page.

In the second case, the link’s purpose may be obvious to sighted users with images enabled in their browser. However, because the image in the link has a null alt text, if you can’t see the image there is no information at all about the link.

Here is how to make these links usable:

<a href="http://example.com/" accesskey="0">Link text</a>
<a href="http://example.com/"><img src="image.gif" alt="Link text"></a>

Again, always make sure that all links you create have text content.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on April 15, 2009 in Quick Tips, Usability, Accessibility