Why is this important?
Consistency across all pages of your website helps users efficiently navigate digital content. Using common, accepted layouts and navigation standards will ensure users do not need to spend time working out how to use your site. Simplicity and consistency is key.
Make sure users can navigate your website by keyboard alone
- This is fundamental to accessibility and a critical requirement. Many users navigate and interact with websites just using a keyboard, because they cannot or choose not to use a mouse. Make sure every single aspect of your website is navigable by keyboard alone. No excuses!
- Use HTML navigational elements and ARIA landmarks to define the main areas of your pages. Screen reader users can use landmark information to help them skip blocks of content.
Be consistent with navigation across each page of your site
- Make sure all navigational links are available on all pages – links must not appear and disappear;
- Keep links in the same order on every page;
- Make sure navigational elements are in the same position on every page;
- Keep the appearance of navigational elements the same across the site.
Code navigation menus as lists
Menus are, after all, lists of items. Coding navigation as lists allows screen reader users to navigate to them quickly (via a list of ‘lists’), and to be able to determine how many items are in the list, so they know whether or not they need to skip past it.
Use an unordered list <ul> for navigation menus, unless there is a hierarchy to the list items – for example, breadcrumb or checkout steps – in which case, use an ordered list <ol>
Provide a way for users to get to the homepage on every page
- For example, provide a logo in the top left; include a ‘Home’ link in the main navigation;
- Breadcrumb navigation can help users orientate themselves and discover other, related content in the same section.
Use a clear, distinct design for navigational elements
- Make sure they are distinct and distinguishable from the rest of the content;
- Choose navigation labels carefully. Make sure they are clear, unambiguous, meaningful, understandable and accurate;
- Make sure focus indicators are clearly visible;
- Note: Static page elements such as containers, paragraphs or headings should not receive keyboard focus if the user cannot interact with them.
Provide different styles for hover, focus and active states
When we interact with elements it is important to get feedback that the interaction has been acknowledged by the website.
- The focus state requires the most consideration. Always make sure you have provided a visible and obvious focus indicator on all elements that receive focus. Keyboard-only users rely on the focus indicator to determine where they are on the page;
- Hover states provide feedback to users that an element is clickable. Keyboard-only users get feedback about an element’s interactivity from focus indicators; similarly mouse users require a hover state to let them know that the item they are currently over is clickable.
- Active states provide important feedback that a user-initiated interaction has been acknowledged by the webpage;
- Make sure the colours and styles you choose for hover, focus and active states have sufficient contrast ratios to the background and surrounding text.
Note: by default, browsers provide a visible focus indicator, however you may need to augment this depending on your choice of colour palette. Your chosen focus indicator colour must follow colour contrast requirements.
Examples of different button styles for hover, focus and active states
Provide a visited link style
Help users understand which destinations they have already been to by including a visited link style. By default, browsers provide a different colour for visited links, however it is also useful to add a secondary point of differentiation, rather than relying on colour alone.
Identify the current page, if it is represented in the navigation
- Visually differentiate the current page in navigation menus;
- Programmatically identify the current page:
- Remove the link but keep the link text, or
- Ask your development team to ensure that the link has an attribute that indicates it is a link for the current page, such as ‘aria-current’
Examples of different link styles for visited, current, hover, focus and active states
Make in-page links easily recognisable
- Style in-page links (links embedded in blocks of text) so that they are clearly distinguishable from non-link text – blue, underlined styling is conventional for links but other styles are acceptable providing they meet link colour contrast requirements and they use an additional point of differentiation on hover or focus, for example, an underline;
- Limit the styles and colours for links, ideally to one, to help with quick identification.
Ensure flyout menus are accessible
- For mouse users and users on touch devices, ensure each link in the menu has a sufficiently large target area, and there is space between each link. Do not require users to be highly accurate as this can cause difficulties for users with motor impairments.
- For keyboard users, ensure that your pages have skip links to allow users to bypass blocks of navigation;
- Make sure they are defined as lists;
- Use headings inside the sections to reflect the items within it.
Flyout menu items with child items should operate as buttons, exposing that section’s content
- Providing a button for each ‘parent’ item allows keyboard users to choose a section of the navigation to explore;
- This also provides mouse users and those who use screen magnification with greater control over the menu’s behaviour;
- Crucially, it allows users of touch devices to interact with flyout menus;
- If the parent item does have its own page, include it as the first link in its flyout section.
Do not link parent items in flyout menus to their own pages
If parent items operate as links to their own pages then each flyout menu section will have to open and close on mouse hover or keyboard focus.
- Users on touch devices will not be able to open the flyout menu, as pressing the parent link will take them to another page;
- Screen magnification users may be unable to move around the screen without unintentionally showing or hiding the flyout navigation;
- Keyboard users, interested in the third top-level menu item, would have to tab through all of section one and two to get to item three;
- Mouse users who have motor impairments risk losing visibility of the flyout menu if they accidentally move their mouse outside of the flyout menu area.
Explore alternatives to flyout and megamenu navigation
- Megamenus and flyout navigation can be difficult for mouse users to control, especially if they require fine dexterity;
- Long lists of menu items can be very time-consuming to use for keyboard-only users as they have to navigate them in a linear manner;
- If you must use megamenus then test them with users once you have a properly coded prototype:
- Include users with access needs in your test sessions;
- Ensure the megamenu can be used with just a keyboard;
- Ensure all levels within the megamenu structure have links.
- Note: GOV.UK is a very large site with a lot of content but they do not use a megamenu to provide access to that content.
Consider implementing a two-parent menu
Whereas megamenus expose everything beneath the first level, two-parent menus operate a progressive disclosure model, exposing only one sub-section at a time.
All items below the first level are exposed at the same time – this places a significant burden on the user to find the information they are looking for, especially if they have to navigate in a linear manner.
Alternative, two-parent menu
Only the selected second-level menu is exposed – this provides fewer distractions and results in a lower cognitive load. Parent-level navigation items act as buttons, revealing the next level, rather than links to pages. “View all” links are placed at the top of link lists to provide access to the parent page.
Avoid using popup windows
Popup windows are difficult to perceive and navigate for many users; they are also excluded from site navigation so are very difficult to find.
If you need to refer to supporting information, there are better options than popups:
- Include the information on a separate page, available from the site navigation, and link to it;
- Include it in an expandable/contractable panel, on the page, near to the information it is supporting;
- Use a modal or non-modal dialogue to display the information – both of these need to be considered, designed and coded carefully:
- Modal dialogues require careful construction to ensure they can be navigated – see this example of how to create an accessible modal dialogue
- Non-modal dialogues require careful design and implementation so that users can control and interact with them without requiring a mouse, and so that the dialogues do not obscure content on the page.
Examples of good and bad practice
Identify the current page, if it is represented in the navigation.
Table 1 - How to and how not to indicate the current page in the navigation
We have been operating since 1877…
We have been operating since 1877…
Include links in sensible places
Table 2 - How to and how not to position in-page links
|For more information, contact us using the link in the footer menu
|For more information, please contact us
Make in-page links easily recognisable
Table 3 - How to and how not to style in-page links
Inconsistency in navigation display
The presentation of the navigation is inconsistent across pages within a specific breakpoint. Users will have become used to seeing each navigation item on earlier pages and so may believe that other navigation options are not available on this page - not all users will understand what the “hamburger” icon represents.
Make sure focus indicators are clearly visible
The focus indicator is clearly visible around the “I’ve taught 1,000 kids in India’s slums during Covid” link.
The focus indicator has been enhanced so that it works against both light and dark backgrounds
There is no focus indicator on the “eCommerce Websites” link – it is extremely difficult to determine which is the current, active element.
- 1.4.1 Use of Colour (A)
- 3.2.3 Consistent Navigation (AA)
- 3.2.4 Consistent Identification (AA)
EN 301 549 v 2.1.2
- 188.8.131.52 Use of Colour
- 184.108.40.206 Consistent Navigation
- 220.127.116.11 Consistent Identification
- Why Consistency is Important to Accessible Design
- Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where colour alone is used to identify them
- Link + Disclosure Widget Navigation
- Example Disclosure Navigation Menu with Top-Level Links