Graphic navigation: Core guidance - if used in website

Checklist

* Graphic buttons must reflect the textual navigation that appears at the top of each page
* An ‘alt’ attribute and value reflecting its contents must be added to each button
* The value of the ‘alt’ attribute should be no more than 100 characters
* The text within the graphic button must be clearly legible against its background colour
* Each graphic button must use the same ‘accesskey’ values as those assigned within the top navigation area

Summary

Navigation to pages can be achieved by using pictorial buttons saved in either GIF or JPEG format.

It should be remembered that PNG format is not yet widely supported by web browsers.

The effect of graphic buttons can be appealing when designing a web page but can be an annoying hindrance to users if implemented inappropriately.

Implementation

Any page on a website can benefit from appropriately used graphics. They can be used to illustrate a point, label a document as a department’s property or give a more visually rich navigation environment.

When navigation of the website uses graphical buttons the site must always be as easy to use when these graphics cannot be viewed. There must always be a descriptive value to the ‘alt’ attribute given to every navigationally important graphic.

Important:

Turn off the automatic graphics download in your browser to give an indication of what your page is like when you cannot see the graphic buttons. Is it still easily usable?

When graphic buttons are used, specific values to both the ‘width’ and ‘height’ attributes within the image tag must be set. This helps the browser to render the page on screen with the minimum number of screen redraws.

It is important that graphic navigation buttons are not too large, so that the largest area possible is given over to displaying the document whilst also ensuring that the graphic file sizes are as small as possible.

When graphic buttons are relatively small on screen and a small text font is used, it is important that this text is large enough to be legible for everyone and not anti-aliased.