Using Tables for Layout

[Kris]

Your hands are tied? I have no trouble with that at all.

You're saying that you can re-size your browser window without losing
any page content? I'd love to see a screen-capture.[/QUOTE]

<http://www.xs4all.nl/~apple77/capture.png>

The content scales with the window size. Until a certain point of course
in which making the window smaller results in some cases in a horizontal
scrollbar. Which happens to so many pages on the web, I don't see your
point.

It's an issue with IE users. If the text can't be re-sized so that it's
readable, the page rather loses it purpose.

Then 99% of the web is without purpose.

<h3>

Are you trolling?

 

[Whitecrest]

I like this guy's site:
http://www.xs4all.nl/~peterned/

I agree. Nicely done

 

[jake]

You're saying that you can re-size your browser window without losing
any page content? I'd love to see a screen-capture.

<http://www.xs4all.nl/~apple77/capture.png>

The content scales with the window size. Until a certain point of course
in which making the window smaller results in some cases in a horizontal
scrollbar. Which happens to so many pages on the web, I don't see your
point.
[/QUOTE]
Try this:
http://www.gododdin.demon.co.uk/ng/CSSZEN2.JPG (44k)

Now. Try the same with your browser, reducing it to the same width as
mine and you'll see what I'm talking about. I would expect the RHS text
column should reduce in width to compensate for the reduced width of the
window, or wrap under the LHS column; either way, the text should still
be visible. But it can't, and it isn't.

Then 99% of the web is without purpose.

I'm not sure I see your point. IE users *are* 85% of the Web.

Are you trolling?

I'm beginning to suspect that you are ;-)

regards.

 

[jake]

jake wrote:
[snip]
[snip]


you could just point out which techniques the site uses that in your
opinion hinder accessibility.

Hint: <h3>

What about it? In what way does "<h3>" as it is used on the site hinder
accessibility in any way?

OK. In many cases, the code goes something like this:

<div id="preamble">
<h3><span>The road to Enlightenment</span></h3>
.........
.........
.........

Now, the technique is to use CSS to define <h3> to have a background
image.

The <span> is then defined as 'display:none'.

What this does on visual browsers is to display the graphic (textual
equivalent) in place of the text. This way, you get to display the
heading in the nice, fancy font of your choice.

So far, so good.

Unfortunately with most screen-readers/voice browsers that are
CSS-aware, the text is invisible and the graphic (because it's a
background) can't have any alternative text associated with it.

In summary, no headings using this technique get spoken.

(There's an article on this subject if you follow the links on the
page).

regards.

 

[Toby A Inkster]

Unfortunately with most screen-readers/voice browsers that are
CSS-aware, the text is invisible and the graphic (because it's a
background) can't have any alternative text associated with it.

The sensible thing for the screen-reader user to do would be to go into
their visual browser's preferences and disable CSS.

 

[Nicolai P. Zwar]

OK. In many cases, the code goes something like this:

<div id="preamble">
<h3><span>The road to Enlightenment</span></h3>
........
........
........

Now, the technique is to use CSS to define <h3> to have a background image.

True, but that's only one option for the designer of the stylesheet.

The <span> is then defined as 'display:none'.

It doesn't have to be. The stylesheet designer can set it any way he
wishes it to be set.

What this does on visual browsers is to display the graphic (textual
equivalent) in place of the text. This way, you get to display the
heading in the nice, fancy font of your choice.

So far, so good.

Unfortunately with most screen-readers/voice browsers that are
CSS-aware, the text is invisible and the graphic (because it's a
background) can't have any alternative text associated with it.

In summary, no headings using this technique get spoken.

