Ticks Revisited

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:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s