4/27/2024 0 Comments Simple css background image swap![]() ![]() It works, but using display: none will hide the text from screen readers (and presumably search bots, not good). The premise here is to use a span to wrap the text inside the header and use that span to hide the text. Much has been written about this including an A List Apart article about it’s problems with accessibility as well as an article from David Shea defending it. More information: This technique is referred to as FIR or “ Fahrner Image Replacement“. Does not achieve true separation from content and design. Having to add markup for the sole purpose of image replacement is not ideal. Defaulting to text here is considered a pass. Represents browsing with both images turned off and no stylesheets applied. Most techniques default to regular web text here which isn’t exactly a fail, but since images may still be turned on, I don’t consider it a pass either. Represents browsing with no stylesheets being applied. Displaying text only here is considered a pass. Since most of these techniques go to various lengths to hide text, when the images are turned off that means that nothing is displayed which ain’t good. This is rare but a possibility (folks with bandwidth concerns…) This is the most difficult test. Represents browsing with regular stylesheets applied but images turned off. All techniques should pass this test, since that’s the whole point. Represents browsers in their normal states. The report card consists of five major categories: Also note that I tested all these FF2, Opera 9, Safari 3, and IE 6 and they all behaved identically (hard to believe, I know). It is still very interesting to see all the thought and problem solving that was put into this. Because of that, most of these techniques still hold up today. Web design in the early 2000’s was a lot different than it is now, but there was still much thought being put into accessibility. Note that some of these techniques are very old. I’m calling it the CSS Image Replacement Museum. I’ve created a new page that now covers more image replacement techniques, including the more recent Scott Kellum Method and the HTML5BP Method.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |