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.
Links
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 sufficient 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 appropriate 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="./accessibility/guidance/developer/navigation.html#nav" class="skip">Skip To Main Navigation</a>
<a href="./accessibility/guidance/developer/navigation.html#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 usability (for example, the browser’s back button is broken when a popup is launched), accessibility and security 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 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 ie. moving from https to http
- 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 using the target attribute and ensuring that the rel attribute is set to "noopener noreferrer" to ensure security. 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.
<a href="https://www.aviva.co.uk/car/quote/help.html" target="_blank" rel="noopener noreferrer external" title="External link - Car insurance help information"> Abeille Assurances UK Car Insurance help</a>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.