Creating a website is not just a matter of taking all of an organisation’s previously printed publications, turning them into HTML and throwing them online.
Careful thought must be put into the online web publishing medium, which has its own advantages and idiosyncrasies. Only once these basic considerations have been understood will a department be in a position to start implementing a website.
Use each checklist to ensure that your web pages comply with these guidelines
4.2.1 Checklist and summary: Core guidance
4.2.2 Browser specification
Web browser applications have been available for a number of years. In that time each of the suppliers such as Microsoft, Netscape and Opera, have made a succession of modifications resulting in a variety of differing version numbers. There are often a number of different systems on which each version can run.
Each of these renders HTML in different ways. A particular browser release may only recognise specific revisions of the HTML and CSS markup languages or they only have partial implementations of the markup standards. Either way, this has resulted in pages rendering and working very differently in different browsers and on different operating system platforms.
This range of available viewing systems and devices has required Web managers and authors to cater for common denominators rather than individual applications or versions of them. This can mean that the latest fashion or gimmick in the web publishing world cannot be used because it can, for example, only be viewed using the latest version of a particular browser. Although some may see this as limiting it is essential to avoid building web pages that will only work with specific browsers, or releases of them.
Departments must always ensure that all of their web presence is accessible by the widest possible audience. No part of an Internet site should be designed specifically for a particular browser. This would disenfranchise users who happen to use other, equally popular applications.
4.2.3 HTML (Hypertext Markup Language)
HTML files are plain-text files containing special codes that give information to the browser about the structure of the file. HTML is rather similar to the typesetting codes used by modern typesetters, in which blocks of text are surrounded with codes that indicate how the text should appear. An HTML file can point to graphics (see below for formats) and can contain pointers to other files (and thus create a hypertext link). HTML files are intended to be viewed with a World Wide Web client program (known as a browser), such as Netscape Navigator or Microsoft Internet Explorer.
The HTML4 and later recommendations have provisions to assist accessibility of documents, such as:
A major benefit of HTML is the consistently small file sizes in comparison to other formats such as PDF and word processor files.
18.104.22.168 HTML title element
This should be included in the HTML head element on each page. It is important because it will identify the page if the user decides to bookmark the page.
The title element:
must be included in each page;
should be no longer than 60 characters in length; and
should have a meaningful syntax, describing your organisation and the content of the page, for example, organisation -section - page:
22.214.171.124 Text navigation
The homepage of an organisation’s website should set the shape and feel for the design and user functionality. This should in turn be adhered to by all other parts of the site. The most important part of this template’s function is to establish a consistent and intuitive navigation policy.
To optimise usability and functionality, the first aspect of a page to appear on a user’s browser, after the title, should be a text navigation bar. This will help establish a content for the website and will also be an important guide for those users who find using a standard web browser difficult.
126.96.36.199 Core navigational elements
Each page within an organisation’s website should aim not to contain more than ten navigational elements in a string. Consider for example:
This should be the first option available in the text navigation area and should be internally linked to the document’s main heading. This enables users with a screen reader to jump past repetitive navigational elements that they may not wish to use on the page.
Each individual element of a website should have a direct link back to the website’s homepage.
Description of organisation
A user may have entered the organisation’s website from a number of different routes, linking from another site or via a search facility. A user should always have the ability to link directly to an introduction explaining the organisation’s responsibilities and duties.
This is an extremely useful option to enable users to orient themselves in an organisation’s website structure. A sitemap should not be offered only in a graphic format, a text option should always be provided as well.
A user should always be able to link directly to an organisation’s ‘What’s new’ listing if the website has one.
Feedback or Comments
This should either link to a structured form asking particular questions or offer a free-format email submission.
If a free-format text email option is chosen it is best to avoid using ‘bucket’ email addresses, ie one email address for all enquiries because over time this could become very difficult and time consuming to administer.
Whatever system is implemented, a number of points should be considered:
A direct link to an organisation’s help section will inform users of any proprietary formats used on the website and how to access any required plug-in software.
This should be a site-specific search facility for the organisation’s website. This is extremely useful for larger organisations that have large, diverse sites. Small organisations may feel there is no requirement for this facility, although it is always desirable.
A user should always be able to link directly to an organisation’s ‘access key information’ and use the UK Government Access Key System. See section 2.4.4 UK Government accesskeys standard.
This service may already be available for organisations through the Central Office of Information (COI). If not, this facility can be a valuable information resource for users.
188.8.131.52 Graphic navigation
A text navigation area at the very top of the page will not replace graphic navigation; rather it will complement it. The same rules must be adhered to whatever tool is used to help the user navigate round the website.
Whenever graphics are employed as navigational aids it is important that each button or icon carrying a link has a meaningful ‘alt’ attribute and value (this is covered in section 184.108.40.206 Alt attribute for accessibility).
Navigational aids must be consistent and intuitive in their appearance and function. A basic number of major areas within the website should be linked to. These can then be expanded as the user goes deeper into the site.
4.2.4 Internal links
Any document or section of a document will invariably be larger than what can be physically displayed within a web browser’s window at any one time. Most users will have monitors with a screen size of 800 pixels by 600 pixels, although many will have smaller screens.
Documents written in English are read left to right, top to bottom. A document displayed on a browser will always have the information contained in the top left-hand corner on screen when the page is first delivered to the user. It is very important to make best use of this space.
A browser has a scrolling function that enables the user to move up and down a page. At worst, this may discourage use of the document by users with a motor disability who find it difficult to use a mouse.
Each page should include a selection of internal links to different parts of the document that has been loaded. This will enable users to access important information as soon as they receive the page.
Each of the sections contained within the document should include a Back to top button that is an internal hyperlink so that a user can quickly return to the top of the displayed page.
Place an identifier at the top of the page, such as
Then place this message at the end of each section of the document’s report. The hash signifies to the browser that the hyperlink is internal, within the document displayed on the user’s browsers.
<a href=”#top”>Top of page</a>
Each of these elements reduces the need for a user to scroll unnecessarily.
For documents to be clearly understandable they need to be broken up into manageable, coherent sections. The correct use of the various headings available in HTML can be a very effective tool.
Header tags should be used in order to give a document clear, and concise, structure, ie, <h1> for main heading, <h2> for sub headings, <h3> etc. These can then be given the required styling in the CSS.
Headings should always be in lower case, except for the initial capital of the first word. This will aid readability.
220.127.116.11 Summary information
A document of any length can cover a wide range of information that may not be immediately obvious to the user.
To ensure that the appropriate audience reads a document it is good practice to include an informative summary of the document at the very top, directly under the document heading. The summary should:
This will help the user identify whether the document is appropriate to them and will also be used by the free text search engines that do not utilise metadata (see section 1.7 Getting users to your site). These search facilities will take the document title, document heading and possibly the summary as their information resource to be delivered to users.
1.7 Getting users to your site: metadata, search engines and promotion
4.2.5 Uses for metatags
As well as containing data for search engines and electronically cataloguing pages, metatags can be used for a number of other actions, for example, refreshing pages and re-directs.
It should be remembered that W3C advises against these practices because some browsers do not support them and therefore they cannot to be relied upon to work.
The implementation of metadata is covered in section 1.7.2.
18.104.22.168 PICS labelling
This style of metatag enables the author of a document to categorise and rate the page to established standards on the Internet. The ratings can be assigned to any content, ie a page, a collection of pages or an entire website.
This area is covered in greater detail in section 1.8 Platform for Internet Content Selection.
1.8 Platform for Internet Content Selection (PICS)
4.2.6 Validation and testing
Validation is important in ensuring platform independence, but alone is not sufficient. Developers should ensure that web pages are not dependent on a certain resolution, colour depth or font size. They should test and evaluate an early working version (a beta test) of a site with representative users.
Well-authored HTML is a highly structured and usable markup language that is backward compatible ensuring that many web browsers can display information contained within a web page and equally providing accessibility at little or no cost. Although the web is often seen as a visual environment, accessible web pages should adjust and remain accessible in any browsing medium and adapt to allow audio and Braille presentations.
Once the page is completed it can be checked for conformity to a specific version of HTML by running it against the World Wide Web Consortium (W3C) automated validator. Cascading Style Sheets should be validated using the W3C automated validator. These validators are available online from the following URLs: