Graphic headers

[Daz]

If I was designing a site and wanted to make it look as pretty as possible, I might substitute a graphic for a <h1> tag. I was thinking, might it be better to use javascript to write out the graphic and then use the noscript tag for a text alternative <h1>?

[Jeremy W.]

Accessibility wise, wouldn't it be the same to have the "alt" tag properly used? I haven't used readers and such myself, but I believe they specify what the pictures are, and read off graphics (if the user so desires)...

J

[Daz]

Yes that's true, the screen reader will read out the alt tag but I was thinking for better markup wouldn't it be better to provide a noscript alternative? Immediately the screen reader would recognise it as a heading and might include in a page summary of all of the headings.

[redux]

Jeremy, yes, you can use the alt attribute, but you lose the structural information conveyed by a "true" header.
daz, i believe (but don't quote me on it, as i'll need to verify this and am swamped just now) that you can actually have something like

<h1><img src='.......' alt='blah' /></h1>

to cover your bases...the alt gives the information, and the enclosing header tags give it structural meaning.

[Jeremy W.]

Fair enough, thanks for the info

J

[redux]

no problem, mate

btw: the reason you should strive to keep structural info such as headers is that screenreaders such as JAWS have special functions that can display the structure of a document...e.g JAWS has a function to list all "proper" headers...

[Daz]

yep it'll say page has blah blah headers...

redux I'll like to see confirmation of that one, having the graphic enclosed in <h1> tags

[redux]

ok...confirmed.
http://dev.salford.ac.uk/test.html validates http://validator.w3.org/check?uri=ht...uk%2Ftest.html

haven't got JAWS at the ready on this machine...but does it recognise it as a header ?

[Daz]

well I can't test it at the moment but I do know Jaws recognises text between <h1> tags as headers. It summarises every page and there might be an option to read all the headers out as I know some screen readers do that.

[redux]

just got on the other machine with JAWS, and am happy to confirm that it does indeed recognise the image as a heading, and lists it in the heading overview (INSERT+F6) with its alt attribute.
case solved...

[Daz]

Excellent, there's another way to improve our coding Thanks Redux.