0845 838 7448 
The Leahy / Langridge Techniqe for Image Replacement
Although the Fahrner Image Replacement technique has been widely used by many web designers already for replacing image with text, it has been pointed out that this method poses an accessibility problem because most screen readers that exists today ignores the text hidden with the display: none style in the span container. In fact that presence of a meaningless tag to hide the text also raises some questions to those designers who are preaching and practicing semantically - correct methods of writing html.
One of the well - known alternatives to FIR is a technique independently developed by Seamus Leahy Stuart Langridge, thus more popularly known as the Leahy/Langridge technique.
The most notable problem cited in the FIR method by some designers who really go after semantically-pure html code is that the tag used to hide the text to be replaced has no semantic meaning whatsoever. So what Leahy and Langridge thought of is to just move the text out of the way so that it will not be displayed rather than explicitly hiding it (which also hides it from screen readers).
Below is a sample code using this method;
CSS:
<style type="text/css">
<--
h1#LLReplace {
padding: 35px 0 0 0;
overflow: hidden;
background-image: url("hello_world.gif");
background-repeat: no-repeat;
height: 0px !important; /* for most browsers */
height /**/:35px; /* for IE5.5's bad box model */
}
</style>
HTML:
<h1 id="LLReplace ">Hello world!</h1>
The technique is to set the height of the text’s tag (in this case h1) to zero and provide a padding where the image will be expected to appear. By setting the actual content box to zero and overflow to hidden, the text is hidden out of the sight but is still there when a screen reader reads the page.
Similar Posts:
No comments yet.