CSS Tip 1: Put the content first.
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.
March 6th, 2006 at 2:04 pm
See http://www.alistapart.com/articles/holygrail , which explains how to do classical left- and right-bar layout, fixed width, with a liquid center, using XHTML and CSS only. The header still precedes the content, however.
March 18th, 2006 at 5:37 pm
[…] Elliotte Rusty Harold states that “CSS layouts that are almost as inflexible and inaccessible as the table based layouts they replace.” In this article “Put Content First” he suggests this page structure: […]
June 28th, 2006 at 5:59 pm
where can i get the css code for your html code example?
June 28th, 2006 at 6:35 pm
juhuuu..
here http://www.alistapart.com/articles/negativemargins/ i have found the code im looking for 🙂
January 2nd, 2007 at 6:36 am
I never thought about content first being about accessibility, but it does make sense. You can also factor in that search engines give more importance to what is first in the source code – they can’t see how the page is laid out. So not only will a content first design be more accessible but it will also be more SEO. Plus, if it is a long article, many engines stop reading after so many characters. If more designers could understand, design and implement CSS in this way the web would be a much friendlier place.
Good post.
January 22nd, 2007 at 12:41 pm
I agree content should be first… arranging columns seems simple enough, but getting the content before the header seems more problematic. Could position:absolute the header at the top of the page, with a margin of the same height on the content, but this presupposes knowing the height of the header, and also it being of a fixed height. Resizing browser window would cause havoc…
So….Any ideas?
July 23rd, 2007 at 8:23 am
My question is, how can you do this if you have a horizonal div for your navigation, sure you can put the content first in your page but the layout of that div is is relative to order you specify it in your code. A side bar navigation is ofcourse a peice of cake, how ever i dont see how you can do this with a horizontal navigation which visually should really come before your content.
Please help me out, thanks in advance.
Rob
July 7th, 2011 at 4:27 am
You will discover numerous of ways how to make your hair grow faster. I’d really like to talk about these tips. If you are really considering how to make your hair grow faster, just look for in web and you will then find a lot of good ideas.
June 4th, 2014 at 3:54 am
Check it out
The Cafes » CSS Tip 1: Put the content first.