I’ve received lots of feedback from my Friday article about CSS and universal design, most of it quite positive. One person (not Dave) felt that I was implying that CSS was some sort of magic pixie dust that you could sprinkle on your web site to make it instantly accessible. This is absolutely false, and I certainly did not mean to give this impression. CSS does not guarantee accessibility, just like XML does not guarantee interoperability and encryption does not guarantee security. What it does do, however, is allow you to use HTML structurally instead of visually.
Repeat after me: HTML is a structural markup language, not a visual markup language. Keep repeating that to yourself as you learn CSS, because otherwise nothing will make any sense.
View source on my home page. The document is cleanly structured, starting with an H1 (“diveintomark”, the site name), followed immediately by an H2 (today’s date), followed by an H3 (the title of the most recent post), followed by the text of the post. Then another H3-titled post, and so forth, then finally another H2 for the previous day, and so on. Further down the page, the navigation links are grouped by H2 titles, and each link is an LI within a UL (list item within an unordered list).
Note that the structure of the document bears only a passing resemblance to the visual layout. The structure of the document is the structure that makes the most sense. Structurally, the site title is an H1, and everything on the page is a child of it. Structurally, the most important thing on the page is the content of the posts (what you’re reading now), so that comes first in the document, even though it is not the first thing presented visually.
What does this have to do with accessibility? Non-visual and non-graphical browsers (including screen readers like JAWS and text-only browsers like Lynx) rely on the structure of the document, not the visual layout. This points out the #1 limitation of table-based design: it forces you to structure your document in the same way you lay out your document in a graphical browser, even if this structure doesn’t make any sense in a non-graphical environment.
Earlier this weekend, I installed a demo version of JAWS, to see how blind people experience my web site. It integrates with Internet Explorer, so to use it, you just load the site like normal in Internet Explorer. But as soon as the page loads, JAWS takes over and starts reading. And this is what it said:
A lot of effort went into making this effortless
Page has 20 headings and 116 links
Heading level 1 visited link diveintomark
Heading level 2 link Friday February 15, 2002
Graphic has long description /images/friday.txt
Heading level 3 link CSS and universal design
This essay assumes you know what cascading style sheets are, you just don’t know why you should use them…
In other words, the page identifies itself and then immediately launches into the most recent post, put in context both by date and by title. Header markings clearly delineate the titles, so it’s clear where a new day starts, and where a new post starts.
Next I tried Scripting News. I’m not picking on Dave here, it’s just the second site I tried.
Click here to find out about scripting news
Page has 497 links
Graphic top-left corner
Graphic Scripting News
Visited image map link scripting.com
Image map link www.userland
It’s a link weblog about scripting and stuff like that
Link click here to find out about Scripting News
Link Updates
Link Radio
Link Awards
Link Directory
Link DaveNet
…and so forth…
The problem here is that the blogrolling list is read first (in its entirety, 116 links) every time I visit the page, and there is no way to jump ahead to the main content. Visually, the link list is on the left, so structurally, it has to come first, because the layout is table-based. CSS-based layout allows you to avoid this problem entirely: a page can be well-organized structurally and well-organized visually (even if this organization is completely different).
However, it is also important to note that while CSS allows good document structure, it does not enforce good structure. Even though I’m using a CSS-based layout, I still could have chosen to structure my HTML by putting the navigation links and other things before the main content. Then the screen reader would have the same results as Dave’s table-based layout: it would have read all the navigation links first before getting around to reading today’s posts.
Finally, I want to make it clear that good document structure is only the first step towards true accessibility. I spent the rest of the weekend reading up on all the ways and reasons that my site was inaccessible. (All were relatively minor and easy to fix, and unless I’m misinterpreting the guidelines, this entire site is now Bobby AAA approved.) But that is a topic for another day…
§
I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)
§
© 2001–9 Mark Pilgrim