Image Replacement Technique

Why must Webmasters jump through hoops to work with graphic <h> elements? Why do we have all these hacks available for displaying text vs image when using images for heading elements?

There is an interesting topic at WebmasterWorld that discusses the accessibility challenges that a Professional Webmaster is faced with when using images for <h> elements instead of actual text.

Most of you who read me know that I follow standards and protocol. I don't like to take any chances and if there is a question pertaining to the structure of a document that I'm not sure about, I have a complete SEO Guide for quick answers to all of my structural SEO questions.

Back to Previous

Table of Contents

  1. Image Replacement using the alt Attribute
  2. Document Traversal
  3. User Agents and Images
  4. The Bot and Browsing with Images Turned Off
  5. Put it to the test...
  6. More Information on <h>, <img> and alt=""
  7. Image Replacement Methods

Image Replacement using the alt Attribute

Let's talk about this whole image replacement technique. Why does it need to be done? Is it possibly a "fruitless effort" as they say? I believe so, read more to find out why I personally think using the alt attribute is best practice in this instance.

Note: Content is "equivalent" to other content when both fulfill essentially the same function or purpose upon presentation to the user.

Back to Previous

Document Traversal

Spider While developing our URI Valet service, which has become a popular destination for the tech savvy Webmaster, we had to build a platform that replicated the browser and the bot in how they traverse and read information in web documents. Our URI Valet has been an ongoing development project for over three years now so we've got some experience in working with document traversal.

We also perform extensive validation routines, semantic extraction, and other various quality tests to insure that our documents are up to snuff. During these processes, we've acquired a wealth of information on how documents are handled by indexing entities such as crawlers, robots, spiders, etc.

Back to Previous

User Agents and Images

User Agents are blind, they are also deaf. They cannot see images nor can they hear media. As a Professional Webmaster, you have various methods available to present this visual and audible content alternatively, e.g. the alt attribute for an alternate representation of a header image.

All images MUST have an alt attribute assigned to them. It could be null (empty) but, it MUST be present to properly process the image from an accessibility standpoint. All images SHOULD also have widths and heights assigned to them.

This page utilizes images for <h> elements. I wrote the article, made a final decision on my document structure, took a screenshot then extracted and placed the images as headings. I've assigned appropriate alternative text for each of the <h> elements that are represented as images in this document. There is no image replacement technique being utilized, just basic HTML using the elements and attributes that are available for accessibility. In this test, we are focusing on the <h> and <img> elements using the alt attribute to replace the heading text that appears visually within the heading images.

Note: Content is "equivalent" to other content when both fulfill essentially the same function or purpose upon presentation to the user.

Back to Previous

The Bot and Browsing with Images Turned Off

Disable ImagesIn the above WebmasterWorld topic, I made this comment...

I'm going to go out on a limb and say that the bot sees the alt attribute the same as text if the actual text is not present. And, if the text is present in this hiding technique, that there is a replication taking place that "may" or "may not" be a good thing. And, that jumping through all these hoops to get this just right is a fruitless effort as they say. Just drop the image into the <h> with appropriate alt attribute and be done with it. The bot sees the same thing as if you were browsing your site with images off anyway.

How would an indexer interpret this page? My personal findings are that the alt attribute may be equal to text and it is all relevant to the element the image resides in which is the <h> element in this instance.

Here's an Outline of this document from the Semantic Data Extractor. Remember, this document utilizes images for all <h> elements.

Outline of the document 1 [D]

Note: We're using the [D] Element for demonstration purposes only. It has been deprecated in later versions of HTML.

And here is what our HTML 4 SEO document Outline looks like that uses plain text for headings. Note the only difference is the absence of square brackets [Heading Text] which indicate alternate content. The Outline of the document is unaffected by the use of images for headings with alt attributes vs. plain text headings.

Outline of the document 2 [D]

Note: We're using the [D] Element for demonstration purposes only. It has been deprecated in later versions of HTML.

Back to Previous

Put it to the test...

2009-02-10 - As we stated above, the <h> elements on this page utilize images. We've matched our existing style sheets to provide a visual that is somewhat deceiving to the untrained eye. While viewing this document in Firefox with images turned off, you can hardly tell the difference between images and text.

Note: Content is "equivalent" to other content when both fulfill essentially the same function or purpose upon presentation to the user.

2009-02-16 Update - It appears that I may have overlooked the one major drawback of the HTML Method; you cannot select the alternative text with your cursor. Not having the alternative text available for selecting would prevent many from relying on this method for certain applications.

Back to Previous

More Information on <h>, <img> and alt=""

  1. 2009-02-08 - Accessibility and <h1> Images
  2. 2009-01-26 - HTML 4 SEO Best Practices in HTML Authoring
  3. 2008-12-24 - Jukka "Yucca" Korpela: Guidelines on ALT texts in IMG elements
  4. 2006-12-14 - Google Webmaster Central Blog - Using Images
  5. W3C Quality Assurance - Use the alt attribute to describe the function of each visual
  6. WCAG 2.0 - Guideline 1.1 Text Alternatives
  7. ATAG 1.0 - Alternative Information (Also: Equivalent Alternative)
  8. 2003-11-21 - A List Apart: Articles: JavaScript Image Replacement
  9. mezzoblue Testing Grounds: Image Replacement Techniques

    Image Replacement Methods

    1. Classic FIR
    2. Single Pixel <img> Replacement
    3. Radu Method
    4. Leahy/Langridge Method
    5. Phark Method
    6. Dwyer Method
    7. Gilder/Levin Method
    8. Lindsay Method
    9. Shea Enhancement
    10. 1995-11-01 - HTML Method using the alt="" Attribute
Back to Previous


SEO Consultants Directory