[Skip navigation]

DEMOS Project

Online Materials for Staff Disability Awareness
: DEMOS Techniques

The DEMOS site tested

The DEMOS site has been checked in a variety of browsers on PC and Macintosh, has been validated and checked for accessibility problems, tested in a browser for the blind and on WebTV.

Here are some examples:

This page without style sheets as seen by older or text-only browsers. The page contents linearizes in a logical order: header, navigation, breadcrumbs, main content, footer.

This is what the page looks like when printed, using the print stylesheet. Only the latest browsers (Mozilla, Netscape 6/7, Opera, IE 6) support print stylesheets. An old browser will print everything including the navigation on the right which is hidden from standard-compliant browsers in the print stylesheet.

Screenshot of text-only, linearised view of the DEMOS site in the Lynx browser (not actual size)
The 'Quick links' table, which is normally situated to the right of the main content, is now in a logical position above the content.

Screenshot of DEMOS homepage as displayed by WebTV

Screenshots of the DEMOS site as seen by a Deuteranope (a person with a form of red/green colour deficit) and a Tritanope (a person with a rare blue/yellow deficit).
Note: Vischeck [External link: Open in new browser window] , the tool used for this simulation, is still under development and has some problems detecting style sheets. It might not give a completely true picture if it can't detect colours, fonts and background specified in a style sheet. The differences can, however, be clearly seen in the images on the page, the logo, strap line and navigation images.

The DEMOS site tested with the Bobby accessibility checker (saved page).
[Bobby AAA Approved] Try checking it yourself using this URL: http://jarmin.com/demos/index.html or simply click on the 'Bobby AAA approved' icon.

The DEMOS site tested with the WAVE accessibility checker (external link).

The site as seen in Mozilla 1.3a, Opera 7 and Internet Explorer 5 (JPG images), all standard-compliant browsers that display layout and presentational instruction correctly.

The site as seen in Netscape 4.76 (JPG image, size reduced), a browser that understands enough CSS to mess it all up. Uses a stripped-down stylesheet.

Opera 7 Accessibility layout with font size at 80% (Accesskeys are displayed) (JPG image).

Opera 7 High contrast and font size increased to 150% (JPG images).

[Previous] | Previous || Table of Contents || Next | [Next]