websitewriters.co.za

The "Right" way to use an image as your header title

Posted by Raoul Snyman on March 7, 2006 on 1:46 pm | In Accessibility |

You can use css (cascaded stylesheets) to make your site more accessible to everyone, including those with sight problems.

For instance:
Your site uses a nice large image as it’s title logo. While it’s cool for those who can see, what about those who can’t see? They use screen readers, which basically read out what’s on the screen. The only problem is that when a screen reader comes to an image, it just says “image”. Bummer… now where’s your web site title?

Here’s a little trick I thought of to overcome that particular problem, but one which could be used elsewhere.
create a div with a heading:

<div id="header">
  <h1>mp3taxi.com</h1>
</div>

Then, in your css file, you set your h1 to not display, and your div to show the image, like so:

#header
{
  background: url(../images/main_logo.png) no-repeat top left;
}

#header h1
{
  display: none;
}

So then what happens is that your image shows in css-enabled browsers, and in other browsers, you see the heading, “mp3taxi.com” in nice big letters.
Now, if you go to the site I’ve just been using as an example, you’ll see that there’s another background image that stretches across the whole of that header section, as well as the title header… I simply added a span in, and rearranged my css slightly… see below:

<div id="header">
  <h1><span>mp3taxi.com<span/></h1>
</div>

#header
{
  background: #ffff00 url(../images/headerbg.png) top left repeat-x;
  color: #000000;
  height: 88px;
}

#header h1
{
  margin: 0;
  padding: 0;
  height: 88px;
  width: 281px;
  background: url(../images/main_logo.png) no-repeat top left;
  float: left;
  color: #000000;
}

#header h1 span
{
  display: none;
}

with css:

without css:

happy coding!