Making Accessible Websites for the United Nations

Page Design: Coding

Controlling Layout and Presentation

WAI Definition (Checkpoints 3.3 and 11.2)

  • Use style sheets to control layout and presentation.
  • Avoid deprecated features of W3C technologies.

Explanation

Style sheets are used to define the presentation aspects of a web page, such as the fonts, sizes and colours used for text, headings and hyperlinks and the positioning of elements on the page. Style sheets (CSS) must be used instead of hard coding element properties in the HTML, such as <font>, <b>, <i>, <background colour>, which are deprecated.

Rationale

Using HTML to format a web page can lead to bulky, inefficient and repetitive coding. This is why the W3C has deprecated many of the tags and attributes of HTML used for visual presentation.

Style sheets separate the content from the presentation of a page. This has several advantages, including manageability, portability and accessibility.

Separating content from layout facilitates device independence (examples of devices include screen readers, cell phones, blackberry, PDA, etc.), making it is easier to tailor the presentation to different browsers or user agents. Browsers and assistive technologies that do not support style sheets simply ignore them and access the content directly — making style sheets a good method of ensuring browser independence.

Another advantage to style sheets is that the users can impose their own CSS via their browser. This will display the presentation and content in a way that suits their own preferences (for example, they could change the default colours and font sizes to a setting that they are more comfortable with).

Also, style sheets help management and maintenance by allowing rapid changes to the visual appearance of a website. With style sheets, if there is a requirement to alter the presentation of a site, it can be done once, at the style sheet level, rather than on each individual page at the element level.

Technique

It is not possible to fully document the use of CSS in these guidelines. Documentation and tutorials on this subject are available online.

It is recommended to use a recent version of a robust HTML editor that does not use deprecated HTML elements.

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Outline > Outline deprecated elements.

Success Criteria

There are no deprecated elements.

Note

You can skip this checkpoint is your page is in XHTML strict and you passed checkpoint 3.2.