Cookies

We use cookies to ensure that we give you the best experience on our website. You can change your cookie settings at any time. Otherwise, we'll assume you're OK to continue.

Computing and Information Services

Producing an accessible appearance

The appearance and layout of a site can cause accessibility problems, especially with differences between browsers.

Web Accessibility Initiative Guidelines

This page explains how to meet:

  • Guideline 2.1: "Ensure that all information conveyed with color is also available without color, for example from context or markup."
  • Guideline 6.1: "Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.".

Reasons for following these recommendations

The use of style sheets makes it possible in some browsers to order the visual display of page content differently to the order of code in the web page. However, the content must still make sense with style sheets disabled. Most browsers with a reasonable level of style sheet support offer an option to disable it (though it may be well hidden). Alternatively, use lynx (available on ITS Unix Service) or an old version of Netscape (3 or earlier).

As a corollary to the WAI's recommendations, it is therefore also the case that content must still make sense with only partial style sheet support. Probably the best browser to test this in is Netscape version 4.

Users are able to specify user style sheets which will over-ride anything specified in your own style sheet. Therefore, any style sheet is simply a suggested display.

Colours can never be relied upon to provide information. Non-visual browsers cannot display colour, and most text only browsers do not display author-specified colours. Almost all graphical browsers have an option to use user-specified colours and so ignore author-specified colours entirely. Also, about 4% of the population has some form of colour blindness, usually red-green, although blue-yellow also exists.

Therefore, any information given by colour must be given by other methods as well.

How to write accessible layouts

With the wide variety of layouts possible, it is difficult to give definite advice on meeting these guidelines. However, following these principles should help:

  • Check your site both with and without stylesheets in as wide a range of browsers as possible.
  • Use structural markup. This makes stylesheets more effective and makes the page retain more meaning if stylesheets are disabled.

  • Disable author specified colours and see if the site is still usable. If possible, check this in Netscape version 4, as this browser will only disable some author specified colours, and this can render pages unusable. You can avoid most of this problem by using stylesheets rather than the <font> tag to specify colours.

    Another point to be careful of with specification of colours is that you should specify both background and foreground colours, or a user default for one colour or the other may make sites unusable. For a demonstration, set your default colours to white text, black background, and browse a few sites that normally have light-coloured or white backgrounds. If the background colour is specified as white and the text colour is unspecified, then the text will be white (user default) and the background white (page default).

    To avoid this problem, either specify no colours, or ensure you specify all colours, either by using both background and color properties in stylesheets, or (if you are not using stylesheets) by using all colour properties of the <body> tag - i.e. text, bgcolor, link and vlink.

    Dreamweaver uses the <font> by default to specify colours, so either be very careful to specify the use of stylesheets within Dreamweaver, or use the tidy program with the -c or -clean option to replace <font> tags with style sheets.

  • View pages in black and white if possible. Often the easiest way to do this is to print the page out. Make sure you have 'print backgrounds' turned on in the print options.
  • Use a program such as VisCheck to check the approximate appearance of the pages to people with colour blindness.

Further information on the use of colour and how people perceive it.

Checking

Most accessibility checkers do not support stylesheets, and so you must check the page manually both with and without stylesheets.

Some accessibility checkers will note uses of colour, occasionally even when the colour is stylesheet controlled, but none are able to differentiate between these cases:

  1. Colour is purely decorative: No action needed.
  2. Colour serves a purpose but there is another way of getting the same information: No further action needed.
  3. Colour serves a purpose and is the only way of getting that information: An alternative must be supplied.

The VisCheck tool can be very useful for ensuring that colour choice will not make the site difficult or impossible for people with colour blindness to use.