Cookies

We use cookies to ensure that we give you the best experience on our website. You can change your cookie settings at any time. Otherwise, we'll assume you're OK to continue.

Durham University

Computing and Information Services

Improving Navigation Accessibility

The Priority 2 recommendations cover site accessibility as well as page accessibility. These recommendations also give usability improvements. One of the key areas is that navigation between pages must be accessible and easy to use.

Web Accessibility Initiative Guidelines

This page explains how to meet:

  • Guideline 13.1: "Clearly identify the target of each link."
  • Guideline 13.2: "Provide metadata to add semantic information to pages and sites."
  • Guideline 13.3: "Provide information about the general layout of a site (e.g., a site map or table of contents)."
  • Guideline 13.4: "Use navigation mechanisms in a consistent manner."

Reasons for following these recommendations

The ability to navigate between pages is essential. A consistent navigation system makes it much easier for people to navigate the site, determine their current position in the site, and find the content they want.

The only universally supported method of linking is the <a href="link"> tag. Image maps, document relationship links, and links via Javascript and Java must all have alternatives, or some pages may become unreachable.

Providing a site map or table of contents also increases the likelihood that a search engine will index more of the site, by providing more links to follow.

Adding metadata to pages can provide information about the author, copyright, revision history, keywords and so on. Due to abuse in the past, most general search engines ignore these attributes. However, local search engines can use them very effectively.

Link text must make sense out of context. The ability to skim a document by links, or get a list of links, is part of some browsers. If the link text identifies the link target even out of context, then it improves navigation speed. Therefore, link text such as 'click here' should never be used. It also makes it more useful to search engines, as some use the text of a link to give ranking on those words to the target page. This Google search for the words 'click here' gives an interesting consequence of this effect.

If you do not have a way to start on any given page and go to any other page (for example, if your pages have no links apart from an index page which links to them all), then users coming in to the site at the wrong point may be unable to navigate at all. Pages using frames for navigation are especially vulnerable to this.

How to improve the accessibility of navigation.

Meta-data can be added by the use of <meta> tags. They have a name and a content attribute. Any legal name may be used, but you should pick a consistent set for your site. In addition, the <title> tag should be used to give a title for the page. This title should be unique on the site, and should be readily identifiable in a list of titles (as many browsers use for bookmark lists).

In Dreamweaver, you can add meta data by using the Meta icon in the Head tab, and the page title can be typed in to the Title box.

For ideas on meta data to store, you could read the Resource Description Framework specification.

Meta data (apart from <title>) is usually ignored by general search engines due to widespread abuse in the past. However, it may be useful for the construction of specialist search engines.

Context

Link text must make sense out of context. A link such as the above is far better than one that said 'to find the Resource Description Framework click here'. Also, bear in mind that your users may not be using a mouse to navigate. Rephrase sentences until you can make sensible link text. Also, try to keep the link text reasonably short.

Never use 'here' or 'click here' as link text, as it is useless out of context, and the latter assumes a mouse is being used.

If it is useful to have a link with more context than it can have in its own text, you can use the title attribute to give additional context. You can add titles to any tag in Dreamweaver by going to 'Edit Tag' and looking in the 'Stylesheets/Accessibility' section.

You can use the Link Context Checker which will display each link on a page out of context to assist assessment.

Positioning

Design the site so that any navigation structures appear on every page in the same place and behave consistently from page to page. On any site with more than about ten pages, include a site map or table of contents that is linked to from the other pages on the site.

Appearance

Make sure that links can be distinguished from body text. The default styles allow this easily, by underlining and colour change. Make sure that links can still be spotted on a page at a single glance. Make unvisisted and visited links appear different, if possible.

To aid usability, keep to the convention of blue unvisited links. You may decide to use different colours, but you should never use blue for visited links, nor purple for unvisited. Also, avoid using blue or underlining for non-link text in graphical media. The conventions for visited links are less strong, but a different colour should be used. Purple, or a pale blue are common choices for visited link colours, which will increase user familiarity.

Checking

Most aspects of navigation cannot be checked as accessibility checkers view each page individually. However, some checkers will detect link text that may be too short to have good contextual information. There may also be checks for the presence of meta data, but these cannot check for appropriateness.

A useful way to check navigation usability is to get a third party to try to find information on the site and watch where they look for the information. Avoid giving them hints, or you will get less information about your site's usability.

Some browsers have the ability to generate a list of links. Opera 7 has the option to produce a list of links (in the navigation menu). There is an extension to Internet Explorer 5 that includes link listing. IBM Home Page Reader allows the browsing of a page by using the tab key to read the link texts in order. Alternatively, you can use the link context checker to generate this list.