What is the proper way to label a link with a background image?

Question

If I am using a background image in an anchor tag as a menu, what is the best way to provide a text label equivalent for screen readers and SEO?

Assume the HTML is like this:

<h2><a class='menuItem1'></a></h2>

And the CSS is like this

.menuItem1 {
    display:block;
    width:100px;
    height:25px;
    background-image:url(../Images.menuitem1.png);
}

Should I use title="..." as well at alt="..." on the A tag? My test using the Lynx browser seems to only show a label if there is text in the A tag as well.

Answer 1

alt only exists on the <img> tag. If your image is actually a meaningful part of the web page, and not just stylistic, then you can just use an actual <img> tag with an alt attribute.

Alternatively, you could put the actual text inside the <a> tag, and hide it using CSS. Since display: none will also hide it from screen readers, you would need to instead hide it with something like text-indent:-9999px;

Answer 2

The alt attribute does not exist on the a tag. Thus, you should use title. Alternatively, you could create an actual image with the img tag and set the alt attribute for that.

Answer 3

Try this:

<h2><a class='menuItem1'>Text to be only seen by screen readers</a></h2>

.menuItem1 {
  text-indent:-9999px;
}