Navigation

Top level navigation

Where possible, this top-level menu should be kept as simple and concise as possible. Avoid Mega Navs and Fly Out navs – it is extremely hard to satisfy the needs of all our users with these sorts of navigation styles.

Some other key considerations are:

• Positioning should follow convention (left hand side or along the top of your site).
• Labels should be written in plain English, be keyboard operable, with focus never hidden from users.
• Provide large clickable areas.
• Create clear styles to differentiate between hover, focus and current states.

Aria patterns for implementation

• Indicate the current page in any navigation region which it is featured, by using the aria-current attribute with value of ‘page’ on the link element. More information on Aria-current
• Role=menu and role=menuitem attributes are sometimes used to provide clearer representation of, for example, navigation with ‘drop down’ functionality. However, only use these roles if you are implementing all aspects of the ARIA menu design pattern

Alternative navigation

We should provide multiple ways of reaching any page on the site, so users can select their preferred way. For example, a user with low vision may prefer to use search rather than navigation, whereas a user with cognitive impairments may prefer to use a site map rather than clicking through multiple pages.

Alternatives include:

• links to related pages
• site maps
• search.

Breadcrumbs

To be effective they should be:

• Positioned correctly – typically after the main menu and before the H1 header.
• Complete – they must show every step in a journey.

<nav aria-label="Breadcrumb">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="history.html" aria-current="true">Our history</a></li>
</ul>
</nav>

Skip links

These links allow users to skip through content on a page. For example, inserting a “Skip to content” link in your header lets users can skip to the main content areas so they don’t have to tab through all the navigation items every time the page loads. This saves them lots of time.

Design considerations for skip links:

• They are sometimes hidden until a user starts tabbing.
• They should be one of the first focusable elements on the page.

Landmarks

Landmarks provide a useful skip navigation for screen readers. It’s important to identify, and label basic landmark elements at an early stage in the project, preferably in the wireframes. The most common landmarks are:

• header
• navigation
• main content
• footer
• search

Section headings

Breaking content up on a page is a fundamental aspect of accessibility. It helps all our users scan a page and navigate to the bit they need as quickly as possible. For more information, view our article on Section headings

Opening links in a new window or tab

In general, it’s better not to open links in new windows and tabs because it can be disorienting for users – especially those with a visual impairment – who may not realise a new window or tab has opened.

Important exceptions are:

• Disrupting a task
  When opening the link in the same window or tab will significantly disrupt a multi-step workflow, such as filling in and submitting a form.
• Logging a user out
  If a user is logged in, and taking them to a new window or tab would deactivate their logged in status.
• Opening/downloading a document or image
  The link is for a PDF, large image, or printable version of a page or article. Each of these can download in the background of a new tab or window. It also stops a user closing the browser when they close the document.

Warning users about new links and tabs

If you opt to open a link in a new tab or window it’s essential you provide a sufficient warning to the user. Here are two ways to do that:

• Use the href title attribute to let the user know that the link opens in a new window.
  Nationwide.co.uk – Opens new window< br />
  The code for this would be: <a href="#" title="Opens new window">nationwide</a>
• Use text to indicate that the link opens in a new window e.g.
  Nationwide (opens new window)