Tableless Joomla

Tagged in Untagged 
 

A client emailed me recently with a concern about tables in Joomla Joomla:

"It has become clear to me that despite claims to the contrary, Content Management Systems do NOT meet accessibility requirements"

This is not really a complete picture of how Joomla handles accessibility. I have made the point a few times on the Joomla forums that th elink between accessibility and tables is not a direct one.

The issue is accessibility and valid XHTML. It is a common idea that having a site that uses table is not accessible or valid. This however is not true, you can make a page with as many tables as you want and it will pass both W3C validity and accessibility tests. The question of tables is a suggestion rather than a strict standard:

"It has been advocated many times that tables shouldn't be use in HTML for layout purposes" (http://www.w3.org/2002/03/csslayout-howto)

Obviously, just because the standards only suggest not using tables for layout, does not mean that we should ignore it. A designer's goal should always be to design their site to standards. An example of this not happening and tables and spacer gifs being used for layout was Disney UK's recent redesign, notice carefully that the google summary thought the website was "about" spacer images. www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.html

To return to Joomla, a design is Dependant on the designer. To make a rough estimate of web designers in general, I would say that 80-90% are still using multiple tables and spacer images to achieve their layout. Even "big name" web sites are doing this, as seen in the above example. So, its designers that make Joomla Joomla templates (the files that controls presentation), so it would be safe to assume that the same percentage are using the same technique.

Enter advanced CSS. This complicated tool allows the designer, and thus Joomla to produce layouts that don't use tables for layout. Through various settings within the CMS, its possible to get the number of tables being used down to 2-3. For example: http://demotemplates.joomlashack.com/simplicity/ (use firefox developer toolbar: outline tables). Compare that to a site that really *is* using tables for layout like http://www.cnn.com/ (about 14 by my count)

A lot of fuss is made about these last few tables, and I would argue that it is a red herring. If your text is fully resizable for people with poor vision, and your site can be navigated with no javascript, and you don't use flash for navigation either, and your site loads fast for people with dialup, and you have used alt titles for all your images, and your pages cane be adjusted for different widths, and your content is source ordered. If you have achieved all these (which our designs do), THEN you can worry about those last few tables. Until then, all of these factors are far bigger blocks to universal accessibility.

The other side of the coin is CSS is certainly not perfect. These sophisticated CSS layouts are especially fragile, and easily break. One of the gentleman on the thread that Corey pointed out touted this site as table free:
http://www.24ix.de/

Unfortunately once the browser expands beyond about 1300px, the right column starts to overlap the footer. Great for accessibility, bad for the 99%+ of viewers that are not using a screen reader.

Again to summarize, I really don't think that completely tableless=accessibility. With all these things, it is a situation of shades of gray rather than black and white.

I wrote a longer articles about this issue here: http://www.compassdesigns.net/resources/articles/usabilityaccessibilityw3cseo/

Trackback(0)
Comments (9)add comment

John Baxter said:

I use..
a8e joomla which strips out lots of tables. I know you can use the switches in the template for modules and other bits with menus but i still find that using a8e is the best way to use joomla. My sites are tableless, i even go through 3pd components that i use and strip out their tables. Makes updates a joy though.....

bluesaze said:

Web Designer/Developer
Good article Barry, Though I am still rather unhappy about the Tables being there in Joomla 1.5. We could have easily dropped them. And this never ending problem could have been solved. I know its perfectly possible to develop Valid Joomla sites with those tables still inside but its really annoying when some Client with half baked knowledege about Accessibility and Validation starts annoying you about those tables and you have to sit and explain the whole thing to them. Anyway if you dont mind from now on I'll be pointing them towards your article. He He

On the other hand why the heck would people browse at 1300px. I know web designer are moving towards 1024px and dropping support for 800px. but people with High resolution rarely Browse in a mazimised mode. The whole point of a larger resolution is to get more work space.

Barrie North said:

Resolutions
@Bluesaze
According to my information, still about 10-20% of users browse at 800. Personally, I try and set up max widths at 1024 for reasons as you describe.
This is another article about accessibility and valid/tables I did that I point people to:

abrabara said:

other CMS\'s have eliminated the use of tables
I'm trying to make a Joomla website without tables, but it seems that, no matter how hard one tries, you can't eliminate them completely. However, from what I've been able to see, with other CMS's, namely Drupal and Postnuke, it is possible to add countless modules without having to use tables.

J soft said:

...
Thanks
vere Nice

ares said:

...
It is not always good idea to use DIVs only in your template .

Erkslab said:

...
My site has been created to Tableless Joomla

Erkslab said:

...
My site has been created to Tableless Joomla

John said:

...
W3C validity and accessibility tests aren't smart enough to know that a table is being used for layout instead of tabular data. Additional human checks are required to ensure compliance and those checks will conclude that table based layouts are not compliant with accessibility standards and are not semantically correct.

Write comment

busy