Fallback if browsers have images turned off

Question

HTML

There is a link in HTML with text, on which, via CSS, a background image was hung (the text was removed + fixed sizes).

From the point of view of semantics, it is correct to do so, and not through the img tag, since the icon itself does not carry a semantic load. And the bot or search engine will see the understandable text of the link, and not the picture that is incomprehensible to it. Naturally, the element has a title attribute that complements (explains) the icon.

But the trouble is, if the user has images turned off, he will not see anything. Even a square. Even the background color. In the case of the img tag, alt text will appear, even a piece (16x16 pixel icon, a lot of text will not fit).

The most annoying thing in this situation is that I understand that there is no solution: either do it through alt, or set the background color too (forget about translucent icons), or some other hack.

Maybe somehow you can track whether images are included in the browser, and use additional. CSS, if not (set a solid color for example, and the user will understand by the title tag).

Answers like "Why?" or "Do via img alt" are not accepted: semantics and accessibility in the main place.

Answer 1

Try to dig in the direction of <object>, this is what this tag was invented for:

<a href="http://google.com">
    <object data='http://www.google.com/images/srpr/logo3w.png' type="image/png">
        Turn on images!
    </object>
</a>

I checked: in FF, when images are turned off, it shows text, but not in Chrome (although if the picture returns 404, then the text will show), I did not test it in others. Perhaps this is a chrome bug, because according to the specification :

If the user agent is not able to render the object for whatever reason (configured not to, lack of resources, wrong architecture, etc.), it must try to render its contents.

Answer 2

If something is hidden behind an icon, it is most likely non-critical. ;-)
And for normal sized elements (such as logos), you can embed an image as generated CSS content:

.example {overflow: hidden; width: 100px; height: 30px; }
.example:before {content: url(example.png); display: block; font-size: 0; line-height: 0; }

The dimensions of the image and the element must match. Then, if images are enabled, the text is moved by the image outside the element, and if disabled, the generated content has zero height, and the text is visible.

Answer 3

And if if a layer with text is placed under it all through allowable absolute positioning? write what you want there - if the pictures are turned off, they will see this text.

Answer 4

var image = $('img'); // jquery
var imgObj = new Image();
imgObj.src = image.attr('src');
if ( imgObj.width == 0 || imbObj.height == 0 )
{
  // TODO
}

At least Opera with images disabled shows 0 for these attributes. And in chrome if it was not possible to load the image. In other browsers, I don't know how to disable it :)
ps or the js option is also not suitable?