• Although this is a long article, you can read only those sections you are interested in, navigating either using the Table of Contents at the top of the page or by following the links from this summary.
  • A number of references have been made in this article to disabling JavaScript. If not familiar with what this means or how to do it, you may wish to read the article linked to here before continuing.
  • Internet Explorer is referred to throughout this article as IE, and versions of it, such as Internet Explorer version 7 or Internet Explorer version 5.5 are referred to using the shorthand form IE7, IE5.5 and so on.
  • The Web Accessibility Initiative ( is mostly referred to in this article using its acronym, WAI.

A great deal of work has gone into making this website accessible to the widest possible readership. The key points are as follows:


The typography and layout of the pages on this site have been chosen to maximise readability. It is anticipated that visitors be less likely to need to zoom or to increase the text size. For details see section 6.


All of the pages on this website are printer-friendly, and in addition, all multi-page articles have a PDF version (accessible via a Download PDF icon at the top of the page), allowing printing of all pages of a given multi-page article in one step. For more details see the articles Printing Web Pages on this Website and Using the PDF Files on this Website.


People with JavaScript disabled will find that the drop-down menus on the site still continue to work. For details see sections 2 and 2.2.


The menus can be navigated using the keyboard, whether JavaScript is enabled or disabled, and are fully accessible to screen readers. The menus also function as a site map. For details see section 2.1.


The contents of the JavaScript pop-up notes which are used in this site are all accessible if JavaScript is disabled. If you are using a screen reader it is recommended that you disable JavaScript while using this website. For more details see section 4.


Great care has been taken to ensure that the site and its menus are fully accessible on small screens and at large zoom levels. For details, see sections 2.3, 4.1 and 7.2.


CSS "Pseudo-frames" have been used in order to keep the navigation accessible while you scroll down the page. This feature is designed to enhance the usability of the site; but if issues are encountered this feature can be turned off by disabling JavaScript. For more details see section 5.


Most of the external links on this site, both in the html and PDF documents, are in the form of short, tinyurl links (aliases that automatically expand to the full web address when you click on the link). This system has been used rather than using the more normal footnotes, both because it maximises on-screen readability and reduces url length for instances when addresses need to be typed into a browser address bar.

Those using screen readers who are tabbing through the links on a page in order to find the navigation links can therefore ignore all tinyurl links for that purpose.

For more details see section 3.


Those links that automatically open in a new tab or window always display a tooltip when you hover over them, which states click to open link in a new tab or window, so that you are not taken by surprise when a new tab or window opens.


For reasons explained in section 7, the font sizes on this site have been defined in pixels. If you are using IE5.5 or IE6, and if you need to increase the text size, you can simply go to IEs Tools + Internet Options menu, then click the Accessibility button, and select Ignore font sizes specified on web pages.  You will then be able to increase or reduce the text sizes using IEs View menu.

If you are using IE7 you can either follow the above procedure or you can use the zoom feature instead (which you can access by pressing Ctrl+ or Ctrl-). IE7s zoom feature has many bugs, however (which will be fixed in IE8); as a result of which, if you wish to use its zoom feature on this site, it is recommended that you disable JavaScript. For more details see section 5.1.

You can increase the text size or zoom without problems in any non-Microsoft browser (such as Firefox, Opera, Safari, etc.).


To ensure that it works as intended with the widest possible range of web browsers still in use, this website is fully compliant with the HTML 4.01 and CSS Level 3 standards, and in addition, care has been taken to ensure that it works properly in older browsers such as IE5.5. CSS, rather than html markup, has been used to define attributes throughout. For more details see section 10.


Heading levels are structured in accordance with WAI guidelines; <strong>, <em>, <b> and <i> tags have been used appropriately, and meaningful Alt text has been used for all images, in line with the WAI guidelines – for more details see sections 8 and 9.


The Drop-down Menus

The main menu items that have a drop-down sub-menu associated with them have a down-arrow next to them to indicate this, whereas on the sub-menus, items that have a sub-sub-menu associated with them have a right-arrow next to them. The menu system is up to three levels of sub-menu deep, and is in effect also a complete site map.


Keyboard Accessibility

In most browsers, when JavaScript is enabled, the drop-down menus on this site can be operated by tabbing to the relevant main menu item and then pressing <Enter>. One can then navigate the entire menu structure using the arrow keys on ones keyboard. In order to go to a page that the menu links to, press <Enter> again.

To dismiss the drop-down menus using the keyboard, after youve invoked them, you can press the left or right arrow keys on your keyboard until the focus is on a main menu item that does not have a drop-down menu associated with it (i.e. the Search and Home menu items).

Unfortunately the keyboard accessibility feature does not work in Safari or Opera; and it also doesnt work if JavaScript is disabled. However, you can still use the menus when JavaScript is disabled, and they can then be navigated with the keyboard  (see section 2.2 below) – so Opera and Safari users who need to be able to navigate exclusively with the keyboard should disable JavaScript when using this website.


Using the Menus When JavaScript is Disabled

Unlike the drop-down menus on most sites, those on this site are fully functional in most browsers when JavaScript is disabled.

When JavaScript is enabled, one has to click on the main menu items in order to invoke the drop-down sub-menus associated with them (so that they wont appear unexpectedly when you dont want them to). However, when JavaScript is disabled, the drop-down menus are invoked if you simply hover over a main menu item with your mouse.

The drop-down menus dont drop down in IE5 or 6 when JavaScript is disabled, and although they do drop down in IE7, IE7 has some bugs that make some of the sub-menus hard to read when JavaScript is disabled.

Partly for this reason, and partly in order to allow the menus to be accessible to keyboard-only users who have JavaScript disabled, if you click on a main menu item that has a sub-menu associated with it, when JavaScript is disabled, you are taken to a site-map–like page listing all of the sub-menu items (and any sub-sub-menu items) for that main menu item, as a list of links.

So one way or another, the menus are fully accessible for everyone when JavaScript is disabled.


Using the Menus on a 640x480 Screen and at Large Zoom Levels

The menus have been designed so as to be fully accessible on a 640x48 screen and at large zoom levels. Mostly this has been achieved by making some of the sub-menus left-sided and relatively narrow, as in the following screen capture:

Screen Capture of left-sided sub-menus

In addition, when JavaScript is enabled, some sub-menus that would otherwise go off the edge of the screen at 640x480 resolution are automatically kept within the window, as in the following screen capture:

Screen Capture of sub-menus being kept in window

When JavaScript is disabled, the text in some of the sub-menus does go off the edge of the screen when viewed at 640x480 resolution, so tooltips have been used to ensure that this text is still readable, as in the following screen capture:

Screen Capture of tooltips on sub-menus


External Links

Most of the external links on this website are really inline footnotes that link to reference sources that support the statement being made. Rather than using conventional footnotes containing links to references sources as most scientific articles do, this site uses tinyurl web addresses embedded within the article. This is both more user-friendly than using conventional footnotes and more printer-friendly than using the long form web address.

There is a web service based at that allows one to type or paste any long url into a text box and press a button, and it will create a very short alias url starting with the prefix followed by some letters and numbers; and if one then uses the short url that it creates in place of the long one, one will automatically be redirected to the original, long url.

As well as making the webpages and PDF files more readable, using shorthand (tinyurl) web addresses in this way also means that if one is reading a printed copy of a document, and needs to type a web address into ones address bar (as opposed to being able to click on a link when reading on screen) then one will have a much shorter url to type.

The only downside to this is that the Web Accessibility Initiatives Guidelines state that the display text of links should always be meaningful. However the reason for this guideline is that people using keyboard navigation tend to tab though the links on a web page in order to find the navigation links on the webpage. In that context, the tinyurl links on the site are meaningful, in that if you encounter one, you can be assured that it is not a navigation link but is akin to an inline footnote. So when tabbing through the links on a page in search of the site navigation, tinyurl links can always be safely ignored.


Pop-up Notes

There are many pop-up notes on this website that appear, if one has JavaScript enabled, when one hovers with the mouse over text highlighted in yellow; or when one hovers over certain graphics. The text in all of these pop-up notes is also accessible if one has JavaScript disabled, and users of screen readers are therefore advised to disable JavaScript while using this website.

There are four categories of pop-up note in use:


Most are functionally equivalent to inline footnotes, and are indicated by a highlighting of the text being referenced with a yellow highlighter like this [Note: This is an example of a pop-up note serving the function of an inline footnote, which prints, and which, if one has JavaScript disabled, is displayed within the document on screen, in green text]. If one has JavaScript disabled, the inline footnote is displayed within the document in green text, at a smaller point size than the surrounding text, starting with the word Note:, and wrapped in square brackets. It appears either to the right of, or below, the highlighted text. If one hovers over the highlighted text with JavaScript disabled, the tooltip (or title) states: See the note in green text on the right, or See the note in green text below, as appropriate.

These inline footnotes also print – see section 2.2 of the article: Printing Web Pages on this Website for more details.


At the top-left of most web pages on this site is a bookmarks icon, which, when one hovers over it with JavaScript enabled, displays a list of links, which one can click on, to go the bookmarks on that page.


In the case of single-page articles such as this one, this serves the function of a Table of Contents for that article, and the icon looks like this:

.Table of Contents icon

Having clicked on an item in this Table of Contents to go to that section, one can then use the Go to top of Page link in the navigation bar at the bottom of the screen (or press <Ctrl>+<Home>) to return to the top in order to select a different section.


In the case of multi-page articles such as the Full Complaint, the icon allows one to capture the web address of a given bookmark in ones address bar by going to it, so that one can send someone a link straight to that bookmark (or post a link to it in a newsgroup). The icon itself is therefore slightly different, and looks like this:

Bookmarks icon

If one has JavaScript disabled, then these icons display a tooltip instead, and the Table of Contents or list of bookmarks are embedded within the article itself, near the top or bottom of the document page, respectively, in green text with orange links. These sections do not print.


At the top centre of some pages, a Key icon, displays a key to the colour-coded text used in the article, when one hovers over the icon with JavaScript enabled, but usually links to a separate web page containing the key if JavaScript is disabled (although in some webpages the key is displayed within the article, rather than on a separate web page, if one has JavaScript disabled):

Key icon


All multi-page articles have a Download PDF icon at the top right of the page, allowing one to print all of the pages in the article at once:

Acrobat icon

Single-page articles have an icon in the same position indicating that the web page is printer-friendly and therefore that no PDF version of the article has been provided:

Printer-friendly icon

These icons display a pop-up note when one hovers over them containing either a link to the PDF version of the multi-page article, or to a page on how to get the best results when printing web pages on this site, in the case of single page articles but the icons link to a separate web page containing the pop-up notes text if one has JavaScript disabled.


Finally the pop-up notes on some graphics and a few links are functionally equivalent to tooltips (or titles); and if one hovers over these with JavaScript disabled, a tooltip appears in place of the pop-up, displaying the pop-up notes text.


The Table of Contents Pop-ups Are Optimised for Viewing at 640x480 and at Large Zoom Levels

As mentioned above, single page articles such as this one have a Table of Contents icon at the top of the page, which displays a clickable Table of Contents when you hover over it with JavaScript enabled.

On pages where there are a large number of entries in the Table of Contents, a scroll bar is present in order to make it accessible in a 640x480 window, and at large zoom levels – as shown in the following screen capture:

Screen capture of pop-up scrollbar


Alternative Stylesheets

If viewing the site with JavaScript enabled, the navigation bars at the top and bottom of the screen remain visible as one scrolls down the page, so that one doesnt, for example, have to scroll to the top of the page simply in order to access the menu.

This is done using CSS rather than frames, and unlike frames, it is bookmarks-friendly and search engine–friendly. For most users it is anticipated that this feature will greatly enhance this sites user-friendliness and accessibility; because it means that the menu at the top of the page and the navigation bar at the bottom are always accessible.

The latter contains a “Go to top of page link in single-page articles; while in multi-page articles it contains Next Page, Previous Page and Table of Contents links. Having those links always accessible without having to scroll to them can be a significant time-saver.

However, there are some accessibility issues with these pseudo-frames that will affect a small proportion of users, so for that reason, if viewing the site with JavaScript disabled these pseudo frames are not used, and the menu and navigation bar do not remain visible when one scrolls down the page.

(Note for technically-minded readers »)

[Note: Although there are two stylesheets, one of which is in use if one has JavaScript enabled and the other if JavaScript is disabled, these havent been implemented as alternative stylesheets in the W3C sense of the phrase – which means one cannot switch between them other than by switching JavaScript on or off. There are two reasons why it has been implemented in this way:


In order to make alternative stylesheets in the W3C sense persistent as one goes from page to page, one needs to run some JavaScript when a document loads that checks which stylesheet to load and then loads it; and due to a timing problem in all browsers, this code is not bookmarks-friendly – if one follows a link to a bookmark on another web page, the reloading of that pages stylesheet when the document is loading means that one is taken to the top of the page instead of to the bookmark.


There are bugs relating to the use of alternative stylesheets in some browsers. When the settings for certain elements, such as the overflow attributes for a div, conflict between alternative stylesheets, some browsers display the page incorrectly – whereas they display the same page correctly if either stylesheet is loaded on its own.]


Why the CSS Pseudo-frames are Not Loaded if one has JavaScript Disabled

The accessibility issues with the CSS pseudo-frames stylesheet used on this site are as follows:


If using the pseudo-frames stylesheet with JavaScript enabled, then:

  • In Internet Explorer, Firefox and Netscape, one can scroll down the page using the arrow keys on ones keyboard as soon as the page loads (which is a good thing), but ...
  • Unfortunately, in Safari, although one can use the keyboard to scroll down the page, one has to press the tab key first (or click once in the page with the mouse) in order to be able to do so. (If tabbing once doesnt allow you to scroll down the page with the keyboard, then select Preferences on the Edit menu, and on the Advanced tab, select the item: Press Tab to highlight each item on a web page.)
  • In Opera, one can scroll with the keyboard, but only after clicking once on the web page with ones mouse – tabbing into the page doesnt work.

(Scrolling with the mouse works without any problems in all browsers.)

Thus for Opera users who need to be able to navigate exclusively with the keyboard, the Pseudo-Frames stylesheet is not accessible; and anyone who falls into this category should disable JavaScript when using this website. Safari users who want to be able to scroll with the keyboard without first having to either press the tab key or click with the mouse may also wish to disable JavaScript in order to turn off the pseudo-frames stylesheet.


If one could use the Pseudo-Frames stylesheet with JavaScript disabled (an option which has not been made available), then keyboard-only navigation would be impossible for Opera users; and for users of other browsers it would be possible only after tabbing into the page first..


Internet Explorer (or IE) version 7s zoom feature is very buggy, but it works reasonably well on this site, provided the pseudo-frames stylesheet is not in use. If that stylesheet is in use, the pages on this site become a mess when one zooms in IE7. So people who are using IE7 and who need to be able to zoom should disable JavaScript before zooming.

IE7s zoom bugs have been fixed in IE8 beta, so one will be able to zoom without any problems, with or without JavaScript enabled, if using IE8.

Operas zoom also works without problems on this site, with or without JavaScript enabled; as does Firefox 3s zoom (which is currently in beta).

Of the major browser vendors, only Apple, with its Safari browser, has yet to announce any plans to support zooming (which is unfortunate).


Typography and Readability


Font Sizes

The body text on this site uses a slightly larger default font size than that found on most other websites; and fewer characters per line, both of which enhance readability.

In addition, the text in the many pop-up notes on this site that appear (if one has JavaScript enabled) when one hovers over text that is highlighted in yellow; and when one hovers over certain graphics, has a significantly larger font size than the text in standard browser tooltips, in order to make them more readable.


Characters per Line

It is generally accepted (see for example that for maximum readability, the number of characters per line (CPL) in a single-column document should average within the range 50 to no more than 80; with 65 to 75 CPL being considered by many experts to be the optimum.

Full screen line lengths, which are displayed on many websites, are generally considered by readability experts to be difficult (and tiring) to read, especially if reading a long document. (Ironically, the Web Accessibility Guidelines at themselves break this rule, as do many other web articles that discuss accessibility.)

The average number of characters per line in both the web pages and the PDF files on this website is 66.


Line spacing

The body text on this site uses slightly larger line spacing (130% of the font height – the browser default being 120%) than most websites do, which enhances readability.


Inter-paragraph spacing

This site follows the typographical rules of context-based inter-paragraph spacing that are widely used in professionally produced printed literature but which, unfortunately, are rarely used on the web. So for example, the gap between the items in a numbered or bulleted list is smaller than that between paragraphs of body text; there is a small gap between a numbered or bulleted list and the paragraph preceding the list; and a much larger gap between the same list and the following paragraph; heading paragraphs have a small space below them and a much larger space above them, with the size of the space above them being larger for major headings than for minor headings; and so on.

As well as aiding readability because the inter-paragraph spacing indicates the context of the paragraph, this also creates white space, which also enhances readability by reducing perceived clutter.


General Typography

Proper typographical symbols (as opposed to their keyboard equivalents) have been used throughout this site for such characters as quotation marks, apostrophes, dashes – and so on.

Subscripts and superscripts have been used for chemical formulas such as CO2 and scientific expressions such as W/m2. Internet Explorer Firefox and Netscape display these perfectly, although unfortunately, Safari and Opera do not – they both insert unwanted white space above or below the line containing the expression, so that it looks as if there is a paragraph break in the middle of a paragraph. It is to be hoped this will be remedied in future versions of those browsers. In the meantime, as the vast majority of internet users have either Internet Explorer or Firefox, the appropriate use on this site of subscripts and superscripts will increase readability for most people.

In addition, because sans serif quotations marks and apostrophes do not display clearly at screen resolution, these symbols have been formatted using a serif font, unlike the surrounding text, which is formatted for screen display using sans serif fonts. (Printouts of the web pages on this site are formatted differently – see section 2.4 of the article: Printing Web Pages on this Website for details).


Minimalist Design

The design of this website is intentionally minimalist, allowing ones eye to focus on the content one is reading rather than on the websites design.


Reduced Contrast

When reading on screen, pure black text on a pure white background results in screen glare, and is tiring to read. For this reason, the text is not quite black (it uses the hex code #333); and the background colour of the simulated document page is off-white rather than white (it uses the hex code #fffbf5). This subtly reduces the contrast and makes reading on screen a less stressful experience.


The Use of Pixels to Define Measurements on this Site

The screen media stylesheets used on this site define most sizes, including all font sizes, in pixels; whereas the print media stylesheets define measurements in points or inches.

There are a number of reasons for using pixels, rather than the more widely used ems or percentages, for defining distances on screen: the main ones being that it is the only way of ensuring that a web page will look the same in all browsers; and that because graphics sizes are necessarily defined in pixels, if graphics form part of the layout of a page (as they do on many pages on this site), then it makes sense to define all distances and font sizes in pixels for consistency.


Font Sizes

One reason frequently given, in articles on the subject, for not using pixels to define font sizes is that if font sizes are defined in pixels, Internet Explorer doesnt allow its users to change the text size. However:


Because of the typographical features of this site (see section 4 above), it is anticipated that far fewer users will feel the need to increase the text size on this website than on most other sites.


Zooming is a far superior method of increasing the text size in any case than using the View + Text Size command, because all elements of the page, including graphics, are then resized proportionately, whereas they arent if one just increases the text size – just as they are resized proportionately if changing the zoom level in a PDF file or in a Word document; or, in the case of hard copy documents, if one uses reading glasses to increase the text size.

Internet Explorer version 7 (IE7) and later versions support zooming, which is accessible using the Ctrl+ and Ctrl- keyboard shortcuts, as well as via the menu. As discussed in section 3.1 above, IE7s zoom feature is very buggy, but it works satisfactorily on this website if JavaScript is disabled. These IE7 zoom bugs have been fixed in IE8 (which is currently in beta)

IE5 and 6 users for whom accessibility is an issue are encouraged to consider upgrading to version 7upgrading to version 7 (by going to, which as well as supporting zooming, is much more standards-compliant than previous versions, and therefore offers a significantly improved web browsing experience.


All versions of Internet Explorer from version 5 upwards, allow the user to ignore the font sizes specified on websites, and to use the browsers default stylesheet to determine font sizes. This option is available by going to the Tools + Internet Options menu, clicking the Accessibility button and selecting the option to Ignore font sizes specified on web pages. This is very simple to implement, and is a very adequate solution for anyone with visual impairments.


For blind people or for anyone who is using a screen reader, font sizes are irrelevant


The Width of the Simulated Document Page

The width of the simulated document page has also been defined in pixels, for the reason mentioned above, that the width of graphics must necessarily be defined in pixels, so if graphics are used on a website, it makes sense for the width of everything else to be defined in pixels as well.

This does mean that if one alters the text size (as opposed to zooming), the width of the document page remains unaltered, but:


As discussed in section 6.1, zooming is a greatly superior method of increasing the text size, being the only way of doing so that keeps all elements of the page in the intended relative proportions. With the exception of Safari, all major browsers either already support zooming or will do so soon.


If one increases the text size in Firefox 2, Netscape or Safari, the page remains quite readable, so this isnt a major issue.


The width of the text area of all of the pages on this site fits within a 640x480 window, so that it can be read at that resolution without scrolling horizontally (although one has to scroll horizontally once per page in order to centre the text area within the window – but thats all).

Incidentally, although the existence of some serious bugs in IE7s zoom feature have been mentioned in sections 3.1 and 6.1, it should be noted that one aspect of IE7s zooming (and of IE8s zooming, which appears to be bug-free) is greatly superior to Operas; and that is its scaling of graphics. Internet Explorer can scale graphics to nearly double their original size without a major decrease in image quality, whereas in Opera, the image quality decreases dramatically even if one zooms in by the minimum amount. One hopes this will be addressed in future versions of Opera (and in Firefox 3), as it is a fairly serious accessibility issue.


Alt Text, and the <Strong> and <Em> Tags

All images on this website use meaningful Alt text, so that if one has switched off the display of images in ones browser, the Alt text displays in place of the image (unless one is using Safari, which unfortunately does not display Alt text, in breach of the Web Accessibility Initiatives guidelines).

In the case of images that serve purely as layout lines and which have no semantic purpose, the Alt text consists of a series of underscore characters to indicate that a line is present.

With respect to the <strong> and <em> tags, whereas many websites tend to either use <em> and <strong> indiscriminately or to not use them at all, this website uses them appropriately. For example, Internet Explorer is italicised but not emphasised, whereas the following word is emphasised. The idea behind these tags is to allow screen readers to differentiate between text that should be read more loudly or emphatically from text that is bolded or italicised for purely presentational reasons (as in the case of Internet Explorer). Unfortunately, most screen readers simply read the screen and not the underlying code, which means the benefit of using these tags properly is lost; but people who do have a screen reader that supports the <em> and <strong> tags properly will find this web site unusually accessible.


Heading Levels Conform to the Web Accessibility Initiative Guidelines

The Web Accessibility Initiative (WAI) guidelines specify that no more than one level 1 heading should ever be used on a single webpage. In order to comply with this, the article title (or header) on each page has been given the style "Heading 1" (or <h1>), and the top level headings (in the conventional sense of the word heading) on each page have been given the style "Heading 2" (or <h2>) rather being given the style "Heading 1" as they normally would be in word-processing or desktop publishing documents.

In the case of multi-page articles, where the header on each continuation page contains both the article title and the current chapter title in a small text size, the article title has been given the style <h1> and the chapter title has been given the style <h2>. This means some webpages contain the same "Heading 2" paragraph twice, once in a small text size in the header, and once in the article proper in a larger point size, as in the following screen capture:

Screen capture of two Heading 2 paragraphs


Standards Compliance

All pages created on this website validate on the W3Cs markup validation service, ensuring compatibility with all standards-compliant web browsers. In addition, the pages on this site display as intended in all versions of Internet Explorer from version 5 upwards, in order to make the site accessible to the widest possible readership.

The web pages on this site have also been tested with all the browsers on the website at The only browsers there that dont display the site properly are Dillo, which has very poor CSS support, and IE4 (although the site is still quite readable in IE4).

CSS, rather than html markup, has been used to define attributes throughout.

Valid HTML 4.01 certification   Valid CSS certification

[Note: if validating the CSS for the web pages on this site, please select More Options on the W3C CSS Validation Service web page; and where is says Profile, select CSS Level 3.]


Note Regarding Safari

Apples Safari browser has a very attractive and user-friendly interface, yet from an accessibility standpoint it is by far the worst of all the major browsers, for reasons discussed in this article and in the article Printing Web Pages on this Website. This is surprising, both because of Apples well-deserved reputation for usability, and because of the companys stated commitment to accessibility at One hopes these issues will soon be addressed by them.


Final Note

Do you like this website? If so, you can nominate it for an award. »

[Note: An  award you might like to nominate this website for: the Plain English Campaigns Web Award, at;

Other suggestions welcome (via our Contact page).

Many thanks!