Accessibility gone Mental written 11 years ago

The Table Tag

Accessibility is becoming an industry within itself in the web design business. Any web developer worth his salt will go out of his way to ensure that the pages he creates are deemed “accessible”. Mostly this includes turning lists of stuff into lists, proper ordering within the HTML source, and the staple of removing tables for layout.

Unfortunately some developers seem to take this too far, removing all trace of the table element altogether. I saw the other day that someone had replaced a 100x100 grid of numbers with a group of nested unordered lists. This to me just seemed like silliness, and an exercise in proving that he could style a list to look like a table.

However I saw the other day something that quite took the cake in terms of accessibility gone mental, and can be found at this bit-tech CPU cooler review.

The offending part is the table of results, which looks very pretty when rendered in the browser with styles, however with the styles removed looks like this:

0 10 20 30 40 50 60 70 Temperature (?C)

Which as you can see, makes no sense what so ever. It essentially takes all the information and juggles it up so that it’s in an unusable form.

Instead, consider the following HTML table for representing the data:

Cooler name Results
Fan name 1 CPU Temp 123
Ambient Temp 456
Delta T 789
Fan name 2 CPU Temp 123
Ambient Temp 456
Delta T 789
Fan name 3 CPU Temp 123
Ambient Temp 456
Delta T 789
Fan name 4 CPU Temp 123
Ambient Temp 456
Delta T 789

Legend

This is not only more accessible, it makes perfect sense when viewed with just the default stylesheet. It also makes sense in terms of the “semantic web”, as in it’s tabular data, represented within a table.

It’s also easily styled to look identical to the original table:

Cooler name Results
Fan name 1 CPU Temp
123
Ambient Temp
456
Delta T
789
Fan name 2 CPU Temp
123
Ambient Temp
456
Delta T
789
Fan name 3 CPU Temp
123
Ambient Temp
456
Delta T
789
Fan name 4 CPU Temp
123
Ambient Temp
456
Delta T
789

legend

So here the table is rendered to look like a bar graph, and with some more tweaking would look exactly as the graph in the article. The table retains all of its accessible properties, whilst still looking as we want it to!

The moral of the story? Tables have uses too, don’t shun them without a good reason.

← previous entry | next entry → Sun 27th May 2007 - 12:08 | 1 comment | tagged with Web Musings

 Comments 1 comment made

Simon’s GravatarSimon 4 weeks later

It seems as if the people here are not only not using the table tag for layout, they’re not using it for tables either!

Of course, the day the not-using-tables-for-layout revoloution comes, I will most certainly be the first against the wall…

Leave a reply

Name: displayed next to your comment
Email: will not be displayed
URL: to link back to your site
Comments: Markdown syntax allowed

Notes on leaving replies: