Method C: The Phark Method

< Day Day Up >

One of the great things about the Web is that people are constantly improving techniques, looking for alternate ways to accomplish the same goals. In August 2003, developer Mike Rundle came up with his own variation on image replacement (http://phark.typepad.com/phark/2003/08/accessible_imag.html), using the unique idea of assigning a large, negative text-indent value to the text he intended to hide. The text is still there on screen—but just so far out of range that it'll never be seen even on the largest of monitors. Rather ingenious.

The Markup and CSS

Like Method B, the Phark Method (named for the moniker of Mike's site) also sidesteps the need for extra markup in order to work properly. Our heading markup would be the following:

 <h1 >The Phark Method</h1>

The extra <span> element that was necessary for FIR isn't needed for this method. Let's take a look at the simplistic CSS that's used to hide the text and replace it with the image shown in Figure 14-5.

Figure 14-5: phark.gif, the 26-pixel-tall image we'll use for replacement

 #phark {   height: 26px;   text-indent: -5000px;   background: url(phark.gif) no-repeat;   }

As you can see, Method C is by far the simplest and doesn't need for the Box Model Hack or extraneous markup. By indenting the text an absurd amount of negative pixels, the text is pushed out of the way and unseen by the user.

Like with Method B, users of screen-reading software should be able to still read the text just fine using this method, which is certainly an improvement.

Still Not Perfect

While the Phark Method is the easiest to implement, it still fails in the "images off/CSS on" scenario. As rare an occurrence as that sounds, it still means that at the time of this writing, there is no perfect solution just yet.

Let's recap each of the three methods presented, noting their differences.

< Day Day Up >