(There's an article on this subject if you follow the links on the page).

regards.

But that is only one possibility the designer of the style sheet has.
Keep in mind that, as you have noted yourself, the site is a
demonstration of what can be done with CSS layout, therefore it provides
the designer with a multitude of possibilities to specify the design via
CSS. The site is still perfectly accessible, and it's up to the designer
whether or not he wants to hide the <h3> text and replace it with an
image. At its core there's a plain and strictly coded XHTML doc any
screen reader, including those for the blind, can read.

(As a side note, it should also be noted that since this page is about
graphic design, it should be only marginally interesting to
vision-impaired people at best, not to mention the blind.)

 

[Barry Pearson]

But blind people won't be able to use your site.

[snip]

Not true!

Building Accessible Websites (ISBN 0-7357-1150-X). Copyright © Joe Clark, 2002

http://joeclark.org/book/sashay/serialization/Chapter10.html

"Tables prompt eye-gouging hissyfits among accessibility advocates and Web
designers of all stripes, whether oldschool or avant-garde. Both sides are
saddled with myths and both argue in large part from ideology. Let's do a
reality check, shall we?

Tables were introduced in HTML 3.2 back in 1997. (Not HTML 2.0. Netscape 2.0
supported tables, but they made their début in HTML 3.2. Very oldschool
indeed.) Purists, take note: Even back then, tables were expressly permitted
"to mark up tabular material or for layout purposes." Web designers who used
tables for page layout were not violating the spec, working against the spirit
of the true, glorious Internet, sullying the swimming pool, or committing any
kind of sin.

Nested tables - tables within tables - have always been expressly permitted.
Back to the HTML 3.2 spec: "A cell can contain a wide variety of other block-
and text-level elements including form fields and other tables." The fact that
nested tables take longer to display in a graphical browser is surely
undesirable, but you cannot ascribe that behaviour to the inevitable effect of
illegal coding. Nested tables have always been legal.

The use of tables for layout has never been prohibited by the Web
Accessibility Initiative. You are not creating an inaccessible page if it
contains tables used for layout. You have committed no sin - necessarily. You
will not be forced to turn in your trackball and badge while WAI Internal
Affairs conducts an investigation. But you are not off the hook: You must code
tables properly, which, for layout tables, is not difficult at all. "

Etc.

 

[Barry Pearson]

But blind people won't be able to use your site.

When I've tested screen readers, etc, table layout was one of the few
accessibility issues that _didn't_ cause a major problem [1].
Provided it linearised sensibly, obviously.

[snip]

And that is now generally accepted. The Web Accessibility Initiative agrees.

New windows and Flash appear to be much more of a problem.

 

[Barry Pearson]

That's what happens when you use tools for something they aren't
designed for. http://allmyfaqs.com/faq.pl?Tableless_layouts

Can you show that CSS1+2 were designed for page layout? I suspect they were
not. I can't believe that such clever people would have made such a mess of
it, if that is what they were trying to do! I believe the reason why so many
people are struggling with CSS positioning after so many years is because it
is using tools for something they were not designed for.

(I am willing to consider evidence to the contrary).

But tables *were* designed to layout complex material in a grid-like
formation. There was never an intention that they were to be restricted to the
sort of data you would find in a spreadsheet!

"A brief history of tables"
http://www.barry.pearson.name/articles/layout_tables/history.htm

 

[Barry Pearson]

Nice looking, but:

* Can't re-size the browser window
* Can't re-size the text
* Uses techniques that hinder accessibility

Really, just an exercise in DTP for the screen.

It starts with vast amounts of extra mark-up in order to provide flexibility.
Indeed, it says: "This xhtml document is marked up to provide the designer
with the maximum possible flexibility. There are more classes and extraneous
tags than needed, and in a real world situation, it's more likely that it
would be much leaner.... These extra divs/spans may be used as catch-alls to
add extra imagery".

It should be considered to be an art-work. And it is - I find it very
attractive. But I would never attempt to read those pages! The artistry is too
distracting.

This isn't a separation of content & presentation. It is an overload of
content to provide sufficient hooks for presentation. Too often CSS & mark-up
get tangled together, and not just with tables. This is an example.

 

[Barry Pearson]

Whitecrest wrote:
[snip]

But bottom line is that all of us can enjoy the web and get the same
information from different web sites each presenting it differently.
No one way can please everyone. THAT is the problem with Standards.
I may not like your choice of standards.

[snip]

This thread isn't really about standards. Table layout can conform to every
useful standard - HTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1, and probably
in future XHTML 2.0. Those will be around for a few decades!

This thread is about whether people should confine themselves to a subset of
the standards because someone else wants them to. I think it is really about
censorship.

 

[Whitecrest]

But...

Ok, I edited a lot, but no matter. It just seems funny to me that you
bitch, moan, and complain (not you personally) about Microsof t because
they don't fix IE. But I do not hear the same for the readers. It
seems like they need to do the same.

If I were blind I would be pissed at Reader builders, not the designers
of the sites. For the most part, the "sighted" visitor can (if they
choose) see everything regardless of browser. Sure, you may have to turn
on activeX, and scripting etc, but if you do, then you can use the site.

At the very lease, the readers have to meet this same standard. And from
reading this thread, (and others like it) it does not seem like they are
doing that. Just seems to be you (again not you personally) are barking
up the wrong tree.

 

[jake]

True, but that's only one option for the designer of the stylesheet.

Sure. But that's the option we're talking about.

It doesn't have to be. The stylesheet designer can set it any way he
wishes it to be set.

But if it *is* set 'display:none' then we have a problem.

But that is only one possibility the designer of the style sheet has.
Keep in mind that, as you have noted yourself, the site is a
demonstration of what can be done with CSS layout, therefore it
provides the designer with a multitude of possibilities to specify the
design via CSS. The site is still perfectly accessible, and it's up to
the designer whether or not he wants to hide the <h3> text and replace
it with an image. At its core there's a plain and strictly coded XHTML
doc any screen reader, including those for the blind, can read.

I don't think you can separate the page and it's styling in this case.

(As a side note, it should also be noted that since this page is about
graphic design, it should be only marginally interesting to
vision-impaired people at best, not to mention the blind.)

We are, of course, talking about a specific technique. If copied and
used elsewhere then this would give people a problem.

To wind the conversation back a couple of days I said:
* Uses techniques that hinder accessibility

If the hidden text is not accessible, then it's not ..... well ......
accessible ;-)

