Site image header

The header of your site is probably one of the most important items, especially on the index. Therefore it should be placed inside a header tag. Most of time, <h1> or <h2>.

If you want an image to function as your header, it becomes a bit harder to have an accessible site. Screen-readers don’t read images or when images are disabled, no header is shown. Plus, which is maybe most important, searchengines don’t read images as text, so no indexation.

There are a few solutions to it, like Fahrner Image Replacement (FIR), which uses display: none; to hide the text over the background image. This solution is not really that a good solution, because when images are disabled, you still don’t have a header. Some screen-readers also don’t read the text.

Another solution, is Accessible Image Replacement, which uses negative indenting of the text, so it’s not displayed. Screen-readers work fine with this, but when images are disables, you still don’t get any text. Although it is a better solution than FIR.

Yet another method, is Gilder Image Transform technique. This solution uses an extra empty tag that gets the header image as its background and is then put above the text. This is probably the best solution, since screen-readers read the text, which is also displayed when disabling images. The only disadvantages are that is doesn’t work with transparent images and that you need an extra empty tag.

The solution I personally use on this site, is just to place an image in the header and give it an alternate text, like this:

<h1><img src="..." alt="Your header text that's in your image" /></ h1>

None of the solutions pointed out here is really 100% good. Just try to avoid the FIR method.

Of couse, if you have another solution, feel free to share it.

2 Responses to “Site image header”.

  1. Thanks for listing my text-indent method 😉 I hope ya use it!

  2. I haven’t found a really good solution to this problem yet, but your solution is certainly one of the better options.

Comments are closed.