[uf-discuss] making img machine-readable

Steve Ganz steve at ganz.name
Wed Jul 11 19:05:58 PDT 2007

On Wednesday, July 11, 2007 Guillaume Lebleu wrote:

> Let's say a web page uses an image such as a checkmark or 
> green/red light to represent a boolean, for instance the 
> availability/status of a product or a program.
> What would be the suggested best practice to make this 
> human-readable content machine-readable as well?
> I was thinking about the following options:
> <img class="status" src="../red.gif" title="available"/>, 
> which is similar to the abbr pattern, but saves the addition 
> of a wrapping abbr element.
> or using a CSS-based text by image replacement technique as 
> described in http://www.stopdesign.com/articles/replace_text/ 
> to replace a <span> with an image.

Personally, I would go with image replacement. I try to avoid inline images
unless they are communicating something that text alone cannot. In your
example, the green light/red light is presentational in nature and a design
choice which is best handled with CSS.

More information about the microformats-discuss mailing list