Page structure for more complex pages

In this session of notes we have used a very simple model of a web page to explain how the various components of a page could be organised in HTML. We have placed the main content of the page as near to the top of the page as practicable to help users of assistive software and text-only browsers to get to the content they want fairly quickly. This is perfectly acceptable for linear content such as these lesson notes. However most websites are a lot more complicated and you will want to offer your users a more practical method of navigation.

Users who come from a search engine may well find that they are not really interested in the page content and want to go elsewhere quite quickly. If all your navigation links are at the bottom of the page the user has to read the whole page to find them, or. more probably, they will use their "back" button to return to the search engine (i.e. leave your site). To keep these "casual visitors" on your site you need to offer them some quick alternatives to show that you have more useful content elsewhere on the site.

The traditional approach is to start each page with a small set of "top level" links that includes links to the home page and the site map. This format has become so common that it is considered to be an intuitive system (i.e. users feel comfortable with it). We could therefore improve the page structure by making it more "intuitive" so that it now looks like this :-

  1. Top level navigation bar
  2. Page content
  3. Secondary navigation bar
  4. Anything else (e.g. advertisements)
  5. Footer navigation bar

The problem now is there may be several links in the top level navigation, objects to tab through the content, then more links in the second navigation before the links in the footer. This giving many tabs through the entire page. This may give keyboard users, people who use older screen readers or specialist keyboards, such as touch screens or hand-held mobile devices a hard time getting through your site.

A solution is to use named page anchors. These are links in your page that take you to somewhere else in your page. These are sometimes called skip to links.

An example of the HTML code folows:

<a name="content"></a>

Then at the top of the page we can provide a link to that anchor such as :

<a href="#content">Skip to content</a>

This will allow returning users to skip straight to the content and ignore the top level navigation links.

We can also use this technique to allow users to "Skip to" the secondary navigation by placing a named anchor at the beginning of the secondary navigation list and then providing a link to this anchor. Most assistive technology and Text-only browsers present the page content in the order in which it is written, so you should always try to write your secondary navigation after your main content. By doing this, it will also help search engines better index your pages and avoid the need for people to first scroll passed all your secondary navigation before seeing any content, which should be the main focus of the page.

Exactly how you structure your pages will depend upon how complex or detailed the page content is, or how the page fits into the overall structure of the website. The web is a flexible medium that allows you to adopt whichever structure best suits your needs, but it is important that you always remember to make sure that visitors using assistive technologies can obtain a quick overview of the page and jump quickly to the content or links that interest them on the page.

What next

Theoretically you could now create all the pages of your website and publish them for people to see. You are able to write the material you need for your content. You can structure pages in a semantic way so that browsers and assistive software can understand the page logic. You just need to add a site map with links to each page and you will be well on your way to having an accessible website. However your pages would only contain text, be presented in a linear fashion (line by line down the page) and be rather dull. We need to add some style to the pages to make them look more appealing. We should also add some images to help make our text easier to understand and generally make it a better user experience.

In the next few lessons we shall learn how to create an interesting "look and feel" for our pages without introducing anything that makes them harder for disabled people to use. In fact, by making our content more visually appealing, we are helping many people have a better experience using the site, making it easier and more enjoyable to use.