CSS vs Tables - Is the tide turning?

[dang65]

As such it would run into problems over various bits of disability legislation

So, I guess the disability legislation comes down like a ton of bricks on those readers which don't read tables properly, right?

[matt99]

I would always use tables to display tabular data, that is their purpose. If you keep the table simple and use the correct markup, screen readers I have tested have no problem with reading the data.

Layout - divs
Data - Tables

[TheBigYinJames]

Layout - divs
Data - Tables

I've no problem using divs for layout, the problem comes when you're editing someone else's page and they've relied on a standard width and/or known content widths to keep their flowing divs in place. You add something, change a width, and the whole thing slides off into the distance.

Easily fixed by adding a container div like it should have been done in the first place, or some % widths on the existing divs.

[NickFitz]

So, I guess the disability legislation comes down like a ton of bricks on those readers which don't read tables properly, right?

The readers will read tables properly. It's the improper use of tables that's the issue.

If a table of data is present and marked up correctly, a screen reader will interpret the tabular markup so as to read out the data in a meaningful way, for example by prepending the column and row headers before a datum - e.g. a five-day weather forecast might be read as "table six rows four columns Wednesday max temp 23 degrees, min temp 12 degrees, wind 10mph..." where "Wednesday" is the content of the <th> at the start of the row, and "max temp" and so forth are the contents of the <th> at the top of the column.

If you study the relevant part of the HTML 4.01 spec there are a lot of attributes such as "headers" and "scope" specifically to support this kind of usage which the majority of so-called web developers never use (because they don't know the spec).

If nested tables are improperly used to control the fine layout of the page then the speech output will be cluttered with a lot of meaningless information: "table 3 rows 4 columns row 1 image:spacer.gif image:spacer.gif image:spacer.gif image:spacer.gif row 2 image:spacer.gif table 4 rows 5 columns row 1 image:spacer.gif image:spacer.gif Welcome to our website image:spacer.gif image:spacer.gif image:company logo..." which is what renders such abysmal markup inaccessible.

Although screen readers and other assistive technologies (accessibility isn't just about visual impairment) provide ways for users to work around such markup, the existence of the markup is nonetheless an unnecessary impediment to access to the content of the page, and can therefore justly be considered to be discriminating against users with certain kinds of disabilities.

I can't believe that in 2008 there are still people who don't know all this.

[dang65]

I can't believe that in 2008 there are still people who don't know all this.

Possibly because the web is so public, created by millions of people? Might take a while to correct it all.

Even big corporations don't expect web developers to write HTML with screen readers in mind. (Not any of the ones I've worked for anyway.) I think the issue is just quietly ignored, with the exception of some high-usage commercial sites perhaps.

[TheBigYinJames]

Even big corporations don't expect web developers to write HTML with screen readers in mind. (Not any of the ones I've worked for anyway.) I think the issue is just quietly ignored, with the exception of some high-usage commercial sites perhaps.

They should though, it's not just a good idea, it's a legal requirement. A lot of them skirt the issue by having an 'accessible' version of the page on a small linnk somewhere.

[NickFitz]

Even big corporations don't expect web developers to write HTML with screen readers in mind. (Not any of the ones I've worked for anyway.) I think the issue is just quietly ignored, with the exception of some high-usage commercial sites perhaps.

Yahoo? The BBC? They're both pretty big on the web, and very hot on accessibility.

For example, the Accessibility Guidelines for bbc.co.uk: "Unless it can be shown to be technically or practically impossible, all content MUST be made accessible."

More and more major companies are becoming aware of their responsibilities under the Disability Discrimination Act, and equivalent legislation in other countries. Sooner or later there will be a discrimination suit brought in this country (it's already happened elsewhere), and web developers who aren't already up to speed on these matters will find their antiquated skills suddenly in much less demand.

For example since the Sydney Olympics case was won in Australia in 2000, working with web standards has become the only way for Australian web developers to find serious work - no other company wants to be the next to lose such a case.

[sasguru]

The readers will read tables properly. It's the improper use of tables that's the issue.

If a table of data is present and marked up correctly, a screen reader will interpret the tabular markup so as to read out the data in a meaningful way, for example by prepending the column and row headers before a datum - e.g. a five-day weather forecast might be read as "table six rows four columns Wednesday max temp 23 degrees, min temp 12 degrees, wind 10mph..." where "Wednesday" is the content of the <th> at the start of the row, and "max temp" and so forth are the contents of the <th> at the top of the column.

If you study the relevant part of the HTML 4.01 spec there are a lot of attributes such as "headers" and "scope" specifically to support this kind of usage which the majority of so-called web developers never use (because they don't know the spec).

If nested tables are improperly used to control the fine layout of the page then the speech output will be cluttered with a lot of meaningless information: "table 3 rows 4 columns row 1 image:spacer.gif image:spacer.gif image:spacer.gif image:spacer.gif row 2 image:spacer.gif table 4 rows 5 columns row 1 image:spacer.gif image:spacer.gif Welcome to our website image:spacer.gif image:spacer.gif image:company logo..." which is what renders such abysmal markup inaccessible.

Although screen readers and other assistive technologies (accessibility isn't just about visual impairment) provide ways for users to work around such markup, the existence of the markup is nonetheless an unnecessary impediment to access to the content of the page, and can therefore justly be considered to be discriminating against users with certain kinds of disabilities.

I can't believe that in 2008 there are still people who don't know all this.

web developers.
There is no earthly reason why most people should know any of this.

[NickFitz]

web developers.
There is no earthly reason why most people should know any of this.

Yes, yes, that's what I meant - I would have thought it was implied in a discussion of relevance solely to web developers

[bogeyman]

I would always use tables to display tabular data, that is their purpose. If you keep the table simple and use the correct markup, screen readers I have tested have no problem with reading the data.

Layout - divs
Data - Tables

How true.

But that's not enough. So many HTML hacks fail to grasp semantic markup and think "Hey, it's cool - I'm using DIVs".

Take a look at the 'Nested DIV Soup' that abounds on the web nowadays. It's not quite as bad as nested table markup, but not far off.

At least most (all?) browsers can render complex table markup accurately. The same cannot be said for the CSS box model. You can make a page that renders slightly differently in IE7, FF, Opera, Safary etc.

Who's right? Well, nobody as it turns out (least of all IE). The CSS standards are often ambiguous and open to 'interpretation' by the implementors.

Also, CSS has stupid uncontrollable crap like 'Margin Collapse' which tries to second-guess the designer's intention and leaves him no control over the rendering.