Accessibility gone Mental written 3 years ago

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:

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

• CPU Temp
• Ambient Temp
• Delta T(CPU)

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

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