Updated November 2005
This document lists guidelines to consider when designing and developing
a web site for browser compatibility, accessibility and
easy of use.
Browser compatibility is defined here as an attribute of a site that is
equally readable and navigable by any browser type/version, configuration
or platform set-up.
- Browser type
- Browser version
- For example, Flash.
- Browser configuration
- Such as whether cookies and Java are enabled.
- Platform set-up
- Includes access speed, screen resolution, colour depth and browser width.
Accessibility considerations reflect differences in a site's
visitors and not their browsers.
- Main site usage (e.g., getting from page to page, knowing which
page you're on or reading text) shouldn't depend on the display
- Text in graphics
- To allow text to be translated (by online translation services),
resized (by the visitor within their browser) and indexed (by visiting
search engine spiders), don't put any content or functional text (such
as button labels) in graphics. Use graphical buttons but implement the
labels in HTML
- Don't rely on colour alone to convey information about the site
state. Colour is recognised first (over icons and text) and is
very useful. Supplement colour-coding with text or formatting such
as size and shape.
- Use existing HTML elements whenever possible rather than making a
new class (e.g., for headings and lists). For example, implement
- Font size
- Don't prevent visitors from resizing HTML text in their browser
because of the font unit you use (e.g., px).
Hierarchical site structures
In writing these guidelines, it is assumed that the site content is
arranged in a hierarchical structure: the home page is referred to as
level 1; content sections linked from the home page are referred to
as level 2; pages linked from level 2 pages are referred to level 3,
and so on.
- Have 2-6 distinct main content sections of the web site.
- A site contents page should always available; it will lists
links, by section, to pages at least up to and including level 4.
- Every inner (non home page) page should be assigned to a section and
have a parent page. These will determine what visual cues need to be
included in a page so that the visitor knows where they are in the site (for
example, which section link is shown selected).
- All level 2 pages will be available as (graphical or
visually-different) links from every web page in a consistent style (for
example, as links across the top of pages).
- The name of the current section should be visible on all inner pages
(e.g. by way of an inherited heading).
- If present, links to level 3 pages for a specific section are made
available as text links below or to the immediate right of the level 2 button.
- There should at least be "on" and "off" versions of each section
link. This is easier to achieve if section links are implemented with a
combined button graphic and text label. The "selected" ("on") version of a
button is used to show the current page (a level 2 page) or the current section
(for level 3+ pages).
- More button versions can be used to better indicate state:
- unselected+clickable (when on a different section or the home page)
- selected+unclickable (when you're on the section entry page)
- selected+clickable (when you're further down in the section)
- Each level 2+ page should include the site branding (for example,
the company logo with a page- or section-specific tag text line) at the
top of the page which should link to the home page.
- Pull-down lists should not be used anywhere for navigating to the main sections of the site, nor should a list of plain text links
(that is, no differentiating features) be used for the level 2 links.
client technologies. The only exception to this is if you completely control
the deployment environment, for instance an Intranet for a company,
and can ensure that users will have particular client software at all times.
- Place vertical local navigation on the right-hand side of pages.
The left-hand edge of a browser is a reliable constant and is therefore
the best place to start content; content is more important than site
navigation and content should be the last thing that disappears when
the browser width is reduced and, finally, site navigation can be
distracting when on the left. It's always recognisable because of
its form and so visitors will still be able to recognise it if it's
on the right.
- Logo: every page should start with the site name, usually in
the form of a logo, to indicate the purpose of the site. If the logo
alone does not convey the site purpose, include a tag line (e.g., "Aroma - the makers of good coffee").
- Headings: inner pages should include an unambiguous but
succinct page heading - given the international audience, the heading
should not include any colloquialisms or puns.
- Titles: each page should have a meaningful TITLE which
includes the company name and page heading in some form, so that it works in a
search engine listing, as a bookmark and as the page title.
- Link text: never use "click here" for link text; instead, pick
relevant nouns or verb words or phrases for link text. Links are usually
very prominent on the page and can be skimmed without reading the
surrounding content. Visitors will be able to find useful links if
they're named in terms of what they do or where they go to rather
than that they are a link, which is obvious by their styling. In
addition, some screen-readers list links at the top of pages and
so it makes sense to make links distinct through the link text.
- Skimming: make use of the page heading, short lists, link text,
and bold text to summarise a page for visitors who are skimming first.
- Long pages: long pages (pages with over two screens of copy
on a low-resolution monitor), should include a link to the top of the
page from the bottom of the page or should repeat the site navigation.
- Footer: pages should end with a consistent footer, such as
a copyright notice so that visitors know that a page has finished
- META: all pages should include relevant and appropriate
META keywords. Ideally, these will be tailored to each page.
META descriptions should only be included if different descriptions
can be provided for each page.
- Visual cues: pick a distinct colour and shape (icon) for each
section and apply these to buttons and headings, as well as other page
elements such as background cell shading, list bullets, as appropriate - this
will help answer "where am I?" and "I want to get back to ...".
- Buttons: buttons should be accompanied by an HTML text label
rather than be incorporated into the graphic. This will allow the text to
be translated and resized. Use the button to implement size (to show
prominence) as well as colour and shape (icon) according to the
- Buttons: buttons should not be easily confused with banner
ads, which now have a distinctive shape and style, notably of a composite
photograph or illustration overlaid by type.
- Pertinent information: the company logo, page heading, and
first paragraph of body text should be visible in the first screenful
on a 800x600 monitor (the available drawing space is smaller due to the
browser controls). If you're designing for a larger screen resolutions,
note that visitors with a resolution of 1024x768 or higher will likely
be working in a multi-eindow environment: the browser window will be
in a portrait dimension around 600 pixels wide. Designing for exactly
800 pixels wide will force visitors with high-resolution monitors to
either scroll horizontally or resize their browser, both of which are
unacceptable. Don't design web pages to complete fill 800x600 pixels
(or higher resolutions).
- Page background: backgrounds to copy should be a solid
colour, so that it does not interfere with the legibility of the text.
When testing patterned backgrounds, the priority is that the text is
comfortable to read and not whether the background pattern is visible.
- Link colours: the unvisited text link colour should be more
prominent than the visited text link colour. The visited text link
colour should be distinguishable from normal non-linked text.
- Contrast: if you want light text on a dark background,
set the background, foreground and any link colours in the same way
(e.g., with CSS) so that if CSS is not enabled, the text will still
be legible in the default colours.
- Printing: the design should allow for the printing of pages -
that is, no information required to understand the page should be lost
when the page is printed on a black and white printer. The default
setting of printing (onto white paper) of text as it is coloured on
the page also needs to be considered (that is, page text shouldn't be white). Use print style sheets to hide site navigation from print-outs,
and to make text dark, in a serif typeface and defined by point sizes.
- Animation: No graphic should animate continuously.
If animation is included, only include in "mouseover" versions of buttons
or to loop once for images always visible.
- Width: the combined width for a horizontal row of buttons
should be no more than 550 pixels (to allow for WebTV users) - achieve
this by allowing buttons to wrap if the browser is resized.
- Download: design one set of button graphics for all pages
rather than a different set for each section to minimise download
times and the amount of stuff you'll have to change later if the
- Optimise: optimise GIFs for download by reducing the number
of colours in the palette (e.g., 2, 16, 32,64, 128, 256). Optimise JPGs
by compressing. In both cases, choose the smallest file size with the
most acceptable image quality.
- Image maps: don't use image maps to implement buttons but
instead have one image button per destination.
- Transparency: buttons to go on coloured (non-white or black)
backgrounds should be made transparent because of a
known problem with 15- and 16-bit displays.
- Interlacing: don't mix interlacing and transparency because of
an old Netscape bug which affects how the edges are displayed.
- Interlacing: don't interlace GIFs which include a textual element,
because text is rarely readable when displayed interlaced - people will
be able to start reading non-interlaced text earlier.
- Expansion: the design should allow for the addition of 1-2
high and low level 2 buttons within the year (in terms of colours and
space on the page).
- Liquid HTML: if tables are used for page layout, the cell
containing the main body text should not be placed in a fixed-width
table as this prevents the text wrapping if the browser is resized smaller.
Instead put no or percentage widths on tables and pixel or percentage widths
- Graphics: include meaningful ALT text for all
images (and that doesn't mean "Company logo" for the logo graphic but
"Acme Ltd"). Don't include WIDTH and HEIGHT tags
for images that have ALT text with more than a couple of words - it'll
mean that all of the ALT text will be visible when images are disabled
(and not contrained by the image dimensions). The site should be usable
when images are turned off. For decorative images with no meaningful
description, use an empty "" ALT tag.
- Browser compatibility: older browsers shouldn't be
excluded from the site content or functionality.
- Flash/Java: if using any non-standard
languages or plug-ins, they should not be used for navigation or for
the main content. That is, the use of the site should not depend on them.
- Frames: it is preferred that frames are not used. If using
frames, each web page should have its own URL (that is, be bookmarkable),
frame pages which are accessed via search engines.
- HTML: use standard HTML. Don't make any navigation
or the ability to read any content dependent on any HTML extension (that
is, non-standard HTML) or on CSS. Include a DOCTYPE tag so
that the HTML can be validated.