[e.boal]

Hi all

If this question has been answered elsewhere here, please let me know - I have had a look around though and can't find one!

Simple question really - I want the name of my website to be an <h1> tag. I want to replace that <h1> tag with the logo.

What is the best method of image replacement to achieve this?

[Starbright]

I'd offset the text in the div by -9999px and set the image as a background for the div.

Not sure if that's the best way though, but it is common.

[e.boal]

If images are disabled, will the screen reader still read the <h1>? It should do as -9999px is only a positioning thing, right?

[e.boal]

Found this:

jQuery Image Replacement

Thinking this looks like a good option. Any thoughts?

[Bill Posters]

Originally Posted by e.boal

If images are disabled, will the screen reader still read the <h1>? It should do as -9999px is only a positioning thing, right?

Screen readers will, but regular desktop browser users won't see what the text.

The technique your describing is otherwise known as the Phark Revisited method. Whilst it remains accessible to screen readers and other AT users, it becomes inaccessible to sighted users in the CSS on/images off scenario.
If the images being brought in have area of transparency (to allow the background to show through), then this is the best of a bad bunch of options.

If the images being brought in have no areas of transparency, the most accessible of the common techniques is Gilder/Levin - as it remains accessible to screen readers as well as in the CSS on/images off scenario.


mezzoblue § Testing Grounds

[Bill Posters]

Originally Posted by e.boal

Found this:

jQuery Image Replacement

Thinking this looks like a good option. Any thoughts?

Unless the images are created dynamically, that technique seems pointless.
The images are being created by the site designer (rather than dynamically by the site itself), so why not simply use them in the markup in the first place?

If images are disabled, the alt text will be used.
Alt text is not significantly less accessible than regular text. (Some browsers support the styling of alt text using CSS, which would mean that alt text is identically accessible compared to regular text.)

From what I can tell, there's absolutely no benefit to using js/jQ to dynamically swap in images which already exist within the site directories.

[Agricola]

I have to agree with Bill, just seems pointless, yet another clever, but pointless geeky solution. Another point to consider is that the whole Javascript thing is completely useless if the user also has Javascript disabled. Always go for a CSS solution over Javascript. I can never understand why people use javascript to swap background images for navigation anchors, when you can do the same with CSS.

with the JQ image replacement, I have to also point out that this method is not exactly in keeping with the ethos of keeping content and layout seperate. A fancy heading graphic is not vital either. Having a graphic between a heading tag is totally inappropriate and blatant miss use of the heading tags.

I prefer to use the span method as demonstrated in the last of Bills links, assign an image to a span, set to 100%, covers the text up. This is also useful for links , just set the span inside anchors, and hey presto you have a fancy graphic, that is being kept separate from content and layout etc, which is also completely clickable.

Anyway, you decide what you go for, but please do not touch javascript for this solution.

[msn90]

Usually the first heading tag that your web browser and users encounters is the H1 tag and theres one on every page, the H1 tag semantically has the most grunt and is the premier tag you should use for the main heading for that web page.

Notice I said “Web Page”, as this is where the problem with using a H1 tag and putting your logo within it lies. Every page on your website has different content and I believe the H1 tag should support this.

For instance lets say you run a design agency called Dave’s Design and you have a web design services page. To identify to users and to the web browsers a fair reflection of what the content is on that page it makes sense that the main heading (H1) should say “web design services”.

But if the H1 tag was used as a logo, as is often the case, then the web design services pages H1 tag would be Daves Design, actually in this scenario the H1 tag on every page of the Dave’s Design website would be H1, which does not reflect all the different content on each individual web page across the website.

Therefore it is my belief that we should simply use a anchor tag with the logo within that anchor and leave the H1 tag to do its semantic duty as the foremost representative of the web pages content.

Logo’s are always a vector or bitmap image and so I believe semantically should be represented that way, to say that an image is a heading to me just seems plain stupid.