Examples: WAI Web Content Accessibility Curriculum - slide "6.1 - Organize 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."

Style markup is used to create the following fancy text display:

the lazy dog.

The quick

jumped over

brown fox

Let's say you use style commands that do not specify the vertical positioning of each part of the sentence, for example:

.part1 /* The quick */ { padding-left: 0;

color: red; font-size: 14pt;

font-family: copperplate gothic bold, fantasy, sans-serif }

.part2 /* brown fox */ {padding-left: 100px;

color: brown; font-size: 10pt;

font-family: times new roman, desdemona, serif }

.part3 /* jumped over */ { padding-left: 350px;

color: purple; font-size: 18pt;

font-family: desdemona, times new roman, serif }

.part4 /* the lazy dog */ { padding-left: 350px;

color: blue; font-size: 24pt;

font-family: fantasy, copperplate gothic bold, sans-serif }

</STYLE>

Using the above style commands, you would have to order the text like this in your HTML:

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

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

the lazy dog
The quick
jumped over
brown fox

Next slide: Example for Checkpoint 6.1 continues

Example for Checkpoint 6.1 - Organize 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.