Rob Wilkerson

Generally speaking, I do everything I can to avoid images in content. Simple text is easier, more maintainable, more accessible and, for added incentive, I'm a spectacularly inept designer. Predictably, though, there's always an exception. When an exception arises and I have to use an image, I still want the markup to be semantic and accessible.

The technique I use isn't revolutionary or even new, but I don't see it used very much where I work, so I thought I'd write it down. Who knows? Maybe it's less common than I've been assuming it is.

Let's pretend, for example, that I have a logo for robwilkerson.org that I want to use in lieu of the text that appears now (work with me here). Since it's the name of my site, it's also the most important text on any given page of the site - a perfect candidate for h1 status. Except I need to use an image to get the branding right. Hmmm...

Fortunately, it's not so hard to do both using semantic markup and a background image. Using this example, my markup would look like this:

<h1><a href="/"><span>robwilkerson.org</span></a></h1>

h1 because it's important text. a because I want to be able to click on the site name and get back to the site homepage. span because, well, you'll see. Now that I have my text, it's time to apply the logo image. I do this in my stylesheet:

h1 {
   background: url(/path/to/my/logo.png) top left no-repeat;
   height: 57px;
}
   h1 a {
      display: block;
      height: 100%;
   }
      h1 a span {
         visibility: hidden;
      }

My logo image is applied as a non-repeating background on the h1 element. To make this work, the element's height must be at least equal to the height of the logo. The nested anchor element is given a block display so that its height can be set. Given this styling, the entire logo will be clickable. Lastly, the inner span is hidden so that only the logo is visible. If I hid either the anchor or the heading then the logo wouldn't be clickable.

One important detail is the use of the visibility property rather than the display property to hide the text. Many, maybe all, screen readers will not read text whose display is set to none. Most, and again maybe all, will read text that is simply hidden.

Stylish, accessible and searchable.