5 ms·

that works, but probably a better technique is to put in a normal h1 and assign the image to background of that element. then use text-indent to thow the displa

that works, but probably a better technique is to put in a normal h1 and assign the image to background of that element. then use text-indent to thow the display of the text off screen (as is commonly done). like this: 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.

pavel_lishin 15y ago
Why is this technique better?
- true_religion 15y ago
  Presumably screen readers won't read text under a display: none; but they will read text that just happens to be indented oddly.
- mnutt 15y ago
  The only thing that comes to mind is if you turn off css, you'll end up with just the text header, rather than both the image header and the text header.
- blauwbilgorgel 15y ago
  It isn't better. 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 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.
  - Isofarro 15y ago
    "Negative text-indent can cause accessibility problems. Scenario "CSS on-images off" will see no content at all." What disability is overcome by leaving CSS on and turning images off?
    - blauwbilgorgel 15y ago
      To me, accessibility is all about providing proper access to information. 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 http://webaim.org/discussion/mail_thread?thread=3785 A little more cheeky: http://www.arespritesaccessible.net/explain.php 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.
      - Isofarro 15y ago
        "CSS on/Images off is an unlikely scenario, but it is a possible scenario (also consider the possibility of images not loading for any reason). If I were in 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?" 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.
  - alanh 15y ago
    > Negative text-indent can cause accessibility problems. Scenario "CSS on-images off" will see no content at all. WebAIM recommends this technique, for showing content to (only) screen readers. http://webaim.org/techniques/css/invisiblecontent/#techniques http://webaim.org/techniques/css/invisiblecontent/#technique...
JonnieCache 15y ago
In these days of 30" monitors with ridiculous resolutions, you may want to use a lot more than 999em.
- alanh 15y ago
  Yep, or alternatively simply set `overflow: hidden` on that element, and it won’t matter what screen size the user has.

pavel_lishin 15y ago

Why is this technique better?

true_religion 15y ago
Presumably screen readers won't read text under a display: none; but they will read text that just happens to be indented oddly.
mnutt 15y ago
The only thing that comes to mind is if you turn off css, you'll end up with just the text header, rather than both the image header and the text header.
blauwbilgorgel 15y ago
It isn't better. 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 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.
- Isofarro 15y ago
  "Negative text-indent can cause accessibility problems. Scenario "CSS on-images off" will see no content at all." What disability is overcome by leaving CSS on and turning images off?
  - blauwbilgorgel 15y ago
    To me, accessibility is all about providing proper access to information. 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 http://webaim.org/discussion/mail_thread?thread=3785 A little more cheeky: http://www.arespritesaccessible.net/explain.php 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.
    - Isofarro 15y ago
      "CSS on/Images off is an unlikely scenario, but it is a possible scenario (also consider the possibility of images not loading for any reason). If I were in 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?" 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.
- alanh 15y ago
  > Negative text-indent can cause accessibility problems. Scenario "CSS on-images off" will see no content at all. WebAIM recommends this technique, for showing content to (only) screen readers. http://webaim.org/techniques/css/invisiblecontent/#techniques http://webaim.org/techniques/css/invisiblecontent/#technique...

JonnieCache 15y ago

In these days of 30" monitors with ridiculous resolutions, you may want to use a lot more than 999em.

alanh 15y ago
Yep, or alternatively simply set `overflow: hidden` on that element, and it won’t matter what screen size the user has.