How to replace HTML image buttons with text link?

Question

Hi,

I'd like to make my webpage highly compatible; so when a user turns off all styles when browsing my sites, I want them to be able to find everything in text. The problem is that some of my webpages use image buttons like the following:

<a href="next.html"><img src="images/next_button.png"></a>

This is a problem since when I visit a page with such a button (in no styles mode), I get the button image instead of a text link. How can I substitute the image button with a text link in such a case? Thanks!

Answer 1

use the alt attribute?

<img src="images/next_button.png" alt="next" />

Answer 2

The solution is to use only texts in the HTML and stylize them with images in the css:

HTML:

<a href="next.html" class="next-button"><span>Next</span></a>

CSS:

.next-button
{
    display: inline-block;
    width: 100px; /* image width */
    height: 20px; /* image height */
    background: url("../images/next_button.png")
}

.next-button span
{
    display: none;
}

Edit: Hide text when showing background using an additional span tag

Answer 3

Actually, the HTML spec requires that you have an ALT attribute on your img tags like so:

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a>

Browsers, such as text mode browsers, screen readers, and others which don't display the image will automatically substitute the ALT text for the image.

Answer 4

When it comes to your markup, it is fine in terms of accessibility apart from missing the required alt attribute. Running this in any HTML validator would have alerted you of this.

It would also be worth adding a rel="next" attribute to the a tag, to indicate that it is a relational link to the next page:

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a>

Answer 5

As stated, a proper alt attribute would be the easy fix.

I like the idea of using CSS for buttons whenever possible (thereby styling actual text). If you're using jQuery, look at jQuery UI's new button widget that does just that.

You could also use an image replacement technique where you keep actual text on the page and then either cover the text with an image or push the text aside via CSS. In both cases the actual text would be there for accessibility/SEO purposes and the image would merely be a background image to make it look pretty.