CSS Style Sheets - Checkpoint (d)
The law states:
"Documents shall be organized so they are readable without requiring an associated style sheet."
If you use a CSS style sheet, your web site should be readable without the associated CSS file. The web site does not have to be visually appealing with style sheet turned off, but all the information must linearize correctly. Linearization is how your content is ordered with your style sheet turned off. Make sure your content makes sense when your style sheets are turned off. If it does not, rearrange your code so that the things you want read first are at the beginning of your HTML code. You will most likely have to worry about this only when you use CSS's absolute positioning features.
You can run your web site through a text browser, such as Lynx, to see if your web site linearizes well. The Lynx emulator processes a URL and displays how your web site would look through a text browser. Text browsers ignore CSS and read HTML code linearly. Screen readers do the same, so your content displays in the order a screen reader would read it.
An Example Web Site with Style Sheets On
You should note the visual linearization of the web site. Keep track of the order of the content from left to right and top to bottom as this is how most people read. It is perfectly fine for your content to linearize in a different way. Just make sure it is the way that you want your information to be displayed.
The Same Web Site with Style Sheet Turned Off
As you can see below, turning off the style sheets does not really affect the content of the web site. It just looks a little less pleasing. This web site uses CSS as layout and decorates the page. As you can see, CSS can layout a web page as well as tables can. The designer of this web site chose to put his navigation links at the end of his code. When his web site linearizes, the navigation links at the right hand side of his page are at the very bottom (not shown in the screen shot). He provides invisible links to jump to these navigation links at the top of his page. This is so users do not have to read the entire body of the web site to get to his navigation links. This is good practice and is outlined in Skip to Navigation.
Helpful Web Sites
Eric Meyer's CSS Web site
WebAIM's CSS Accessibility Tutorial
Jim Thatcher's online course on CSS
The Lynx text browser emulator