Staffordshire Mediaperson with magnifying glass

home page | about us | accessiblity | writing | audio | resources | web | help

Web Site Initial Audit: explanation

This is a brief explanation of the points made during the Objective Review part of the Staffordshire Media Initial Web Site Audit form.

Page code is syntactically accurate

A web page is essentially a piece of programming that controls a web browser. The programming includes commands that control the size of text, the display of separate image files and links to other files.

It is important that code is correct, though many web sites survive inaccurate code due to the current flexibility of web browsers. It has been proposed that future web browsers require accurate code, to force the issue of accessible web sites.

Accurate code works across the widest range of web browsers (Internet Explorer, Netscape, Firefox for example), and other devices such as mobile phones and PDAs.

Style sheet code is syntactically accurate

A style sheet is a separate file that all or a group of web pages will refer to. The style sheet file should contain details of fonts used in the web site, colour and size of text, size and colour of heading text, and a host of other display features.

This file keeps the look of the web site consistent and easy to change, if the company changes its corporate colours for example, or if it changes its appearance for Christmas or other special events.

A visually impaired user can set her/his web browser to override the style sheet for their own convenience. Someone slightly shortsighted may like all web pages with larger text than standard, whereas other users may prefer all text to be white on a dark blue background. The style sheet should allow this level of control.

Text size can be adjusted by the browser

As explained above, some users need to control the size of text on the screen. This comes as a shock to some designers, who like to see a web page looking the same as a printed page. To be frank, those designers need to move forward.

A web page does not need to offer the facility to change text size or colour, though some programmers enjoy including it. If the style sheet is flexible, text size will be adjustable. The Staffordshire Media explains how users can change text size (www.staffordshiremedia.co.uk/help).

Graphics are captioned appropriately

All graphics on a web page should have a caption (ALT TEXT) which sighted users will only be aware of if their cursor rolls over the image. Screen readers will read aloud these captions, so that partially sighted and blind people know what is on the page. Examples of screen readers doing this are on the Staffordshire Media web site (www.staffordshiremedia.co.uk/accessibility).

A web page author needs to consider the purpose or message of every graphic on a page, and how to convey that to visually impaired people. Some images that are purely decorative may not need captions. Others, such as a pie chart or technical diagram, will need extensive explanation. It is not appropriate to caption a pie chart simply as “pie chart”, unless the web page itself contains a complete explanation: which means, to some extent, that the pie chart is decorative or assistive rather than vital.

Animations do not run forever

Web pages can import a variety of file formats to add animation to a page: animated GIFs, Flash and video files. These different formats allow movement and even movies on a web page.

PeopleStaffordshire Media animation with disabilites often need to control these animations, either because they move too quickly so a pause is useful or, in the case of some animations that reply continually, because the start of the replay interferes with screen reader software.

So it is good practice for animations to stop after two or three run-throughs, to include controls for pause and stop or, in the case of “showcase animations” (my polite description for superfluous show-off animations usually on an opening page), a skip facility.

The graphic on this page is set to stop after three runs. It can be re-started by clicking the browser page refresh button.

The full width of pages print

It is normal for text on web pages to flow into whatever space is available: you reduce the size of the browser window, and the text reformats so you can still read it all. Print-based designers often don’t like this or are unaware of it, so design a web page to a specific width.

Fixed width can cause display problems if the font size is changed and often causes only part of the page width to be printed: that is, you print the page but find that words or letters are missing from the right edge. Often the only solution is to tell your browser to print in landscape mode.

Fixed width pages are usually impossible to read on mobile technology. Standards compliant web page will print perfectly and view on mobile technology.

Adobe Acrobat PDF files

Where it is important for a printed document to look identical to the original, Acrobat PDF files are often used. If tagged correctly, Acrobat files can still allow users to change the text size and the flow of words within the available space to make on-screen reading easier. Since Acrobat Reader 6, a facility to read the document aloud has been included.

Heading tags are used appropriately

A sighted person can skim-read a page and their eyes usually move quickly from one heading to another in a document set out like this page is. However, headings do much more than change the size of text. In both web pages and word-processed documents, the headings are graded numerically in order of importance. For example, in the pervious section the heading “The full width of pages print” is a level 2 heading. This document has only one level 1 heading, which is the main title: “Initial Audit: explanation”.

The previous section on printing pages has a sub-section about Acrobat files, so the heading “Adobe Acrobat PDF files” is a level 3 heading, as it is part of a section of text allocated a level 2 heading.

Visually, these headings show their relationship to each other through the size of the text, but screen reader software can detect the heading levels and offer the user the option of listing just the headings. So, someone using a screen reader can also skim read the document. Without headings, a screen reader can only start at the top of a page and work through to the end.

Choice of words to hyperlink is appropriate

As well as being able to list headings, screen readers can also list links on a page. Therefore, the link needs to make sense if listed. Linking the words “click here” is unhelpful when those words are not in context: better would be “click here for annual review” or simply “annual review”.

© David King, Staffordshire Media, July 2006.


These notes provide additional information for those whose web sites have been audited by Staffordshire Media.

Top of page | Accessibility index | Main index