regards.

 

[jake]

The sensible thing for the screen-reader user to do would be to go into
their visual browser's preferences and disable CSS.

The Web is not just the plaything for the graphic designer. The sensible
thing is for the designer to understand the effect of his actions on the
numerous different ways that his content is going to be accessed.

regards.

 

[Nicolai P. Zwar]

jake wrote:

Sure. But that's the option we're talking about.

No. You said "the site" uses techniques that hinder accessibility, not
that there are stylesheets that sight that might be harder to read.

But if it *is* set 'display:none' then we have a problem.

Personally, I don't have a problem at all in that case.
But should somebody actually have a problem with that, it's his or her
own fault. As I have said, if you are absolutely dependent on screen
readers etc. because you are blind or nearly blind, yet you are using a
browser than cannot eliminate hard to read stylesheets, it's your own
fault. It's one thing to be blind, it's another to be blind and dumb.

I don't think you can separate the page and it's styling in this case.

But that is exactly what CSS is about, and in fact that is exactly what
this very site is about: a separation of design and content. I can think
of no other site that offers you as many different stylesheets to view
the very same page as this one. It's really only one single XHTML doc
there that can be viewed in many different designs. If you find one
design hard to read, chose another. If you find them all hard to read,
turn them off. That's about as accessible as it gets.

We are, of course, talking about a specific technique. If copied and
used elsewhere then this would give people a problem.

No problem at all. People who can see will see the graphic headline,
people who cannot see can "hear" the text because screen readers can see
and therefore "read" the text. There's no problem.

To wind the conversation back a couple of days I said:
* Uses techniques that hinder accessibility

If the hidden text is not accessible, then it's not ..... well ......
accessible ;-)

But it is perfectly accessible. Just viewed it in Lynx. Just viewed it
in Opera with stylesheets turned off. Just saw it in Mozilla with
stylesheets turned off. The text is 100% accessible.

 

[Brian]

