[uf-discuss] making img machine-readable

[Steve Ganz]

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.