Guideline 3. Use markup and style sheets and do so properly.

Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes.

Using markup improperly — not according to specification — hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices (refer to the description of difference between content, structure, and presentation).

Content developers may be tempted to use (or misuse) constructs that achieve a desired formatting effect on older browsers. They must be aware that these practices cause accessibility problems and must consider whether the formatting effect is so critical as to warrant making the document inaccessible to some users.

At the other extreme, content developers must not sacrifice appropriate markup because a certain browser or assistive technology does not process it correctly. For example, it is appropriate to use the ‘TABLE’ element in HTML to mark up tabular information even though some older screen readers may not handle side-by-side text correctly (refer to checkpoint 10.3). Using ‘TABLE’ correctly and creating tables that transform gracefully (refer to guideline 5.) makes it possible for software to render tables other than as two-dimensional grids.

Checkpoints:

3.1 When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]

For example, use MathML to mark up mathematical equations, and style sheets to format text and control layout. Also, avoid using images to represent text — use text and style sheets instead. Refer also to guideline 6 and guideline 11.

3.2 Create documents that validate to published formal grammars. [Priority 2]

For example, include a document type declaration at the beginning of a document that refers to a published DTD (e.g., the strict HTML 4.0 DTD).

3.3 Use style sheets to control layout and presentation. [Priority 2]

For example, use the CSS ‘font’ property instead of the HTML FONT element to control font styles.

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]

For example, in CSS, use ’em’ or percentage lengths rather than ‘pt’ or ‘cm’, which are absolute units. If absolute units are used, validate that the rendered content is usable (refer to the section on validation).

3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]

For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects.

3.6 Mark up lists and list items properly. [Priority 2]

For example, in HTML, nest OL, UL, and DL lists properly.

3.7 Mark up quotations. Do not use quotation markup for formatting effects such as indentation. [Priority 2]

For example, in HTML, use the Q and BLOCKQUOTE elements to markup short and longer quotations, respectively.

Please note that all of the above checkpoints have associated techniques. Please refer to the W3C Website for details.