Accessible submit button with background image - html

Question

I have a form submit button, using that has a background image containing a 'pretty' styled version of the 'value' text.
I was hiding the html value text using:
text-indent: -9000px;
font-size: 0;
However, with image turned off (for accessibility testing) there is obviously no button text displayed.
Removing the above brings the value text back, but it overlays on top of the image.
How can I have the background image on top of the value text?
By first guess is some combination of <button><span></span></button> ?

Answer 1

What about using an img tag inside the button, and giving that an alt attribute:
HTML:
<button class="button">
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>
CSS:
.button {
background: transparent;
border: 1px solid Black;
}

Answer 2

You could do something like this: <button>Your BTN Text<span class="img"> </span></button>
and in CSS:
button { position: relative;}
button span {
position: absolute;
text-indent: -9000px;
top:0;
left: 0;
right:0;
bottom:0;
background: url(yourimage.whatever);
}
so if us disable the images the text is still visible under the absolute element.

Answer 3

Make as value="" (empty):
<input type='submit' name="csubmit" value="" />
If you have multiple submit buttons and validating based on button clicked leave value with empty space:
<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />

Answer 4

Set the button's value to empty:
<input type="submit" value="" />
and you can remove the text-indent from your CSS.
This will obviously display no text whatsoever, but when you disable the CSS background, the button will still be visible.