CODEWITHSUNDEEP
htmlcss
stephenmurdoch
stephenmurdoch

Reputation: 34623

Is it OK to have an empty anchor tag?

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?

Upvotes: 12

Views: 23227

Answers (5)

JP DeVries
JP DeVries

Reputation: 4117

Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.

Upvotes: 1

Kneel-Before-ZOD
Kneel-Before-ZOD

Reputation: 4221

Use &nbsp; as the text, and you are good.

Upvotes: 2

user694833
user694833

Reputation:

It is perfectly valid, but if you want, you can put a blank space inside: &nbsp;

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201728

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.

Upvotes: 9

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174997

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

Upvotes: 21

Related Questions