1) 9 techniques For CSS Image Replacement
s a quick review, CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.
2) Using Background Image to Replace Text
Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right?
3) Accesible Image Replacement
Now, I do not have a screen reader, nor have I ever used one, but I believe that I have found a better image replacement technique that actually works for people with screen reading software. The goal is to keep the text “visible” to the browser, but hidden to the user. That is to say, the text must not be able to be seen by the person viewing the website, but still has to be there.
he various successors to the original Fahrner Image Replacement method have explored many different techniques. It seems that no stone has been left unturned by designers attempting to enhance the method. To achieve this goal they have tried all sorts of CSS attributes
5) Choose an Accessible Image Replacement Technique
What surprises me a little is that I still see people using image-based techniques that do not work at all for people browsing with images off. One of the tests I perform when checking sites for accessibility and universality is to simply turn off images in my web browser. In some cases that makes text disappear because an image replacement has been used that does not account for people with CSS on and images off.
All content © 2009 - 2013 by Acuity Designs, Part of Digital Marketing: Pyrspective