Accessibility

Accessible vertical navigation requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG Guidelines

1.1.1: Non-text Content

If any icons are used in the primary navigation, ensure that they have alternative text that describes the image for users with screen readers (W3C, 2018).

1.3 Adaptable

All items in the left panel are in a nested <ul> structure, which provides additional information to assistive technologies (Carbon Design System, n.d.).

The Vertical navigation component is in a <nav> section with aria-label="left navigation".

Each ‘sub-menu’ is implemented as a <button> with aria-expanded.

2.1.1: Keyboard

Ensure that users can navigate the primary navigation using the keyboard alone, as some users may not be able to use a mouse (W3C, 2018). Implement proper keyboard navigation for menus, including support for arrow keys to move between menu items, the Enter or Space key to activate links or expand submenus, and the Esc key to close submenus or the entire menu.

2.4.1 Bypass blocks

Include a mechanism to bypass navigation for those.

Use descriptive labels for each link in the primary navigation, as this makes it easier for users with screen readers to understand what the link is for (W3C, 2018).

2.4.5 Multiple ways

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

2.4.6 Headings and labels

Use clear and consistent headings to organise the links in the primary navigation and mega-menu, as this makes it easier for users with screen readers to navigate the menu (W3C, 2018).

2.4.7 Focus Visible

Provide visible focus indicators for interactive elements, so keyboard users can easily identify which element is currently focused. (W3C, 2018).

3.2.4 Consistent Identification

Maintain a consistent design, appearance, and placement for the back-to-top button across all pages of the website (W3C, 2018).

3.2 Predictable

Maintain consistent navigation structure and appearance across all pages of the website to help users understand the interface and anticipate where they'll find navigation items.

4.1.2 Name, Role, Value

Use appropriate ARIA roles and attributes to describe menu components and their states. This helps assistive technologies understand the structure and functionality of the menu.

Other best practice guidance

  • Offer multiple ways to access content, such as providing a search functionality and a sitemap
  • If the primary navigation includes dropdown menus or other interactive elements, ensure they're accessible using both keyboard and screen reader interactions
  • Make sure the navigation has appropriate colour contrast, meeting at least the AA level of WCAG 2.1 (4.5:1 for normal text and 3:1 for large text)
  • Use clear and simple language for navigation labels, avoiding jargon or unfamiliar terms
  • Provide an accessible close mechanism for menus, such as a "Close" button or an option to click outside the menu to close it, ensuring that users can easily dismiss the menu when needed
  • Activated links receive an aria-current="page" attribute

Last updated: April 2026

Back to top