Background-Image Buttons/Links with Large Offset

[Edgewalker81]

Lately I've discovered the technique of creating pretty looking buttons and links by using fixed dimensions with nice background images and giving the elements some enormous (-9999) text-indent to hide the text that keeps the box itself visible.

 

I've noticed this method used in many places, but it seems a bit like a band-aid solution.  Is there a better way to achieve this effect?  I don't like to feel like I'm working around the standards instead of working with them.

[bronzemonkey]

Yeah there is a "better" way. Using text-indent to put the text off-screen means that is someone is visiting the site with images turned off, they cannot see any text! If you're prepared to introduce a non-semantic element then there is an image replacement technique that is completely accessible because it places the image over the text:

 

<h2>Hello world<span></span></h2>

h2 {position:relative; height:50px; width:200px; overflow:hidden;}
h2 span {position:absolute; top:0; left:0; width:100%; height:100%; background:url() no-repeat 0 0;}

 

The span element gets pulled over the containing element and given a background image. If you need to do this for a link, then make sure the anchor is displayed as a block and that {cursor:pointer;} is added to the span declarations. This technique is widely used and considered the most accessible. Has many advantages and the non-semantic element is not exactly a deal breaker.

 

Depending on what browser support you require, you might also want to check out "Bob Image Replacement" - http://neal.venditto.org/articles/12/bir - when the website is back up. It uses z-index and relies on more semantic html.