Don’t Display None
I used to always use “display:none” for hiding elements via css. Not anymore …
For example, when replacing heading text with an image I would do something like this:
:x:
<h1 id="theHeading">The Heading</h1>
:c:
h1#theHeading {
width:200px;
height:40px;
background:url(path_to_image);
}
h1#theHeading span {
display:none;
}
Cool, that works. But, wait … what about vision-impared users using screen readers? They won’t see the heading image (nor can they hear the alt description since it’s a background image) and they won’t hear the heading text. Hmmm. Hardly ideal.
Instead
Instead of using the abolve css, simply do something like this instead:
h1#theHeading span {
position:absolute;
width:100px;
margin-left:-5000px;
}
The exact dimensions don’t really matter. You just need some width and enough negative margin to push if off the viewing area. Because it’s positioned absolutely, it will not take up any space. Now it’s hidden, but it’s still there.
Just as invisible, infinitely more accessible. Sweet.
February 26th, 2006 at 10:57 pm
Awesome tip! I can see myself using this a lot. Most techniques like this have some sort of con, but I don’t really see one here. I suppose you argue that the Span isn’t exactly semantic. . . regardless, this seems to be one of the better replacement strategies I’ve come across.
February 27th, 2006 at 1:59 pm
Thierry Koblenz has addressed issues of image (re)placement quite extensively. His ideas seem quite practical.
March 2nd, 2006 at 5:02 pm
sIFR [http://www.mikeindustries.com/sifr/] is a neat Flash & JavaScript-based text replacement technique.
The nice thing about this technique is the text is replaced after page load with a properly sized Flash-based object which impliments any font you embed in the sIFR Flash movie! This is handy for picky clients who want to use a special font for every heading, especially on a database-driven site.
March 3rd, 2006 at 11:48 am
Brian: Yes, I think you refer to the Cadillac of image replacement. Thierry links to it on his article, too.
It’s come a long way since I saw the brilliant Shaun Inman’s original proposal. It may be beyond my limited technical capabilities though – I seem to suffer Flashophobia.
Question: Thierry’s method works well in print. What is your experience with sIFR when printed? The demo on Mike’s site looks lousy on my setup! :-(
March 1st, 2007 at 4:21 am
thank you for content…very
your god..
September 5th, 2007 at 1:46 am
i would hope screen readers ignore my CSS
March 30th, 2008 at 1:10 pm
It seems like the best solution for this would be to go with the first strategy. Ideally, a screen reader should have it’s own css. I think you can specify that with “media=’reader’”. Not sure, though.
Good solution otherwise.
December 8th, 2009 at 11:46 am
Ha! That’s great. That helped me get around toggling the visibility for a Flash piece that needed to maintain state. I could turn display to none and back, but that cleared the movie’s state. This gets around that beautifully. Thanks!
December 8th, 2009 at 12:05 pm
As a follow up, IE has a redraw issue with this method and Flash. You can quickly fix this by setting the CSS display property for the container for your SWF to inline and then immediately back to block.