Checkpoint (D) focuses on organizing documents so they may be read without style sheets. When an HTML document is rendered without associated style sheets, it must still be possible to read the document. See the sections below for specific examples and techniques.

Style Sheet

Style markup is used to create the following fancy text display

Example

This example uses style attributes to specify the vertical as well as the horizontal positioning:

<style type="text/css">
<!--
.part1 /* THE QUICK */ { color: red; font-size: 14pt;
padding-left: 0; margin-top: 40px;
font-family: copperplate gothic bold, fantasy, sans-serif; }
.part2/* BROWN FOX */ { color: red; font-size: 14pt;
padding-left: 0; margin-top: 40px;
font-family: copperplate gothic bold, fantasy, sans-serif; }
.part3 /* jumped over */ { color: purple; font-size: 18pt;
padding-left: 200px; margin-top: -60px;
font-family: desdemona, times new roman, serif; }
.part4 /* the lazy dog */ { color: blue; font-size: 24pt;
padding-left: 350px;
margin-top: -100px; margin-bottom: 100px;
font-family: fantasy, copperplate gothic bold, sans-serif; } -->
</style>

By letting the style commands lay out your text on the display, you can order the content logically in the HTML file, like this:

<divclass=part1>The quick</div>
<div class=part2>brown fox</div>
<div class=part3>jumped over</div>
<div class=part4>the lazy dog.</div>

So, if style sheets were turned off or not supported in your browser, you would read:

The quick
brown fox
jumped over
the lazy dog

This page adopted from the the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.