Using non-replaced IMG headings whilst keeping structural meaning

Fahrner Image Replacement and its even more accessible and semantically clean variants are certainly a huge step in the right direction when it comes to taking the separation of content and presentation almost to its very limits. However, for those who are not prepared to completely abdicate the use of the humble <img> tag for pretty headings, but who want to still maintain their documents’ structure semantically correct, here’s an intermediate solution: wrap the image in the correct heading tag.

Example: if you’re using a graphic as a heading, you could do far worse than writing it like so:

<h1><img src="blah.jpg" width="100" height="100" alt="I am a heading"></h1>

Of course this does not have the “purity” of markup of the CSS solutions, but it’s certainly better than merely sticking an <img> tag in your documents when it is more than “just an image”…and it can be used for more than just headings…

Filed under: Accessibility
Posted by Patrick H. Lauke on Friday, August 8, 2003

No comments yet.

Sorry, the comment form is closed at this time.