Alt Tag Solution For Images Defined as Background Images in CSS

Hi All,

I am working on a client site where most of the images are defined in CSS as background images. I need to add Alt Tag for these images. I have tried googling for a solution but whatever i got is we can't define Alt Tag for background images. Also i found other ways to define text for these image"
1. a {
background: url('image.png') no-repeat center center transparent;
display: block;
text-indent: -9999em;
overflow: hidden;
}

And write the HTML as:

<a href="/">Welcome</a>

2. USe some <p> /<span> tag to give text

But I would like to know whether the text defined by these ways possess same value as an ALT tag for an image and is there really no way to define ALT Tag for background images.

 

Background images don't have the alt property, so you can't add alternate text to the background image. If you use an <img> tag for the link you can use its alt property.

 

If the image is presentation, it belongs in the CSS and shouldn't have/need/want alt text.

If the image is content, and therein needs alt text, it has NO BUSINESS in the CSS either.

Though it SOUNDS like what you are talking about is image replacement -- the text-indent:-9999em crap being the antithesis of accessibility since one of the whole reasons to use image replacements is that when images are disabled, the user gets text. Sliding it off the screen doesn't do that.

Which is why I'd suggest if you are doing CSS sprites on a menu, you use a dummy span, apo it over the text, and put the image on that erasing the text. Images off the text will show instead.

That or don't use images for text -- which is the far saner approach... Though it SOUNDS like you're stuck working on the re-re idiotic BS approach of web development where they've handed you some goof assed picture of a website, likely slapped together by someone who knows nothing of accessibility, the limitations of the medium, dynamic layout, responsive layout, and instead is only concerned with what it happens to look like on their screen. If so, you truly have my pity.

You say this site already exists though -- so... just why are you trying to add alt text to them?

I think we'd have to see it before we could say more about it.