The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Header: h1 or alt?

I'm helping an artist friend with their website, and I've backed myself into a corner. They have multiple pages and a header div at the top of each one.

For each page's header, they want to design a really fancy image in Photoshop instead of creating one with HTML and CSS (they want the font to be really fancy, too, so we can't just lay text over an image).

Each page has a different header, e.g. "Welcome to the Home Page," "News and Upcoming Events," etc.

Here's the problem: If the person who views the website has images enabled, I don't want them to see the corresponding h1 (because the h1 just repeats the text in the image). If the person doesn't have images enabled, I do want the h1 to appear.

I could set the image's "alt" text to nothing, but the h1's CSS has "display:none". A viewer could end up with an empty header.

I could use the "alt" attribute instead of the h1, but I use h2,3,etc. later in the page, so I'd be skipping (and it doesn't seem appropriate to use h1 anywhere but at the top of each document). Also, do text-only browsers and screen-readers render h1 in such a fashion that an "alt" header can't replicate? I don't know, so I assume they do.

Is there a graceful solution to this awkward situation that keeps the Photoshop headers?

If you're inserting the header image using a IMG element, you can put the IMG inside the H1 and give the IMG good alt text. Users with images will get the graphical header as the H1. Users without images will get the alt text as the H1.

If you'd prefer to use a CSS background image (rather than a IMG) to insert the header, you can use one of many CSS image replacement techniques to replace the H1 text with an image.

I use technique #8 on this list, and it has worked out well. I recommend it for the best accessibility all the way around. The only flaw it has, as the site mentions, is that transparent images will show the text below. Use with discretion.

If you're concerned about the extra markup, you can use Javascript to pipe it in for you. That way it will be ignored by other user agents such as screen readers or robots.

Personally, I wouldn't do it that way. First of all, I don't know how search engines would react to a header tag with only image content - would it pull the alt as the header? I don't know.

Also you'd still have a full image that might be way out of context layout-wise when CSS is disabled, if the logo happens to contain any background or other layout elements beyond the logo text. Also depending on transparencies and colors, it might be very hard to read also.

Hmmm, they do index alt text of images. If they are in a header, then it's text in a header. So, in principle it should work.

I tend to use Gilder-Levin as well because alt text is pretty impossible to style. It's always pretty tiny on my screen and my browser never tells me there's an image there, no border or "broken image" icon or anything.

For what it's worth, I just did a random quick test of how browsers handle alternate text of a missing image inside an <h1> tag.

The browsers I have available are FF3, IE6 & 7, Chrome and Safari 3.2 (all on my PC).

Firefox is the only one that actually acknowledges that the image is missing and replaces it with the alternate text. It renders the text just like a normal <h1>. The rest of the browsers show some form of broken image graphic.

That said, I think it's really bad practice that some of the major browser user agents don't replace broken images with their alternate text, since that's one of the benefits of the alt text to begin with. Granted it's not really related to things like screen readers or people with images turned off, but it's still handy to have.

Also based on what I've researched about Google's alt text actions, it more than likely would consider the alt text of an image inside an <h1> tag as the actual H1 content, giving it the priority it deserves. However I still would recommend other methods based on other accessibility issues.