[uf-discuss] making img machine-readable
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