Reply to: CSS vs Tables - Is the tide turning?

[Ardesco]

One thing that many wannabe web developers miss is that once you put your content into tables you have made your site pretty much unusable for anybody that needs to use a screen reader.

Yes it can be a lot more work to make your CSS layout look good in all the browsers, and it is not always easy, but a screen reader will make your website appear as it should to people using a screen reader, tables will not.

I know I'm guilty of using tables on my sites and it is something that will be fixed eventually (Not that many blind people are going to be interested in renting a game server anyway...).

I have spent a lot of time testing websites for accessibility in the past year and it is shocking how bad the majority are....

[alreadypacked]

Mods, please move this purely Technical and boring post on box models, collapsing borders and floating divs to Technical, as it has no bearing on house prices whatsoever.

[DimPrawn]

Mods, please move this purely Technical and boring post on box models, collapsing borders and floating divs to Technical, as it has no bearing on house prices whatsoever.

[NickFitz]

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.

I wouldn't argue that the collapsing margins section of CSS 2.1 is the easiest bit of prose to follow, but it's hardly "uncontrollable crap" - it's a clearly specified component of the spec and is implemented consistently. By understanding it as part of the box model you can work with it very easily.

If it wasn't in there you'd find a lot more uncontrollable inconsistencies when trying to layout a body of text in multiple paragraphs.

[TheBigYinJames]

There are some odd browser bugs (especially in IE6) but these are well known and any developer worth his/her salt will be able to work around them.

... by using a sodding great <TABLE>

[chicane]

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.

Not true - since IE6 (with its correctish box model in strict mode) became mainstream we've been able to enjoy a consistent box model across all browsers. If you're not getting consistent rendering across different browsers and/or platforms, it may be that you're not overriding the default styles of each browser or failing to use some of the more obscure CSS properties such as "line-height" to ensure consistent heights across different platforms with different font metrics.

There are some odd browser bugs (especially in IE6) but these are well known and any developer worth his/her salt will be able to work around them.

[sasguru]

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.

[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

[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]

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.

[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.

[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.

[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.

[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.