CSS has finally caught on among web designers. It’s rare to find anyone advocating table based layout anymore. Sadly many designers, including not a few famous ones, have simply adapted the CSS meme to their old bad habits. They are now producing CSS layouts that are almost as inflexible and inaccessible as the table based layouts they replace, in a few cases even more so.
The first and most fundamental principle of accessible web design is the content comes first. This is both figurative and literal. In the figurative sense, the content matters more than the presentation and the design. However, in the literal sense the content comes first and all the presentational gewgaws, navigation widgets, sidebars, and the like come later.
Consider a typical page like this one. It’s composed of a header at the top, a sidebar on the right, comments at the bottom, and maybe a few ads interspersed throughout. It’s not that hard to setup in CSS if you don’t worry about the position of the contents within the HTML, and most designers don’t bother with this. If it’s more convenient to put the side bar before the content, they do so without much thought. However this is a disaster for screen readers used by the visually impaired; and in the future this category is likely to include a lot more users than you expect. For instance, it will mean not just the physically blind, but also drivers surfing the web through their car radio or cell phone.
To support this class of users, it’s necessary that you put the most important content first in the HTML. That is, the layout of this page should look more or less like this:
<body> <div id="content"> <h2>Article Title</h2> <div class="entrytext"> Article Text </div> <div class="comments"> Comments go here </div> </div> <div class="navigation">Next and previous links</div> <div id="header">site header</div> <div id="sidebar">site sidebar</div> <div id="footer">site footer</div> </body>
Notice that the first thing in the HTML is the actual article, not the site header, not the sidebar, not the navigation. The order in the HTML reflects the order of the user’s interest linearly. It has nothing to do with the two-dimensional layout of the site because an audio browser only reads linearly from start to finish. It doesn’t see the two-dimensional layout. (As a side note search engine spiders also operate like this, and putting more important content up front may help your ranking.)
You can argue about a couple of pieces of this layout. For instance, maybe the site header is important enough to come before the article title and article text. Maybe the navigation links should come before the comments. However, whatever you do, you must put the sidebar(s) after the content. Otherwise an audio reader has to read the entire sidebar every time before the reader gets to the meat of the page. This is actively hostile to the visually impaired.
No doubt following this rule makes the CSS designer’s job harder. Indeed I think the difficulty of creating the desired 2D layout under the necessary 1D constraints exposes major flaws in the whole CSS positioning model. Nonetheless I think it is imperative that we put the content first, both figuratively and consequently literally. If it is not possible to create the desired 2D layout from the necessary 1D sequence, then it is the 2D layout that must change, not the 1D layout.
P.S. Yes, I know that the stylesheets for this very page violate these rules. All I can say in my defense is that I didn’t write them. In fact, it’s my ongoing effort to fix these problems that inspired this rant.