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.

Slide 52 of 120
Previous slide. Next slide.

Priority 1

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

the lazy dog.
The quick
jumped over
brown fox

Angry face: bad choice!

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

<STYLE TYPE="text/css">

.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 }


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
Up one level To Checkpoints for Guideline 6.
Next slide: Example for Checkpoint 6.1 continues

Introduction: Overview Guidelines: Overview Checkpoints: Overview Examples: Overview

Previous page. Next page.

Chuck Letourneau & Geoff Freed

W3C Web Accessibility Initiative

Copyright © 2000 W3C