In a previous post I covered how we tackled the insertion of ticks (otherwise known as checks). Using conditional comments to feed a character entity to modern browsers while feeding a wingding character to IE6 was workable, but terribly unwieldy.
We forgot one very basic point: The tick is a graphic symbol and not a piece of content in itself.
Most other sites we tried to refer to simply dropped a graphic in the table cell. Using the appropriate alt text, it is somewhat accessible. Adobe has a great implementation which we have decided to emulate.
Inserting “Yes” into the applicable table cells makes it extremely semantic. Throwing in a class “yes” allows us to remove the text and replace it with a graphic via CSS.
<td class="yes">Yes</td>
The CSS:
td.yes {
text-indent:-9999px;
background:url(where/your/graphic/is) no-repeat center;
}
