Text Behind Navigation Images

Ralph was helping me(thank you) with the HTML/CSS for creating text behind navigation images so if you were to turn images off, the text links would still be there in the same position.

I was discussing this with a developer buddy and he was questioning the use of this text behind nav images technique. He feels it is uneeded extra work when you could just use indent.

So it got me thinking. What are the true benefits/purpose of text behind images? Is it for users who turn off images when they browse? Is it any more SEO friendly than using the indent feature?

Words of wisdom?

thanks!

There is no perfect method, but hiding the text behind the image is the most accessible version so far. Some people browse with images turned off (to save bandwidth, say on mobiles) and it’s annoying to have lots of text missing. (I turn off images on the mobile while travelling, so I see this a lot.)

Yes as Ralph said it is the most accessible method around.

Negative text-indent moves the text off screen so if you have a broken or missing image (or the user has turned images off) then the user gets nothing at all. Also if the element is a link (as in navigation elements) you can end up with the focus outline stretching off the side of the page into infinity and looking very strange (turning off the outline is not a good idea either as you will thwart keyboard users.)

The text behind the image method works in any combination of css on/off or images on/off and the user will still get content (and so will search engines and screen readers) (apart from a bug in opera mobile that Ralph pointed out a while ago). The main drawback of the text behind the image is that you can’t easily use transparent images because the text would be visible.

There is also a minor point that as you are hiding nothing off screen then it can’t be seen as an attempt to fool search engines although it has been stated that you should not be penalised for using properties in the normal way anyway.

Thanks for the explanations - makes sense now.

With the transparent images sometimes you have to be creative with using text properties - I was able to once get some text perfectly behind the transparent .png image I was using.

It seems you can instead give the <a> overflow: hidden without any side effects (so far as I know).

That’s likely to fail, though. Different browsers may position the text slightly differently, and if someone has their font sized bumped up, the text will also be in a different position.

Yes I think that’s working these days. IIRC there used to be a few bugs with overflow and outline but there are no problems in current browsers (that I can remember).