Discussion on:

Get more accessible with CSS

Are we to abandon tables entirely for page layout? I would rather use div tags for page layout myself, however it is not always easy to achieve the same result using div or span tags rather than a table. Sometimes using only CSS and a mix of 4.01 compliant tags, you almost reach a definite point of diminishing returns, and it seems easier to use a moderate implementation of tables, even in page layout. This becomes more enticing when one finds that the W3C validation of HTML 4.01 documents doesn't care if you use tables, as long as you conform to the; "laws of the tag element".

There is a whole lot of talk going on at alistapart about the proper use of div's to replace tables (e.g. http://www.alistapart.com/stories/flexiblelayouts/) - but it still seems not be common sense to use as this approach has great advantages (andbeing standards-compliant being even the smallest) when it comes to creating fluid web-designs. But maybe the slow adoption of these techniques has more to do with what we have grown accustomed to do: Back in 1995 noone thought it was an obvious or even simple idea to use nested Tables inside nested tables throwing in an occasional spacer-gif to achieve specific layout-effects - nowadays, this has become common-sense. Maybe it just takes some time to "think CSS" before we can expect to see properly coded&layouted Pages using css only....

one problem that all of us fall into in the CSS debate is that we want everything to *look* the same in all (or at least the major) browsers.

if we shift our thinking a bit and focus on content and whether it *works* the same (meaning that folkscan get to and use what they need), then CSS (IMO) is a better solution for web development:

1. it's more accessible across browsers and devices. a properly coded XHTML/CSS document will appear as a text document in older browsers including Lynx.

2. CSS can reduce page download times by trimming all of the spacer .gifs and tags.

3. it provides greater control over the layout of pages.

4. it makes websites easier to maintain and re-design.

I completely agree that this is the way to go, sometime in the future. If we didn't have our current crop of whacked out, non-compliant browsers, this would be the path we would all be on now. However, if you're writing markup for complex pages, like the one you're viewing right now, relying on css for positioning of elements is much more involved. And that level of complexity is probably why the source of this page shows it has been done in tables. Because they work more consistently, for now.

For more info on how to go table-free for positioning, check out alistapart.com. It's a good source for learning how to get to the future that this article promises.

good topic, but too basic. at least give the reader tips on where they can go to get advanced reading on the subject if your examples are so basic.

Talleywho:
I closed the article with a link to the W3C's Web Accessibility Initiative.

The WAI site provides links to guidelines, checklists, techniques and more.

Check out http://www.w3c.org/WAI

I'm getting older and my eyes find some web pages difficult to read so I was interested in your css and accesiblity article (http://builder.com.com/article.jhtml?id=u00220021202shm01.htm&fromtm=e604).
When I followed the link to the article, I realised that the "meat" of your article was in very tiny (i.e., 12 pixel high) text. When I looked at the source, I discovered its html doesn't use standard tags/classes as your article recommends.

Can you explain why "Builder.com's html doesn't follow this approach?

I'm also curious to hear how they decided on 12 pixel text to show the most valuable (to me anyway) text on the page.

Mike

Mike:
I think that the easiest way for Builder.com to address the problem you mentioned is to simply change the font size in their stylesheet from absolute (pixels) to variable (em). This would allow you to use your browser to increase or decreasethe font sizing at your discretion.

Although it is ironic that the site is coded differently than I recommended in my article, I think it illustrates a more important issue which is the pervasiveness of less-than-accessible code.

Truly accessible websites are still the exception on the web. Hopefully, as more is written about accessibility, that will change.

BTW, current versions of Netscape will override absolute font sizing. Use the "View/Text Zoom" options to set the text to a more comfortable size.

Thanks - checking out Mozzilla and Netscape's handling of this was already on my to do list.

I wonder if the person who inserted your article realized they were creating an oxymoron!

Mike

Web page below discusses (at the VERY bottom) the "supposed" benefits of CSS with respect to accessibility.

http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx

I could use a or tag to do the same thing and set the ID or NAME with a prefix attribute to let the screen reader know which section it's reading while still Uniquely identify the section...

Justify the use FULL use of CSS because of Accessibilty is clearly bogus as there are better and more simple solutions out there.