- Web Publishing

Policy & Strategy
Guides
publications
Contacts
Accessibility guidelines

Use Markup and Style Sheets correctly

Do not misuse HTML structural elements for purposes of layout or formatting (eg use a FONT tag to increase the size of text visually - rather than a header - but not structurally) as this makes it difficult for users with specialized software to understand the organisation of the page or how to navigate through it. Think of content, structure and presentation separately and concentrate on the structure of the document rather than presentation. Structure is how you organise your information (eg nesting headings hierarchically) and presentation is how it appears. HTML provides a logical structural mark-up of text via structural element (eg H, P, EMPHASIS, BLOCKQUOTE) - this aids interpretation by screen readers and visually impaired users and also helps users who are scanning a document for information. Using elements (eg FONT, BOLD) to achieve a stylistic effect is called presentational markup. .

Use style sheets to control layout and presentation.

A style sheet is a set of statements that allow you to describe how elements on a web page are presented. Used properly, style sheets will increase accessibility of your pages. However, because they are not supported by all browsers and assistive technologies, it is important that web pages are are usable when style sheets are turned off or nor supported. Webreview's Master Compatibility Chart, outlines which features are supported in which browsers.

Use Cascading Style Sheets (CSS) to control presentation and layout, rather than presentational mark up. For example, to make all your main heading H1 styles maroon colour, rather than using

<h1><font color="#990000">Main Heading</font></h1>

instead use Css and, in your style sheet, include h1 {color: #990000; } and in the HTML document use:

<h1>Main Heading</h1>

Accessibility Features of CSS 2 provides an overview of how cascading style sheets contribute to universal web access.

Use header elements to convey document structure

The appropriate use of heading levels will improve the accessibility of your document.use. For example, use H2 to indicate a subsection of H1; do not use headers for font effects.You should nest the headings on a page in order

Headings should be applied logically just as you would apply heading levels in an outline. Theoretically, if you extracted the headings from a web page that uses headings, you would have an outline of the page. You should nest the headings on a page in order. The heading structure may be used by some user agents to improve or add useful navigation features, or to abstract the document. The appropriate use of heading levels will improve the accessibility of your document.use. For example, use H2 to indicate a subsection of H1; do not use headers for font effects.

<H1> for your page title

<H2> for first major section heading

<H3> for first subsection title

<p > for the content of the sub section which may be paragraphs, lists, quotes, diagrams or whatever your document requires.

Heading elements (H1-H6) should be used to indicate document structure and not just to get quick font size changes. Use style sheets to effect font changes:

Style sheets can be used to control changes in font size and colour

<p class="bigbluetext">Style sheets can be used <span class="greenitalictext"> to control changes in font size and colour</span></p>

Mark up lists and list items properly

Use the list structure and list items (UL, OL, DL, LI) properly to create lists, not to provide formatting effects such as indentation. The use of ordered (numbered) lists will improve navigation. Lists should be structured with navigational information, like this:

Use the unordered list element <UL> if this is really a list; use <DL> element or CSS if you want indentation:

Text indented via a style sheet

<P style="text-indent: 3em">Text indented through use of a style sheet</P> 

Mark up quotations - do not use quotation markup for formatting effects such as indentation

The BLOCKQUOTE element is intended to identify a block of text as a quote - separate and distinct from the surrounding text. Most browsers support the BLOCKQUOTE element by indenting the text within the BLOCKQUOTE tags, eg:

Tim Berners-Lee, Director of W3C states:

The power of the Web is in its universality.

Tim Berners-Lee, Director of W3C states: <BLOCKQUOTE>The power of the Web is in its universality.</BLOCKQUOTE>

Style sheets can also be created by users or built into user agents (this interaction of content provider, user, and user agent style sheets is called the cascade). Because some browsers allow user-defined style sheets, it is important to ensure that users retain control of styles - see User override of styles.

When an appropriate markup language exists, use markup rather than images to convey information.

Mathematical and scientific equations and symbols and musical notations are often presented as bit-mapped images. The image of such equations is inaccessible and alt-text is usually insufficient to convey its meaning. Groups like the W3C are developing markup languages that will ease the creation of and permit the accessible interpretation of special notations. One particular language being developed is called MathML.

Include a document type declaration

It is important to inlude a DOCTYPE definition at the beginning of your document stating which version of HTML the document adheres to (eg HTML 4.0 Strict, HTML 4.0 Transitional, HTML 4.0 Frameset DTD) - the user agent can the interpret and render the page correctly. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> indicates that the page conforms to HTML 4.0, Transitional document type descriptor ( DTD). The DTD is the "formal" grammar of the language.

To find out about sites that will validate your HTML and check your page for accessibility, see Validation and Testing.

Use relative rather than absolute units in markup

Use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. Avoid the use of fixed font sizes, such as <font size="6">, but instead use relative sizing (<font size="+1"> or <font size="-1">). If you use relative font sizes, then your audience can more easily override your font sizes with their font sizes.

Testing Cascading Style Sheets

For more information on how accessibility is affected by style sheets, see the W3C's CSS Techniques - Fonts, Text Style Effects, Text formatting and positioning, Using style sheet positioning and markup to transform gracefully ; Creating movement with style sheets and Aural cascading style sheets . These guidelines describe in detail how style sheets might be used to create accessible pages. See also Accessibility Features of CSS - Accessibility and Cascading Style Sheets.