Navigation

A consistent and predictable navigation scheme is a very important aid to website accessibility and so you should ensure that the navigation scheme is consistent in behaviour and location throughout the website. A sitemap should always be included to give users information about the general structure of the site.

Mark–up for redirects or periodically refreshing pages must not be used, this must be done server–side. When using a dropdown list for navigation it must not be activated by a single mouse click.

All pages must have a link back to the homepage to assist users if they become lost. The user must be provided with information that informs them where they are in the process such as a breadcrumb.

If the page allows the user to log in then ensure the log in link is one of the first to be accessed within the tab order.

Multiple ways to find other web pages on the site must be available; such as site map, for large sites a sitemap must be provided.


All buttons and links must be clearly worded indicating their function, making it clear to the user what will happen when the button/link is selected. Links must be styled to clearly show a difference from the surrounding content. When active or focused the link should show the action clearly by more than simply a change of colour, such as by an underline. All links, especially graphical links, must have sufficent spacing between them to ensure they can easily be individually selected.

Colour alone must not be used to distinguish a link from surrounding text, additional differentiation must be applied when the link is hovered over or receives focus. Links must have :focus styles to ensure tab focus is highlighted. Try to avoid overwriting the browser default outline where possible.

All links must contain enough useful information about their destination to make sense on their own, without surrounding text or graphics. Indicate when a link is to something other than an HTML page (eg a PDF document) and include information on the file format and size within or directly after the link – eg Annual Review 2008 (PDF 2.3MB).

External links (Links that will take the user out of the current site) must be indicated to the user. This should be done using appropiate title text and possibly through a visual indication such as an icon in context with the link.

Skip links

Skip links are links to another part of the page that allow visitors to navigate their way around a web document, without having to cycle through other content on the page. Skip links primarily improves screen reader and keyboard user’s experience. Though it is a priority 3 check point, it is highly recommended that they are implemented on all web pages.

  • Skip links must be visually hidden on page load and then made visible via tabbing with a keyboard.
  • Skip links must be used to jump to primary navigation or primary content area only.

The following code should be used to implement skip links effectively:
Note: “#main” / “#nav” are the ID names of the primary content/navigation DIVs

HTML

(placed straight after opening body tag)

<a href="#nav" class="skip">Skip To Main Navigation</a>
<a href="#main" class="skip">Skip To Main Content</a>

CSS

a.skip {
    left: -9999px;
    padding: 2px;
    position: absolute;
    top: 0;
}
a.skip:focus,
a.skip:active {
    background: #fff;
    left: 0;
}

Opening new windows

The opening of new windows or tabs must not be used. There are both useability (for example, the browser’s back button is broken when a popup is launched) and accessibility reasons for this. In the WCAG 2 accessibility standards, guideline 3.2.5 states –

Changes of context are only initiated by user request

For opening new windows this guideline states that you should not do it wherever possible – it should be left to the user to choose if they wish to open a new window or not. WCAG2 provides supplementary guidance to aid compliance with this guideline. This states situations where it is preferable from an accessibility viewpoint to open a new window, this includes only 2 situations –

  • When in a secure area and the link would leave the secure area
  • When in a complex multistage form and the link would leave this process

Other situations are not therefore considered to be suitable for opening new windows.

Any non HTML content must have appropriate headers served to instruct the browser to download the file rather than opening it within the browser. Such as by using ‘content–disposition: attachment

Where it is necessary it should be achieved via unobtrusive client side scripting, the use of the target attribute should be avoided. If an instance arises where a new window will be launched, the user must be warned in advance. This can be done using the “title” attribute within the link or separately within the content of the page. This title text must also be added using JavaScript so as not to confuse users without it as no new window will open in non–JavaScript. For example the JavaScript should create code such as:

<a href="https://www.aviva.co.uk/car/quote/help.html" data-rel="external" title="Car insurance help information – This link will open in a new window"> Aviva UK Car Insurance help</a>

In this example the rel attribute is used as a hook for an unobtrusive script to attach to the link to open the new window.

New window dimensions must not exceed 700px x 500px, unless absolutely necessary, and must be resizable. Status and scroll bars must also be displayed.


Tab order

Ensure that the tab order of the page matches the visual layout of the page. One for the first links to be accessable via the tabbing order should be the log in link.


Accesskeys

Despite in theory being a useful addition accesskeys should not be used on any pages due to the risk of conflicts with browser software. However if they are used they must be tested thouroughly across browsers to ensure there are no conflicts with built–in functions.