mezzoblue

Revised Image Replacement

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them. Please note that this page is no longer being maintained.

Requirements: the replacement must solve the screen reader problem, and it must address the "images off, css on" problem. It is also hoped that a solution will be found that reduces the need for empty <span> elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.

2008 Update: what does Google think of these methods?

Classic FIR

Using Doug Bowman's original tutorial, we surround the text with empty spans to hide it with display: none; Issues: most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under "images off, css on" scenarios, semantically meaningless <span>s necessary.

Revised Image Replacement

code:
<h3 id="header"> <span>Revised Image Replacement</span> </h3> /* css */ #header { px; px; "singlepixel">Single-pixel <img> Replacement</h2> <p>Radu Darvas proposed adding a one-pixel, transparent GIF image to the header to restore <code>alt</code> text. <strong>Issues:</strong> an extra meaningless element is added to the page.</p> <h3 style="px; px; "> <img alt="spacer" src="/img/spacer.gif"> <span style="display: none;">Revised Image Replacement</span> </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> <img src="/img/spacer.gif"> Radu Method</h2> <p>Radu has also conceived a method involving margin positioning to hide the text. Similar in theory to the Phark Method below, Radu's method works in IE5. <strong>Issues:</strong> doesn't solve css on/images off problem.</p> <h3 style=""> Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { "leahylangridge">Leahy/Langridge Method</h2> <p>Seamus Leahy and Stuart Langridge independently discovered a method which allows dropping of the <code>span</code> and, theoretically (although this isn't confirmed) restores accessibility thanks to <code>overflow: hidden;</code> — <strong>Issues:</strong> nothing shows up under "images off, css on" scenarios, box model hack required to work in IE5.</p> <h3 style="padding: 25px 0 0 0; overflow: hidden; "> Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { padding: 25px 0 0 0; overflow: hidden; "phark">Phark Method</h2> <p>Greatly simplifying Leahy/Langridge, Mike Rundle of Phark offered a solution that uses text-indent to hide the text. This is confirmed to work in JAWS, solving the accessibility problem. <strong>Issues:</strong> nothing shows up under "images off, css on" scenarios, doesn't work in IE5.</p> <h3 style="px; px; text-indent: -100em; overflow: hidden; "> Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { text-indent: -100em; overflow: hidden; "phark2">Phark Revisited</h2> <p>Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5. <strong>Issues</strong>: doesn't solve images off/css on.</p> <h3 style="px; px; text-indent: -5000px; "> Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { text-indent: -5000px; "dwyer">Dwyer Method</h2> <p>From Leon Dwyer comes a twist on Classic FIR. Works in seemingly everything known at the present time, including screenreaders. <strong>Issues</strong>: doesn't solve images off/css on, still requires extra <code>span</code>.</p> <h3 style=""> <span style="; ; overflow: hidden; display: block;">Revised Image Replacement</span> </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> <span>Revised Image Replacement</span> </h3> /* css */ #header { px; px; "gilderlevin">Gilder/Levin Method</h2> <p>Tom Gilder and Levin Alexander proposed a further variation that theoretically fixes the accessibility problems (verification needed, but it's almost assured this works in JAWS et. al), and allows the text to show up even if images are turned off. <strong>Issues:</strong> extra empty <code>span</code>, transparent images don't hide text.</p> <p>(note: header duplicated to illustrate transparency problem)</p> <h3 style="px; px; position: relative;"> <span style=""></span>Revised Image Replacement </h3> <h3 style="px; px; position: relative;"> <span style=""></span>Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> <span></span>Revised Image Replacement </h3> /* css */ #header { px; px; position: relative; } #header span { "lindsay">Lindsay Method</h2> <p>Russ Weakley writes that by setting your fonts to a tiny, 1px size and matching fore- and background-colours, you don't even need to hide the text. <strong>Issues:</strong> doesn't solve images off/CSS on, doesn't work on anything but flat-colour backgrounds.</p> <h3 style=""> Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { "shea">Shea Enhancement</h2> <p>And finally, no matter which method you use, you end up losing <code>alt</code> text tooltips on hover that you and your users might be used to seeing on images. Technically, you shouldn't rely on this anyway, since <code>title</code> is far more appropriate for tool-tips. So by adding a <code>title</code> back to your header, you can restore these little hover effects to your site. (This technique uses the Leahy/Langridge technique as a base, and only adds the <code>title</code> attribute)</p> <h3 style="px; px; position: relative;" title="Revised Image Replacement"> <span style=""></span>Revised Image Replacement </h3> <p>code:<br /> <textarea rows="10" cols="45"> <h3 id="header" title="Revised Image Replacement"> <span></span>Revised Image Replacement </h3> /* css */ #header { px; px; position: relative; } #header span { "sidebar"><div> <span></span> <div> <label for="search">Search this site:</label> </div> <div> <h2>About This Site</h2> <p>mezzoblue is a weblog about design, the web, and some other things. Written by Dave Shea, a designer from Vancouver, Canada. More</p> </div> <div> <h2>Chalkwork Icons</h2> <img alt="spacer" src="/img/spacer.gif"> <p>Over 2,500 royalty-free icons, carefully designed to cover some of the most common needs of web and software designers. Free for personal use. More</p> </div> </div></div> </div> <hr /><div id="footer"><div><div><div> <div></div><div></div> <p>© Copyright 2001–2014, Dave Shea <span>| screen version | mobile | tv</span> </p> <ul> <li>Home</li> <li>Archives</li> <li>Icons</li> <li>About</li> <li>Contact</li> </ul> </div></div></div></div> </div></div></div> </div> <div style="position:absolute; z-index:98; top:0px; width:100%; padding-top:2px; background-color:#fafafa; border-bottom: 1px solid #bbb; -webkit-box-shadow: 0 4px 4px -2px #ccc; -moz-box-shadow: 0 4px 4px -2px #ccc; box-shadow: 0 4px 4px -2px #ccc;" class="container" id="h9xt2"> <div class="row"> <div class="col-md-3"> <form name="src" id="src" action="/index.php" method="post"> <div id="ricerca" class="ricerca"> <table style="margin: 9px 0 9px 0;"> <tr> <td> <a href="https://search.gipoco.com" title="free experimental uncensored search engine - home page"> <img src="/img/logo_mini.png" alt="free experimental uncensored search engine" class="logo"> </a> </td><td> <input type="button" id="srcbtn" value="🔍" alias-label="open search form" style="margin:5px 5px 5px 16px; color:#000;" onclick="document.getElementById('srcform').style.display='block';document.getElementById('srcbtn').style.display='none'"> </td><td> <div style="margin:4px 4px 4px 4px"> <a href="https://stats.gipoco.com" title="view page-rank and visitors counter and free website stats"> <script type="text/javascript"> /* <![CDATA[ */ document.write('<img src="https://stats.gipoco.com/stat.php?c00=188&c01=188&c02=188&c30=170&c20=255&c21=0&l=&m=&refr=&x='+screen.width+'&y='+screen.height+'" alt="visitors counter and page-rank checker and web-site statistics" style="margin-left:9px; width:70px; height:26px; border: 1px solid #fff" />'); /* ]]> */ </script> </a> </div> </td> </tr> </table> <table style="margin: 9px 0 9px 0; display:none" id="srcform"> <tr> <td> SEARCH: </td> <td> <input type="text" name="txt" aria-label="type something to search" size="11" style="margin-left:5px; color:#000;"> <input type="submit" value="🔍" alias-label="press to search" style="margin-left:5px; color:#000;"> </td> </tr> </table> </div> </form> </div> <div class="col-md-3"> <div style="margin-top:3px; font-size:16px; padding-bottom:15px;"> Related searches: <br/><a href="https://search.gipoco.com/search/header/" title="header" style="margin:4px;"><b> header </b></a> <a href="https://search.gipoco.com/search/revised/" title="revised" style="margin:4px;"><b> revised </b></a> <a href="https://search.gipoco.com/search/method/" title="method" style="margin:4px;"><b> method </b></a> <a href="https://search.gipoco.com/search/problem/" title="problem" style="margin:4px;"><b> problem </b></a> <a href="https://search.gipoco.com/search/technique/" title="technique" style="margin:4px;"><b> technique </b></a> </div> </div> <div class="col-md-5"> <div class="hidden-xs" style="margin-top:10px; font-size:13px;"> <strong>gipoco.com</strong> is neither affiliated with the authors of this page or responsible <br> for its contents. This is a safe-cache copy of the original web site. </div> <div class="visible-xs" style="margin-top:0; font-size:16px; margin-bottom:8px;"> <strong>gipoco.com</strong> is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site. </div> </div> <div class="col-md-1"> </div> </div> </div> <style> body{font-size:16px;line-height:1.5;padding-top:240px;} table td{font-size:16px;line-height:1.5;} </style> </div> </body> </html>