h1 { background-image: url(foo.png); text-indent: -999em; }
of course, you then have to give dimensions to the h1 to show the whole picture, but i leave that as an exercise for the reader.
h1 { background-image: url(foo.png); text-indent: -999em; }
of course, you then have to give dimensions to the h1 to show the whole picture, but i leave that as an exercise for the reader.
It is better to just do:
<h1><img src="" alt="" width="" height="" /></h1>
Negative text-indent can cause accessibility problems. Scenario "CSS on-images off" will see no content at all.You can solve that by using a <span> overlay, with the image set as a background:
<h1>Heading<span class="overlay"></span></h1>
Then with the scenario "CSS on-Images off" people can read the underlying text.But you are still hiding stuff for search engines, and they might not all like that.
Source for "don't go hiding stuff with CSS like -9999 pixels on the left, if you can just use an image alt, that is what it is for" this Matt Cutts video from 2009:
http://www.youtube.com/watch?v=fBLvn_WkDJ4#t=0m13s
BTW: The OP is confusing. Like Paul Irish said: There is a "display: none" and a "visibility: hidden". A "display: hidden" isn't valid CSS.
WebAIM recommends this technique, for showing content to (only) screen readers. http://webaim.org/techniques/css/invisiblecontent/#technique...
What disability is overcome by leaving CSS on and turning images off?
It doesn't matter to me if it is because a screenreader, a Lynx browser, a preference, or a no-script plug-in. All that matters to me is my users can access my content on a broad range of devices.
CSS on/Images off is an unlikely scenario, but it is a possible scenario (also consider the possibility of images not loading for whatever reason). If I were a user stuck in that scenario, I'd say: "I can't access core parts of this website". For a website developer, you could call that an accessibility problem, no?
Relevant thread on WebAIM: http://webaim.org/discussion/mail_thread?thread=3785 A little more cheeky: http://www.arespritesaccessible.net/explain.php Wikipedia: Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities.
No. I'd call it a connection/network issue. The universality consideration (which is what you are really advocating here) then points to progressive enhancement -- defensive design -- as a technique to mitigate the failure to load a page's supplementary assets.