Table layout can conform to every useful standard - HTML 4.01
Strict, XHTML 1.0 Strict, XHTML 1.1, and probably in future XHTML
2.0.

If you mean validation, then of course, since validation to a dtd can

This thread is about whether people should confine themselves to a
subset of the standards because someone else wants them to. I think
it is really about censorship.

Only if you think tags are part of the content. Unless the user views
the source, though, the tags are not part of the content.

 

[jake]

jake wrote:

[snip lots of good but questionable stuff]

But it is perfectly accessible. Just viewed it in Lynx. Just viewed it
in Opera with stylesheets turned off. Just saw it in Mozilla with
stylesheets turned off. The text is 100% accessible.

Just looked at in my reader -- the previously noted text is 100%
inaccessible.

Why? Because the text has been deliberately hidden.

Think about it. Why would any screen reader want to speak something that
the author has *chosen* to hide?

If the designer uses a technique knowing that it will cause problems
with screen reader users, then that's his/her decision.

Anyway. Defend the indefensible if you want to, but -- when you have a
chance -- do have a read of:

http://www.stopdesign.com/also/articles/replace_text/
http://www.alistapart.com/articles/fir/

regards.

 

[Nicolai P. Zwar]

Just looked at in my reader -- the previously noted text is 100%
inaccessible.

100% inaccessible? Well, it was perfectly accessible to _me_, so there
goes your 100% theory out of the window. And it should be perfectly
accessible to anybody else who really wants or needs to see or hear it.
Just one mouse click changes the stylesheet if you have trouble reading
the site. Just one mouse click turns it off if you suffer from serious
eye problems. If the text isn't accessible to you, well, maybe the
problem is on your side?

Why? Because the text has been deliberately hidden.

Yes, but only on certain stylesheets. It is not a requirement when you
write a stylesheet for the site that you replace the headlines with an
image. As there are so many different stylesheets to chose from, a
visually impaired person could simply pick one that he or his screen
reader can read,or he could turn off the stylesheets altogether, which
is a piece of cake. If a hypothetical user is so utterly dependent on
visual aid but too stupid for the one mouse click required to change or
turn off stylesheets, then that's his problem.

Think about it. Why would any screen reader want to speak something that
the author has *chosen* to hide?

Because the user of the screen reader wishes it to do so?

If the designer uses a technique knowing that it will cause problems
with screen reader users, then that's his/her decision.

Indeed, it is.

Anyway. Defend the indefensible if you want to, but -- when you have a
chance -- do have a read of:

I am not "defending the indefensible", I merely don't equate being
disabled with being utterly stupid. People whose eyesight is so utterly
poor they cannot make out the images on the site in question will simply
choose another stylesheet to view the site that they can read better, or
their own, or none at all, and then the entire text is as plain and
accessible as it possibly can be. As this site makes switching
stylesheets particularly easy and offers dozens of different designs to
chose from, I would hardly call it "inaccessible".

http://www.stopdesign.com/also/articles/replace_text/
http://www.alistapart.com/articles/fir/

Sensible articles.

 

[Barry Pearson]

[snip]
This thread is about whether people should confine themselves to a
subset of the standards because someone else wants them to. I think
it is really about censorship.

Only if you think tags are part of the content. Unless the user views
the source, though, the tags are not part of the content.

That is OK, then.

There is a view that "content & presentation" should be separated". Sounds
like a useful principle? If tags (such as "table", etc), are not part of
content (your statement), then we don't need to worry about them. We are not
trying to separate tags from presentation. Just content from presentation. So
let's stop discussing tags such as "table", and focus on how to separate the
content of table cells (etc) from presentation. And the answer is to use CSS
for the content of table cells! Don't we all agree?

(Actually, *I* don't agree! I think we should seek to separate mark-up -
tags - from presentation. But, unfortunately, we don't have the techniques to
do so yet).

 

[Nicolai P. Zwar]

(Actually, *I* don't agree! I think we should seek to separate mark-up -
tags - from presentation. But, unfortunately, we don't have the techniques to
do so yet).

Crayons?