Is it OK to have an empty anchor tag?

Question

I know that I can do the following if I want to turn an image into a click-able link:

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a>

But I would prefer to use a CSS background image so that I can have a hover state:

<a class="twitter" href="http://twitter.com/username"></a>

# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}

This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.

I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?

Answer 1

It's valid, but it's best if you did put something in there and used something like

font-size: 0;

to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.

Here's a great article on the subject

Answer 2

It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.

If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.