Guideline 3: Use markup and style sheets and do so properly
Using markup incorrectly has an adverse affect on the usability of your pages. For example, using tables for layout rather than tabular data can cause accessibility issues for some visitors. It's important to use markup elements for their intended purpose, rather than presentation. Developers should separate content from presentation, ensuring the content is marked up correctly, and the presentation elements are provided through style sheets.
This guideline has 7 checkpoints, each with an importance of Level "AA" (should be satisfied for a site to be considered accessible).
3.1 When an appropriate markup language exists, use markup rather than images to convey information
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. You should avoid using images to represent text. Instead, you should markup the text with style sheets, to ensure the content is still available for visitors unable to see images. If an appropriate markup language exists, you should use markup to display the content rather than images. For example, if you want to display a mathematical equation, use MathML to markup the equation rather than display the equation as an image.
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&invisibletimes;</mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
3.2 Create documents that validate to published formal grammars
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. All documents should be validated against a published formal grammar. This involves specifying a DOCTYPE for the Document Type Definition (DTD), and ensuring the elements and attributes follow the legal structure defined in the DTD. The following example shows the minimum content required for an XHTML 1.1 document.
minimal.html
< !DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Your Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<p>Body content written in here</p>
</body>
</html>
You should use validation services to ensure that your documents conform to the specifications. The W3C provides an HTML validation service, and a CSS validation service.
3.3 Use style sheets to control layout and presentation
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Content should be separated from presentation,
and style sheets provide an excellent means of achieving this. Style Sheets
are the enabling factor that can ensure your site looks professional, and is
accessible at the same time. Avoid using deprecated elements such as <center> and <font> to
style your pages, and use style sheets instead.
div.newsItem
{
font: normal 1em/1.3em Verdana, helvetica, sans-serif;
text-align: center;
background-color: #fff;
color: #000;
}
The following are some excellent tutorials that illustrate how to layout pages in pure CSS.
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. Units of Measurement such as picas (pc), points (pt), inches (in), centimetres (cm), and millimetres (mm) are absolute units. These measurements are always the same, perhaps with the exception of boys describing their manhood to girls. As they're absolute sizes, the visitor cannot resize them should the text be too small. Specifying your units in relative sizes allows the visitor to adjust the size. For example, if you specify your font size in em (the font height of an element) or percentages, visitors will be able to adjust the size of the text.
body
{
font: normal 1em/1.3em Verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}
3.5 Use header elements to convey document structure and use them according to specification
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Header elements should be used correctly
to show the semantic structure of your page. All pages should use <h1> for
the title, and subsequent header elements should be used to show subheadings.
Never use header elements purely for display purposes, such as increasing the
size of text, as this destroys the semantics of the document. Assistive technologies
such as screen readers determine the structure of the document by the headers
provided.
3.6 Mark up lists and list items properly
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. The list elements <dl>, <ul>,
and <ol> should only be used for lists, and not for formatting
effects such as indenting the content. Whilst visual user agents can show the
structure of nested lists from their indentation, information can be lost on
non-visual visitors. Developers should include contextual clues with nested
lists, in order to aid the visitor's understanding of the structure.
3.7 Mark up quotations
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Quotations should be marked up using the <q> element,
or the <blockquote> element.
The <q> element is an inline element.
<q>Keep it simple!</q>
The <blockquote> element is a block element, useful for
large quotes.
<blockquote cite="http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-quotes">
<p>
Do not use quotation markup for formatting effects such as
indentation. [Priority 2]
</p>
</blockquote>
As with all other elements, never use quotation elements for formatting effects, such as indenting content.
Comments