So, we were having a chat at work today about image replacement, using images to replace headings text for the puposes of prettified / designed fonts. We ended up with no options save images in pages with alt/title tags, or trying to persuade designers to use livetext with font declarations.
So we went through options of :
Moving the text off the page (or making it VERY small) and having the background image of the cell be the image.
Problem - users with images turned off but quite capable of css.
Associated images backgrounding z-indexed over text
Problem - assuming the size was appropriate, we had then problems of semi transparent images being used. and equally issues with increased font sizes showing out from underneath.
javascript replacement
Problem - still image turned off problem, but maybe with some clever detection for this going on. But quite complex all the same.
additional - not forgetting if you hide text with css or have it as display:none it will be hidden from screenreaders and we loose one of our major aims of trying to get our code semantic in the first place. And also if we are hiding it from screenreaders there is an increased chance of hiding it from search engines, and then we're really back to stage one.
oh and I should link to a far more eloquent discussion on this or three, mezzoblue's image replacement, stopdesign's replace text
any ideas anyone?
Leave a comment