Indenting background image placeholder text to remove from view area

Question

Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:

1. Create some placeholder text inside the anchor element like this:

   <a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>

2. Change the element CSS to indent this text outside the viewing window:

   .logoWithText { background-image: logoWithText; width = 200px; height = 100px; display: inline-block; text-indent: -9999px; }

The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.

But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.

Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.

Answer 1

Why not

Html

<a href="http://yoururl.com" class="logo--text">
    <img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>

CSS

.logo--text{ width:200px; height:100px; }