Navigation

1. Introduction

A clear, logical, and consistent navigation scheme is essential to optimize access to information on a website. The navigation scheme should provide users with a coherent means of finding information, remind users where they are within the website’s structure, and help orient users who arrive at the website without going through the homepage.

To ensure a seamless experience for users, government websites must be consistent in displaying similar navigation items. 

2. Best practices for website navigation

2.1 General linking principles

  • Consistency: Ensure links have a consistent visual style (e.g., underlined text, specific colors, hover effects) across the website.
  • Clarity: Use clear, descriptive, and meaningful link text. For instance, replace vague links like “Click here” with specific text such as “View annual reports.”
  • Accessibility: Ensure links meet accessibility standards, such as maintaining sufficient color contrast and providing focus indicators for keyboard navigation.
  • Avoid redundancy: Don’t use repetitive phrases like “read more about” or “see” at the start of links.
  • Linking to documents:
    • Use the document title as the link text.
    • Include information about the file type and size in brackets (e.g., “Download Annual Report [PDF, 1.2 MB]”).
    • Round file sizes to one decimal point and use MB (not KB) for anything 1 MB or larger.

2.2 Display of navigation items

  • Visibility: Display main navigation items consistently across all pages.
  • Homepage link: Include a link to the homepage on every page except the homepage itself.
  • Search functionality: Ensure the search option is present on each page, with a recognizable icon (e.g., a magnifying glass) in the top-right corner.
  • Grouping: Group similar navigation items logically, such as “Services,” “Resources,” or “About Us.”
  • Responsive design: Ensure navigation items are optimised for various devices and screen sizes.
  • Legibility: Use clear, readable text for navigation items, ensuring they are large enough for easy selection on both desktop and mobile devices.

2.3 Assist the user to move easily

  • Multiple navigation routes: Provide different ways to access content, such as global navigation menus, sidebar menus, and footer links.
  • Breadcrumb trails: Include breadcrumb trails on all pages to show users where they are within the website’s hierarchy. For example: Home > Services > Applications.
  • Back functionality: Allow users to move back in the hierarchy using highlighted menu items or breadcrumbs rather than relying on the browser’s “Back” button.
  • Coat of Arms: Always link the Coat of Arms to the homepage.
  • No new tabs/windows: Avoid opening HTML pages within the same website in a new tab or window unless explicitly necessary.

2.4 Long HTML pages

  • Scannability: Break up long pages using subheadings, bullet points, and white space for easier reading.
  • Interactive elements: Incorporate collapsible sections or accordions for lengthy content to reduce scrolling.
  • Tables of contents: For longer pages, provide an index or table of contents with links to main sections. Include a “Back to top” link at regular intervals.
  • Divide content: Consider splitting long documents into shorter, linked pages. Each page should:
    • Be accessible from other pages.
    • Include a “Next,” “Previous,” and “Table of Contents” link.
    • Offer a parallel link to the full document in PDF format.

2.5 Linked text

  • Minimize inline links: Avoid excessive links within body text to reduce distractions and improve readability.
  • Avoid duplication: Links in text should not replicate the function of menu items.
  • Strategic placement: Place links at logical points, such as the end of paragraphs, rather than scattered within sentences.

2.6 Graphic navigation

  • Accessible alternatives: Always include text alternatives or ARIA labels for any images used in navigation.
  • Icons with text: Use icons to complement text links but not as standalone navigation elements.
  • Avoid image-only links: Provide text links alongside any image-based links to ensure accessibility.
  • Avoid graphic bullets: Use standard HTML bullet styles rather than images for bullet points.