Question 3: Are markup and style sheets used properly?

Web developers may be tempted to use markup incorrectly in order to achieve a desired effect. Use markup and style sheets as they are designed to be used.

Why does this present a problem?

Using markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for individuals using some assistive technologies to understand the organization of the page or to navigate through it. For example, when using <BLOCKQUOTE> to create visual effects, such as indentation and alignment, rather than to markup a quotation, screen readers may make it unintelligible to the user.

What are the solutions?

1. Use style sheets to stylize text

Style sheets are by far the best solution for text decoration and object placement because they separate content from layout. Unfortunately, style sheets are not consistently supported by all Web browsers. (For instructions on stylizing text without style sheets, see Question 6.)
Do not use bitmapped images to represent text; instead, use style sheets.
In the example:

Career Information

use style sheets rather than graphics for the stylistic C and I.

2. Validate documents to published formal grammars

Include a document type declaration (DOCTYPE) in Web pages. This declares the version of HTML used in documents and assists the browser in rendering pages correctly.
Use checkers to validate documents. For example, see HTML Validation Service (http://validator.w3.org/) and CSS Validation Service (http://jigsaw.w3.org/css-validator/).

3. Use style sheets to control presentation

Distinguish between structural and presentational content and use style sheets to control presentation.
For example:

Structural	vs	Presentational
<STRONG> <EM> (emphasis) <H1>…<H6> (headings) <BLOCKQUOTE> <UL> (unordered list) <OL> (ordered list) <DL> (definition list <LI> (list item)		<B> (bold) <I> (italics) Style sheets

TIP To determine if content is structural or presentational, create an outline of the document. Each point in the hierarchy denotes a structural change. Use structural markup to mark these changes and presentational markup to make them more apparent visually.

Use HTML elements correctly. For a complete list of the HTML 4.01 elements and their roles, refer to WCAG 1.0 (http://www.w3.org/TR/WCAG10-HTML-TECHS/html-techniques.html#index-elements).

4. Use relative rather than absolute units

Individuals use a wide variety of viewing devices, from very large monitors to tiny screens on handheld devices, and the content should flow into the appropriate size. This does not happen when absolute position and length units are used. Users need to be able to change the size of text to compensate for the resolution or size of their device or because of a visual impairment.
Use the "em" unit to set font sizes.
For example, use:

H1 { font-size: 2em }

rather than:

H1 { font-size: 12pt }
Use relative length units and percentages.
For example:

BODY { margin-left: 20%; margin-right: 15%}
Use percentages when defining sizes of tables and frames.

5. Use headers

Use headers to convey document structure and correctly nest headings.
For example:

<H1>Heading</H1>

<H2>Sub-heading</H2>

<H3>Another heading level</H3>

<H2>Sub-heading</H2>

<H2>Sub-heading</H2>
Do not use headers for font effects; instead, use style sheets.

6. Mark up lists

Properly use the list structure and list items to create lists.
For example:

<UL>  unordered list

<OL>  ordered list

<DL>  definition list

<LI>  list item
Do not use these elements to simply provide formatting effects such as indentation; instead, use style sheets.
For complex ordered lists, compound numbers are more informative than simple numbers. For example, a list numbered 1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1, provides more context than the same list without compound numbers.

7. Mark up quotations

Use <Q> to mark up short quotations and <BLOCKQUOTE> for longer ones.
Do not use these elements to simply provide formatting effects such as indentation; instead, use style sheets.

What is the bottom line?

The bottom line, as stated in WCAG Guideline 3, is use markup and style sheets and do so properly.

Copyright: Human Resources Development Canada and Ministry of Advanced Education
Maintained by ... Centre for Curriculum Transfer and Technology ... January 2002
For more information, contact curriculum@c2t2.ca